Jogging your geometry memory by building an SVG radar chart in React Native.

4 min readMay 30, 2020

Intro

Software Engineering. In front-end land it’s easy to drop the “Engineering” element along the way in our rush to deliver software.

Want to build a chart? Someone else must have done this. Google. Install library. Fit peg into hole. Pray that it doesn’t come loose 🙏.

I fell into the trap of working this way over time and paradoxically it is quite exhausting. Nothing ever feels satisfyingly “built” and you end up on a hamster wheel of repair cycles 🐹.

So I’ve been dusting off my old geometry skills and approaching tasks with a fresh perspective lately. To engineer pragmatically from the ground up on a solid foundation of understanding.

An upcoming project I’m working on required me to build a Radar Chart to display information. You might remember this style of chart if you spent your youth playing FIFA football like me.

At first a chart like this looks quite intimidating. All those lines! But really there’s only a few components repeated and all of them require a simple piece of Maths at their foundation 🤓.

Some Maths

If we take the center point, C, we can place any point along the edge of the circle like so;

Let’s put that into a TypeScript function…

… and then just curry for convenience as our center point and radius will never change….

Here’s how our SVG currently looks.

You might wonder why 60 degrees is upside down and that’s due the fact that SVG measurements start from the top left at (0,0) so basically all of our y points are upside down! One way to solve this is simply to add 180° onto our y degrees…

const svgY = (degrees: number) => degrees + 180;

which leaves us with a shiny 60 degree angle.

Building our radar chart

First we want to make an outline axis for reference. Let’s draw three inner circles, creating them at an even spacing by multiplying by the radius times 0.25.

Along with this we are going to map six data points, basically cutting our pizza into six pieces. So we pick points at 60° intervals, use our formula from above to find that point on the circle and draw lines between them.

The code for this is pretty simple. Just map over three points, multiply i*60 for the first point and (i*60) +180 for the point you want to draw to.

And tada, our pizza is ready to be served a radar chart.

Bringing it all together

And now our final requirement is to map our data points onto the chart. Each point is a simple number value between 0 and 100 along with a label. i.e. 90 for Strength. You can tell these attributes are not personal 😆.

To map these data points is pretty simple. We already know how to map a value that is 100/100 — that’s our previous formula that places a point on the circles edge.

And we know how to get 0 — that’s simply the center point of the circle. So all we have to do is divide the score by 100 to get the distance towards the edge point and we can plot it. Let’s update our curried TypeScript method to allow us to add a scalar. We add a sensible default of scale=1 so that our previous code doesn’t even need to change.

We are going to use a polygon to map out our data so all we need to do is iterate through our data points to calculate the points of the polygon.

And that’s it! Our SVG radar chart in ~100 lines of code. I’ll leave it up to you to fill out the label placement along the edges using the formula we’ve created . Happy coding!