Building a radar chart with Flutter and Custom Painter
Introduction
Using charts in mobile applications is generally a great approach when trying to present data in small layouts. They can convey important patterns and trends hidden in the data, while providing some eye candy to your users.
Today we’ll be building a radar chart. It allows us to compare multiple features of an entity (ex. stats for sports teams, skill strengths on resumes). We’ll be leveraging Flutter’s Custom Painter, which allows us to directly draw on a canvas. This will provide us the freedom to create a radar chart that matches any of our UI needs. With a little bit of math, we should be able to replicate a basic radar chart design.
Building the chart
Let’s start by defining a basic stateless widget. CustomPaint will be used to create our canvas. We’ll be setting the size of the canvas to double.infinity so that’ll fit its parent container. Our CustomPaint widget will also reference our custom painter.
Since we’ll be dealing with circles, we’ll need to start at the center of the graph. We’ll set the radius of our chart to 80% of the total size of the container, so that we can fit our feature labels. Now, let’s build the outline of the graph. We can draw a basic circle by with the use of Paint and canvas.drawCircle.
Next, we’ll define our numerical axis with a list of integers called ticks. Each tick, excluding the last one, will have an associated axis outline and a label. We’ll use TextPainter to paint the tick labels at the top of each axis.
Our chart should now look like this:
Let’s start defining the features which our entities will be compared against. We’ll add a list of strings features to hold the labels. The number of features will determine the number of slices in our pie, and the angle between each feature. With some fun trigonometry, we can figure out the position of each feature label. We’ll also draw a line from the center of the circle to the label.
The outline of the graph is pretty much finished. We should now be ready to draw the graphs!
We’ll add a final parameter data which will hold the data points needed to construct each entity in the chart. The number of data points per entity must match the number of features. For each data point, we’ll need to map it on our chart. This means scaling the point by the range of our axis, and offsetting the point according to the position/angle of each feature. We can then draw a path through each mapped point. We can define separate Paint objects for the chart outline and fill.
And done! With just a few lines, we now have a basic radar chart comparing two entities against 5 features.
Conclusion
Playing with Flutter’s CustomPainter is a ton of fun. I hope this tutorial helped you get a better picture of its capabilities when building charts. If you just need an out-of-the-box charting library, Google has a solid offering.
flutter_radar_chart is currently available on pub.dev, and the code is available for review. It’s still pretty rough, but feel free to check it out! I’ll be attempting to add better customization and experimenting with animations in the upcoming weeks. Shoot me a message if you have any questions or ideas.
