A lot of applications that we are asked to redesign are using reporting, and one of the most beloved reporting graphs is the pie chart. Some of these pie charts suffer from a major No No: using too many wedges. Here’s an example:
Sadly, I see pie charts like this all the time. On the surface it may seem like a properly working pie chart: it’s got the values, the legend (showing the names and colors off to the right). And of course the whole point of the pie chart is to show values as a percentage of the whole. So you should be able to tell, by looking at the chart, what percentage “Cold Call” is of the total. Can you?
Is “Cold Call” actually $345 or $210 … or $110? Because this chart is using 13 colors: 3 blues, 3 greens, and 3 reds, it can be very difficult to tell which wedge actually goes with which item in the legend. There are 3 shades of green – which one is right? The problem is made worse by the fact that the wedges are not actually a solid color, but a gradient so within a given green wedge there are many shades of green that may overlap with the greens in another wedge.
Now consider color blindness. From 7-10% of men are colorblind and if you are making a product that targets, for example, system administrators (a largely male profession) that could mean that up to 10% of your users see this:
This is pretty hopeless. There is no way at all to be able to match up the legend to the pie chart. One thing I always tell clients is that your interfaces (including charts and graphs) should be completely readable when shown in grayscale – with no color at all. Color is best used a a secondary cue – there should always be some other way to get the information that color is providing.
I also tell clients: pie charts are for up to 5 wedges. No more. It’s easy to distinguish 5 colors, beyond pie charts are no longer the right tool. So, one way to rework this chart would be to combine the categories and reduce it to five wedges:
On the left is a new chart with only 5 wedges and on the right is the same chart, shown as it would be seen by someone with Deuteranopia (a form of color blindness). Now it is easy to distinguish the wedges. Success! This is what pie charts are good at: showing high level, gross percentages. Which is the biggest? Which is the smallest – they excel at this.
At this point someone might argue that we’re showing less information than the original pie chart. If it were possible to perfectly read the original chart, that might be true. But since the original chart was impossible to read without making errors, this pie chart actually shows more information. If we wanted to try to show all of the information that was presented in the original chart in a way that was readable, we could replace the pie chart entirely and instead use a horizontal bar chart like this one:
This bar chart shows all of the data in the original pie chart. (Actually it shows more: the original pie chart didn’t include percentages – it was up to you to deduce the percentage by looking at the size of the wedge.) And this presentation actually carries more information. You can quickly see which value is the largest, which is the smallest, and how the values in between clump together. None of this information is available in a pie chart.
This chart also doesn’t use color as a cue, so it’s easier for color blind users to interpret it. This chart is unambiguous, it shows more data, and can accommodate as many “wedges” as you’d like to use.
So, in summary:
- Use no more than 5 wedges in a pie chart
- Use a horizontal bar chart when you must show more than 5 “wedges” in your pie chart
- Choose colors for the wedges that can be distinguished even in grayscale
- Test your colors for colorblind users (use the Color Oracle)
I’ve got more to say about Pie Charts – that’s for another day.
What do you think? Have you seen charts like this one? Have you tried other charts in its place? Are you color blind?