Why pie charts often suck
And how we did better
Pie charts are ubiquitous, easy to make, and seem like an obvious way to segment data. They’re still incredibly popular — possibly because they’re the default chart in PowerPoint and Excel.
Unfortunately, they also suck.
A chart’s primary purpose is to faithfully communicate a set of data. In most cases, pie charts don’t do this.
There’s plenty of literature on why pie charts suck. Here at Penny, we wanted to do better, given our goal of making finances easier to understand. Clear visualizations are an amazing way to accomplish that goal.
In this post, I’d like to share our journey from a pie chart to a better visualization for a classic financial visualization problem: breaking down your spending into categories.
Visualizing Your Spending
Here’s the problem: visualize the table above. A common instinct is to reach for a pie chart:
How do we evaluate whether it’s a good fit? Well, there’s no one right chart for all use cases—every chart makes some things easier and others harder. A chart is a good fit when the chart’s strong suits align with the message we want to convey.
A chart is a good fit when the chart’s strong suits align with the message we want to convey.
So, is this pie chart a good fit? Let’s start by examining its pros and cons.
Pros of this pie chart
What’s easy to see about the pie chart above? At first glance, the huge orange swath that represents bills leaps out at you. Bills constitute a huge part of this person’s budget: a little more than 50%. That’s a great message to convey—when the user has a category that’s dominating their spending, the chart hammers that point home.
Cons of this pie chart
There are several issues with this pie chart, but I’d like to focus on three of them: comparing slices, ordering categories, and estimating percentages.
Comparing two slices is difficult, especially between the blue and green categories because they’re separated and angled differently. It’s also harder to grasp the ordering of the categories—your eyes dart back and forth from green to red to blue to compare their relative sizes.
In addition, it’s hard to get a feel for each slice’s fraction of the whole. The three smaller ones look like around 15–20%, but it’s not easy to estimate. Ironically, pie charts invite your eyes to estimate that percent, but actually make it difficult to do so. Humans aren’t good at estimating uncommon angles, and are especially poor at estimating small angles. In a graph with a tiny sliver, is the sliver 1% or 3%? It’s difficult to tell.
Ironically, pie charts invite your eyes to estimate that percent, but actually make it difficult to do so.
Is this a good fit?
Are these problems acceptable for our use case? Answering this question is a product decision, not a visualization decision. Do the unordered categories of our pie chart communicate our point? Do the rough estimates of each slice’s percent communicate our point?
Our answer at Penny, which may differ from yours, was that neither did. Unordered categories hinder comprehension about your biggest categories. Knowing the percent (i.e. that food is 17% of your spending) feels useful on the surface, but is less direct than the absolute number. “You’re spending $400 a month on food” is a simpler message than “17% of your spending is on food.” A user’s response to the former might be “Wow, $400 is a lot!” whereas their response to the latter might be “Is 17% a lot?”
For these reasons, we looked for better alternatives.
An alternative: the bar chart
One alternative we found was the bar chart, another common chart. Here’s the above data represented in bar chart form:
As expected, the bar chart emphasizes bills, the largest category. It’s useful to see the bars in sorted order, and it’s easy to do side-by-side comparisons. Humans are much better at gauging lengths than areas or angles, so it’s easy to observe their relative sizes. The data is aligned to right angles, which lends a sense of structure to the graph and eases comprehension.
So far, this is working out better than the pie chart.
Unfortunately, the bar chart makes it difficult to estimate the percent breakdown of each category. In fact, it’s no better than a table for this purpose. But as we discussed above, we’re happy eschewing the percent breakdown in favor of an absolute breakdown.
Yet another alternative: horizontal bar charts
We were about to start building our bar charts when we explored yet another alternative: the horizontal bar chart.
Yup, it’s the same as before, just sideways. However, the horizontal bar chart has one main advantage: the labels are easier to read.
When your eyes take in a horizontal bar chart, the axis labels, bar, and data label all flow in the same direction (left to right). In contrast, vertical bar charts need more visual gymnastics to understand, because the axis and data labels flow left to right and the bars flow up and down. Some vertical bar charts try to fix this by rotating the axis labels, but this only worsens readability because you now have to read sideways.
Horizontal bar charts have some other advantages. By scaling down instead of right, they can support more bars than vertical charts, because vertical space is usually less constrained than horizontal space. They also handle long axis labels better because they don’t affect the spacing between bars.
Given these benefits, we embraced horizontal bar charts for our category breakdown visualization. Here’s what it ended up looking like in Penny:
If you haven’t used Penny, you might not understand the icons, which represent our four spending categories: food, transportation, bills, and everything else. We use those icons everywhere in the app with the same colors for ease of comprehension.
As you can see, the graph in the app looks different from the graphs in this post. We made several design decisions to tailor the graph for the small screen—maybe we’ll discuss those another time :)
In this post, we evaluated the merits of pie charts and concluded that the best visualizations use their strengths to emphasize their intended message. For our use case, the horizontal bar chart sends a much clearer message than the pie chart.
The best visualizations use their strengths to emphasize their intended message.
While we’re happy with the way our charts have turned out, we’re always looking for new visualizations and paradigms to make Penny even better. Give us a holler if you have any: Alex Quach or alex [at] pennyapp.io!
If you enjoyed this, don’t be shy about 👏 for it!
Alex, cofounder @ Penny
