Stacked bar chart

Description ​

Stacked bar chart is used when it's necessary to display more than two categories of values and show the ratio of them to the whole.

Important points to keep in mind when presenting data as a Stacked bar chart:

1. Use this chart type if you have more than two categories to compare.
2. Use this chart type to visualize the ratio of parts to the whole.
3. Use sufficiently contrasting colors to show different parts more clearly.
4. Don't make this chart too small in height and width – it will make it harder to read data.

Appearance ​

Stacked bar chart has no margin between values inside the column. Choose contrasting colors for different categories.

Chart colors ​

Use color palette and follow the rules prescribed for it.

Interaction ​

When you hover over a column, highlight it with --chart-grid-bar-chart-hover. The hover takes up half of the margin column on the right and left sides.

If the column is clickable, the cursor changes to pointer.

See detailed information in the common Bar chart guide.

Trend ​

In some cases, a stacked bar chart may have a trend line. Most often, trend line overloads charts. However, in some cases, it can be useful for reading the overall trend. It helps to focus on the total value of each dot.

When you hover over any part of the bar, display the tooltip with the values for all categories and the total value.

Edge cases ​

Edge cases for Stacked bar chart are pretty much the same as Bar chart has.

Initial loading ​

See detailed information in the section about data loading in the Bar chart guide.

Usage in UX/UI ​

See detailed information in the Bar chart guide.