Stacked horizontal bar chart

Description ​

Bar chart visualizes distribution of values by category for value comparison. A bar chart can be vertical or horizontal.

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

• The axes should be clear to the user from the chart name. However, in cases where the chart name isn’t enough, you can denote the axes.
• Don't use too many colors to represent categories. One color or shades of one color is enough. However, you can always highlight a category if necessary.

Usage ​

See detailed information in the Horizontal bar chart guide.

Margins ​

See detailed information in the Horizontal bar chart guide.

Grid and axes ​

See detailed information in the Horizontal bar chart guide.

Labels of categories ​

See detailed information in the Horizontal bar chart guide.

Appearance ​

The stacked bar chart has no margin between categories inside the bar. Choose contrasting colors for different categories.

Interaction ​

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

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

Edge cases ​

Edge cases for stacked bar chart are pretty much the same as Horizontal bar chart has.

Data loading ​

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