How to make interactive radar charts – and why you should try “stellar charts” instead
Our new template makes it easy to create online radar or spider charts. It also supports new star-shaped alternatives.
The radar or “spider” chart is a widely used visualization style for comparing people, places or other entities across multiple metrics. The metrics in the data need to share the same scale, so you’ll most commonly see radars used for percentage points or scores out of ten.
You can now easily make web-friendly interactive radars in Flourish. Just open the new Radar Chart template and drop in a spreadsheet with a column for each metric. Let’s look at a couple of examples and then explore the downsides to this chart type and some alternatives that are also available in the template.
The example above shows radars on a “small multiples” grid, whereby each radar gets its own mini axis. This is quite standard for radars, but the example also highlights a couple of nice and less common features that we built into the template:
You can easily add controls for filtering and grouping. These are set up simply by pointing to columns – in this case for the nationality and club of each player.
Just like our small-multiple line and bar charts, the grid is responsive, so the number of rows and columns will adjust automatically based on the window size and your size settings. If you’re on a desktop, try resizing your browser window to see this in action.
The next, more playful, example shows two further features:
Comparison lines. Turn this feature on to include a subtle duplicate version of each radar on every axis, making it easier to compare.
Clickable legend. So the user can click on a color to add/remove by color.
Radar downsides
Many visualization practitioners dislike radar charts and whether or not you agree, it’s definitely worth being aware of the most common problems with this chart type. One downside is that shape is very affected by the order of the metrics on the axis, which in itself usually means little or nothing.
A second issue is that the area of each radar can be misleading. On a traditional area chart, if the values are twice as high, the area below the line is twice as big. But on a radar chart, the area is exaggerated relative to the values.
The third main argument against radars is that the metrics on each spoke of the axis are usually discrete, but the way they are connected by a line might imply that they are continuous.
Radar alternatives
When building the template we came across an excellent Nightingale article by Alexandre Morin-Chassé who, in light of the downsides of radar charts, proposed a few alternatives to traditional radars. These include radial bar charts and so-called “stellar charts” – a phrase that Alexandre coined to describe a radial chart with tapering bars.
We liked Alexandre’s ideas, so we added a “Star” mode to the new templates. This adjusts the lines so they automatically go back towards the center between each data point. Turn this on and you easily tweak the stroke, fill and inner radius values to make both stellar charts …
… and radial bar charts:
Here’s the example from the top of this page but using stellars instead of radars. In some ways it is definitely clearer, but there is one downside: with this kind of shape it doesn’t really work to group more than one shape on each axis.
Group labels
One final feature of the new template is the ability to add radial labels to the outside of the axis. This is handy if you want to broadly assign the metrics on the axis to different categories.
Footnote. In the course creating this template, we discovered something unexpected: the Flourish logo is actually a Stellar chart! Click it to see how we felt when discovering this.