Stacked bar chart
Stacked bar charts are useful for comparing proportions within a category. They plot the proportional values that each data category contributes to the total
The main purpose of stacked bar charts is to compare total values across various categories. It allows you to first see the totals of the category and then at a closer look you get a better understanding the proportions within the category.
Use stacked bar chart to display a part-to-whole breakdown of quantitative values for different categories.
It can be use to track data over time if the understanding totals is the main goal.
If your main goal is to compare individual values, then use grouped bar charts instead. This is because it is easier to compare individual values once they are plotted against the same baseline.
If your main goal is to show that the total of a category is larger than another one over time, then use a line chart instead. This is because stacked bar charts make it difficult to follow changes of categories over time.
For width, spacing, orientation and baseline see bar chart guidelines.
Absolute value vs 100%
The values in this chart can be an absolute value or 100% value. This depends on the story you want to tell.
Absolute values: Use when the most important information to display is the total. In this case each subcategory will be represented by the absolute value and the ratios becomes secondary.
100% values: Use when the most important information to display is the percentages. In this case each subcategory will be represented by the percentage value and the absolute value becomes secondary. Avoid using 100% values if there is missing data point, because it defeats the main purpose of the chart.
Option 1: displays absolute values of the bars, which is all the subcategory values added together.
Option 2: displays percentage values of the bars.
Keep the order of the colors the same over all the bars. Depending on the context of your data it could be in ascending/descending order or based on a natural order. Think of which data is most importance to be more easily read and place those at the baseline, as it’s easier to judge.
Keep the color order the same for all bars.
Don’t change orders of the bar colors.
Color can distract the reader by implying additional meaning where none exists. Instead, color should be used with purpose. Since the main goal is to show the total, do not use too many colors, else it becomes distractive.
If you have to display more categories — try to group them into broader categories or choose different chart.
It is not good practice to use more than 5 sub-categories because it makes it difficult for users to compare across different bars.
See more details on which exact colors we use for which elements.
Examples of behavior that is unique for the stacked bar chart. For loading, error and empty states check behavior guidelines.
Hovering over a bar or the corresponding axis label causes all other bars to fade back from the view. A tooltip should display the dimension value and the corresponding metric value.
Learn more on the anatomy of a tooltip.
Missing data points
When there is no data available display it as zero and add ‘no data’ in the chart tooltip with the corresponding legend token.
Thinking that you might need something else and not a stacked bar chart?
- Bar chart: use it to display quantitative values for different categories. It is best if you need to compare different categories.
- Grouped bar chart: use it when two or more data sets are displayed side-by-side and grouped together under categories on the same axis.