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.

Column chart facilitating 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.

Stacked chart facilitating comparison & relationship

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!

Trusted by over 800,000 developers across 28,000 companies. Free trial download!

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.

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.

Grouped column chart

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.

Grouped column 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.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 responses on “Choosing the Right Chart Type: Column Charts vs. Stacked Column Charts

  1. The graph that shows contrasting trends between levels of an independent variable is
    A. Float Graph
    B. Belt Graph
    C. Pyramid Graph
    D. Radar Chart

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards