Skip to content

Stacked horizontal bar chart

TIP

Basic data visualization rules are described in the Chart principles.

Description

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

TIP

Difference from histogram chart

Bar chart displays distribution of datasets by quality categories.

Histogram charts are used to display distribution of datasets: how often values fall into quantitative ranges.

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.

bar-chart stacked

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.

stacked bar chart

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.

Released under the MIT License.

Released under the MIT License.