Bar chart

A bar chart displays quantitative values for different categories. The chart comprises of bars with the length or height of the quantitative value for each category. Bars are plotted on a common baseline to easily compare values.

Usage guidelines

Use bar charts to compare discrete data or show trends over time. Bar charts allow you to see which categories are the highest or lowest and how categories compare against each other. The primary variable is always a discrete category or date. The secondary variable is always a numeric value because it determines the length or height of each bar.

Use bar charts to show change over time, like ‘Number of cats seen over a week’.
Use bar charts to compare discrete categories of data, like ‘Cats in different cities’.
Don't use bar charts to show distribution. Instead, use histograms.

Vertical or horizontal?

Which direction should you use for your bar chart? That depends on your primary variable.


Use the vertical bar chart to display distinct or ordinal data. Ordinal data is data that has a set scale or order to it. An example would be time, such as ‘Dogs petted over time’ (days, month, years). Vertical bar charts allows you to easily compare large data sets. However, if the number of data points exceeds 100 — consider using a line chart.

Vertical do

Plotting continuous data sets (like time) vertically makes it easier to comprehend.

Vertical don't

Plotting continuous data sets vertically increases cognitive load and takes longer to comprehend.


Use horizontal bar charts to display discrete data of nominal variables. Nominal variables — types of payment methods, shopper channels — can be arranged in any order. Typically nominal variables have long category labels, thus displaying them horizontally makes it easier to read them. Horizontal bar charts tend to work better in narrow layouts, such as mobile views. If the number of categories exceeds 10 — consider using a table or a brushable bar chart.

Horizontal do

Placing long labels (usually nominal variables) underneath the graph hinders the readability.

Horizontal don't

Placing labels on the left side and making bars horizontal improves readability.

Bar width and spacing

Vertical bar charts

Vertical spacing

The width and the spacing between bars do not convey any data. The bars should be twice the size of the space between them — this will facilitate easier scanning.

1x — space between bars.

2x — bar width, 2x the space between bars.

Horizontal spacing

The spacing between horizontal bars is not as strict as vertical bars because there is unlimited vertical space on a page. The height of the horizontal bars should be the same height as the fonts container. It is important is to leave enough space between lines to ease the vertical scanning.


Always start the bar chart at 0. Otherwise relative comparison becomes really difficult and our eye compares the bars length relative to each other. By starting at the value of zero you maintain the thruthfulness of your message.

Baseline do

Always start at the value of 0.

Baseline don't

The example above gives a false impression of a cats living five times longer than dogs.

When the necessary baseline on a bar chart interferes with perception of changes or differences between bars, then a line chart or dot plot can be a good alternative choice.


Color can distract the reader by implying additional meaning where none exists. Instead, color should be used with a purpose.

Baseline do

Use one color for all bars.

Baseline don't

Don't use multiple colors for bars.

See more details on which exact colors we use for which elements.


Here are some examples of behaviours that are unique to bar charts. For other behaviours like loading, error and empty states check behaviour guidelines.

Value display

By default we do not show the value directly next to the bar because it’s more scalable to any types of data. However ofr the use cases when the data labels are predictably short it is a possibility to display it directly next to the bar, so chart viewer can see the value right away.

Value display do

Displaying corresponding number right away gives more information to a chart viewer without extra actions.

Value display don't

Do not display data directly next to the bar if you are not able to predict its scale.


Hovering over a bar or the corresponding axis label causes all other bars to fade back from the view. It is important to make sure that the corresponding value is visible on hover. For both — vertical bar charts and horizontal bar charts — use a chart tooltip for more information. Read more on anatomy of a tooltip.

Hover horizontal

For horizontal bar charts display the chart tooltip on the right of the bar.

Hover vertical

For vertical bar charts display the chart tooltip on the top of the bar.

Missing/low data points

When there is no data available display it as zero and add ‘no data’ in the chart tooltip Be mindful of a very small values. Show minimum 1px for the values that are extremely small.

Very low value

Very low value: Use 1px height to depict relatively small values.

No data available

No data available: Use 0px height and add ‘no data’ in the tooltip for more context .

Chart variations

Not what you’re looking for? Here are some bar chart variations:

  • Grouped bar chart: use it when two or more data sets are displayed side-by-side and grouped together under categories on the same axis.
  • Stacked bar chart: use it to display a part-to-whole breakdown of quantitatove values for different categories. The whole could represent 100% or an absolute value.

grouped bar chart

stacked bar chart