Skip to content

Stacked bar chart


Basic data visualization rules are described in the Chart principles.


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.


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


It is recommended to make a minimum 20% margin between a bars. This is necessary so that the data doesn't turn into a mess.

stacked bar chart

Chart colors

Use color palette and follow the rules prescribed for it.


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.

stacked bar chart

See detailed information in the common Bar chart guide.


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.

stacked bar chart

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.

Released under the MIT License.

Released under the MIT License.