Why chart legends suck and what to use instead

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 colorized such that a legend isn’t necessary. You can now do this in Flourish with just a few steps!

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 the 2018 Texas election.

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. This option also relies on legend texts being short, which isn’t always the case.

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.

Option 3: Legend

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

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…

Make a dot plot »

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…

Just make a chart as usual and in the Legend settings panel, under Add data colours 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, in this chart green dots represent Beto O’Rourke and if you write his name into your title it will turn the same shade of 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. You also need to make sure that the text on your title matches the one in the data exactly.

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 »