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.
Vertical
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.
Plotting continuous data sets (like time) vertically makes it easier to comprehend.
Plotting continuous data sets vertically increases cognitive load and takes longer to comprehend.
Horizontal
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.
Placing long labels (usually nominal variables) underneath the graph hinders the readability.
Placing labels on the left side and making bars horizontal improves readability.
Bar width and spacing
Vertical bar charts
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.
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.
Baseline
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.
Always start at the value of 0.
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.
Colors
Color can distract the reader by implying additional meaning where none exists. Instead, color should be used with a purpose.
Use one color for all bars.
Don't use multiple colors for bars.
See more details on which exact colors we use for which elements.
Behavior
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.
Displaying corresponding number right away gives more information to a chart viewer without extra actions.
Do not display data directly next to the bar if you are not able to predict its scale.
Hover
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.
For horizontal bar charts display the chart tooltip on the right of the bar.
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: Use 1px height to depict relatively small values.
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.
