Data visualisation and storytelling

Create

Why chart legends suck and what to use instead

Combining legends with titles makes your visualizations simpler and more impactful – and it’s now super easy in Flourish

If you look around at the best hand-made charts today – created by the likes of the FT, New York Times and FiveThirtyEight – many of them no longer feature a legend. Instead, the text in the title is colorised such that a legend isn’t necessary. You can now do this in Flourish with one click!

Text legend gif

The case for headers as legends

Why would you want to do this? At the risk of attracting the ire of visualization experts everywhere, I’m going to do my best to convince you that using your header as a legend is often the best option.

Let’s say you have a simple dot plot, like this one showing the difference in vote share between the Democratic candidates for governor and US senator in Texas.

Header settings panel

The first thing to consider is whether this chart needs a legend at all. You might be able to guess which color corresponds to which candidate. But you could also accidentally – and incorrectly – associate O’Rourke with the dots on the left and Valdez with the dots on the right because of the order in which their names appear in the the header. At this point Flourish gives you a few different options.

Option 1: Labels

You could label each dot, but this isn’t very clear and feels unnecessarily repetitive. Even,when you label just the first two, as shown below, it looks messy and clutters up the main part of the chart.

Header settings panel

Option 2: Popups

You could also rely on Flourish’s popup feature, but that requires someone to hover or click on the dots to get essential information, which they might not want or realize they’re supposed to do. (It’s also a pain on mobile!) Hiding away key information in popups is generally avoided for this exact reason.

Header settings panel

Option 3: Legend

The most obvious and traditional solution would be to use a classic legend, right below the subtitle.

Header settings panel

Option 4: Legends in title

Admittedly, the legend works fine, especially with a small number of series. But isn’t it also repetitive? We have the candidates’ names in the title already, and now we’re adding them again, two lines below. Instead, why not just color them where they appear in the title? Here’s the result…

Edit this chart »

So…

If you asked a group of data visualization experts about their chosen field’s most important principles, they wouldn’t just respond differently, they’d also disagree on how to best visualize their answers. But one thing all of them would emphasize is simplicity.

Is using the header as the legend, in this situation, not the simplest option? I think it is. Have I convinced you? Either way, please try it for yourself!

How it works in Flourish…

Header settings panel

Just make a chart as usual and in the Header settings panel, under “Add data colors to header text”, choose “Auto”. Flourish will now look through the text and color any words that match a series name in your chart. That’s it!

For example, if green dots represent Europe and you write “Europe” into your title, “Europe” will turn the same green. For a bit more control – for example, if you want Flourish to colorize the title but not the subtitle – click “Custom”.

This feature is already in our Scatter and “Line, bar, pie” templates. We’ll add it to all the others soon. Note it will only work if your chart elements are being colored categorically. In other words, it won’t work if you’re assigning colors based on a continuous numerical column.

Titles as filters

After creating the new “text legend” feature last week, we had an idea: wouldn’t it be cool if the colorised text could also filter the data? This way we’d be killing three birds with one stone, and removing even more clutter from the chart.

We’ve now implemented this in the Scatter template, which means you make filtering titles in everything from connected scatter charts to box plots. Try it below and watch the chart animate.

Make a boxplot »