Bar Chart

A chart with horizontal rectangular bars of lengths proportional to the values that they represent. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value.

Status

The status of the component

Ready for use!

Figma component

A link to the Figma library where the component lives.

Repository

A link to the repo where the component lives.

-

 

Bar chart overview

Best Practices


  • It is optimal to choose a bar chart for categorical data as the bars will be oriented the same way as the labels.
  • Include a zero baseline.
  • Use increments that are easy to follow and understand.
  • Do not use multiple colors for bars. Only use the categorical data visualization palette.
  • Do not use effects like shadows or patterns on the bars as this can be distracting and cause the data to be misleading.

Usage Guidelines


Hover

On hover of a single bar, all other bars reduce in opacity. A tooltip follows the hovering mouse.

Bar hover

Drilldown

If drilldown is possible via click, the mouse turns to a finger instead, indicating clickability.

Bar drilldown

Focus

On focus, a focus ring encompasses the bar with a corresponding tooltip.

Bar focus

Null Value

If the data returns a null value, it should be treated as a zero and no bar will be shown.

Bar null value

Target Line

To show how data is trending against a benchmark, a target line can be added which appears above / to the front of all bars.

Bar target line

Responsiveness

The max distance between bars shouldn’t exceed the width of the bars themselves.

Once the distance between bars is about to exceed the width of the bars, the width of the bars should increase up to a max width of 64px.

bar-responsiveness-combined

Multi-Bar

Bar charts with multiple datasets follow many of the same behaviors (ie. Drilldown, focus, null value, responsiveness) as those with a single dataset but they have a slightly different hover behavior whereby hovering on a single bar reduces the opacity of all other bars (across all datasets) and hovering on a series label reduces the opacity of all bars not in that series.

2 Categories

2 Categories

3 Categories

3 Categories

Hover - Series Item

Hover - Series Item

Hover - Bar

Hover - Bar