Stacked bar charts are often bad: a makeover of a vox.com graph

Stacked bar charts are often bad. It can be hard to compare categories that don’t start from the axis, more than a couple of categories can be confusing, and totals can be deceptive. Take a look at this stacked bar chart from Vox.com and see if you understand what’s going on in less than a couple of seconds. The data is simple and the shifts in public opinion are large, so it’s certainly not difficult to see what the graph is trying to say, but this design is muddy at best.

example

I re-made the graph in my web-app for creating presentation ready charts, Playfair. The major sin of this graph1 is that there is little distinction between the first two survey answers, which are ‘good’ answers, and the second two ‘bad’ answers. There are two distinct buckets of data here but in the Vox graph all data is on the same color spectrum and no attempt is made to draw visual attention to this distinction. The total length of each bar is only meaningful in the sense that public opinion must add to 100%, but I find even this a little confusing as these bars *do not* sum to 100, which initially made me think that the total length of each bar had meaning.

To fix it, I made two significant alterations. First, I centered the data around 0, with ‘good’ answer volume on the right of x=0 and ‘bad’ answer volume on the left. Second, I used a different color spectrum for ‘good’ and ‘bad’ answers. The finished product is instantly interpretable. Here’s my re-make from Playfair:

playfair

Other options you could go with here: since the ‘good’ and ‘bad’ buckets are basically just inverses of one another, only show one of them; combine the ‘really good/bad’ and ‘kinda good/bad’ answers into one category; side-by-side bars of the good and bad.

  1. I am aware that the journalist probably made this in a graph maker of some sort and maybe didn’t have the ability to modify the graph like I did.
Share on FacebookTweet about this on TwitterShare on LinkedIn