Bar graphs

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.


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'.

Use to compare total values between categories.

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

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.

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.

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.

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.

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.


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


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

  • 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
  • Create extra-long labels that have to wrap or truncate
  • Use abbreviations that are only understood internally or that don't translate well.