Bar graphs
Comparison

Bar graphs plot numeric values for categorical data as bars on an x/y axis. The numeric amounts are shown on a common baseline in order to easily compare values across categories. If you need to plot and/or compare data across a time range, use a Line graph instead.

An example of a bar chart.

Components

For components, go to:

Usage guidelines

When to use
  • When comparing categorical data sets based on total amount and size
  • When a side-by-side visual representation is needed to compare sizes
When not to use
  • When viewing or comparing data and/or trends that change in value over time. Use a line graph instead.
  • When it’s more important to see how different amounts of categorical data form a whole. Use a pie or donut chart instead.

Best practices

These are best practices specific to bar graphs. For global best practices, see ChartGraph best practices and General guidelines.

A bar graph comparing Spend and impressions by Gender. The categories are 'man', 'woman' and 'unspecified'.
Do

Use to compare total values between categories.

A bar graph used to show total spend for the summer of 2023.
Don't

Use to show the progress of values over time. Use a line graph instead.

A bar graph comparing CPM and total spend for 3 types of bike ads. Both y-axis start at 0.
Do

Use to compare sizes from a common zero baseline to maintain accuracy.

A bar graph comparing CPM and total spend for 3 types of bike ads. The CPM axis starts at $0, but the Total spend axis starts at $10k.
Don't

Start from a non-zero baseline, as that can distort the ratios between the amounts being compared.

A bar graph comparing iOS, Android, Mac and Windows usage by age. Each device-type has a color.
Do

Use additional colors only when comparing categorical data that sits inside of a larger dimension also being compared. Keep it to 4 colors maximum, otherwise charts will get hard to read.

A bar graph comparing impressions by age with each age group having a different color.
Don't

Use multiple colors to compare only one large category with no sub-categories. Use a single color in those cases as the main focus is comparing amounts.

Variants

See the ChartGraph component for use cases and examples of all the different types of bar graphs available:

Writing

For general writing and content formatting guidelines, refer to our Content standards.

Do
  • Keep labels short so that they don’t wrap and make it hard to read data
  • Use abbreviations that are commonly understood and can be translated to all supported languages
Don't
  • Create extra-long labels that have to wrap or truncate
  • Use abbreviations that are only understood internally or that don't translate well.
Edit page on GitHub