Chart (bar vertical)

Bar charts display data in a visual and digestible way. They are most commonly used to plot comparable data over time or to show changes in data.

Using colour combinations

The accent colour palette can be applied to data sets to make them clear and distinct. Further information about the accent colour palette.

 

Tooltip

A tooltip can be used with charts to give the user context and provide additional information they wouldn’t otherwise see.

 

Initialization

 

Minimum spacing

To ensure vertical data charts are clear and easy to read, a minimum spacing of 70px (should be applied between bars.

Minimum spacing

 

Data bars

To help users accurately interpret data, data bars should always use a flat end point. Bars start with a rounded edge, but this must sit below the chart’s axis.

data bars