Choosing the Right Chart Type: Column Charts vs. Stacked Column Charts

Column charts are excellent for displaying change over time because column lengths can be easily compared. Column charts can display both nominal and ordinal data, and stacked column charts can be used to display data with a part-to-whole relationship instead of a pie chart. In this post, you’ll learn the difference between a Clustered Column Chart and a Stacked Column Chart, as well as how to choose which Javascript Data Charts are best for you.

The Difference Between Clustered Column Chart and Stacked Column Chart

The column chart and the stacked column chart can display data using rectangular bars where the length of the bar is proportional to the data value. However, in the column chart, data values are displayed side-by-side, whereas they are stacked one over the other in the stacked chart. Stacked column charts work better when you want to compare the whole and distinct parts. It isn’t easy to compare columns that don’t start at the same baseline. If the focus of your chart is to compare multiple parts across all your totals, choose small multiples instead. Let’s understand the usage of these charts with an example. Say you want to compare your region-wise sales for 2012. A column chart can easily facilitate that comparison. But what if you also want to show the quarterly contribution from each region? The stacked column chart is beneficial in this scenario, as it can facilitate both comparisons and part-to-whole relationships. From the stacked column chart above, you can compare the sales of each region and analyze the breakdown of each regional sales into its constituent quarters (part-to-whole). The stacked chart is effective as it can visually aggregate the parts of a whole.

Grouped Column vs. Stacked Column Chart

Data interpretation using a stacked column chart becomes difficult when you want to compare the constituent parts of each entity across the various entities. Try comparing the 2nd Quarter sales across the regions from the above chart! In the Javascript chart above, the parts (quarters) in the individual entities (regions) do not share a common base. You can compare the sales of North across the regions (as it has the same baseline), but it is cumbersome to do the same for the other regions. To facilitate such an analysis, we can use the grouped column chart. When several column charts are combined side-by-side to form individual groups, they are called grouped column charts. In the grouped column chart, all the columns have the same baseline, and thus it is much easier to compare the heights of the individual columns. Furthermore, to make the analysis easy, bring those columns closer to aid comparison. In this chart, we have brought the quarterly sales of each region closer to form four groups―North, South, East, and West. You can easily compare the sales of North across the four quarters from this chart. On the other hand, in this chart, the North, South, East, and West sales form four groups―Quarter 1, Quarter 2, Quarter 3, and Quarter 4. It is easy to compare each region’s sales within a group (quarter) due to their proximity with one another. While the column chart can facilitate all comparison-based analysis, it is better to use the stacked column chart to show the part-to-whole relationship (along with comparison). PS: We have more posts that talk about charting best practices. You can check them out here.