Bar Chart

Overview

Bar Charts display data to users using bars of different heights.

Other names: Histogram, Column Graph

Behaviors

Legend visibility

The chart's legend displays the data. Selecting the legend items toggles the visibility of the data.

When the legend item is selected, the data is hidden from the chart and the text appears greyed out on the legend. All data should be displayed by default. Users can then decide what they want to hide or show.

Don't hide the legend completely, unless only one type of data is displayed.

For more information, read Kendo legend guide.

Tooltip

Tooltips for bar charts contain any necessary information for understanding the part of a chart being referenced. This can include helpful color blocks or other details like percentages. These tooltips are still intended to be concise.

Variations

Horizontal and vertical

Bars on a bar chart can be displayed horizontally or vertically. The same variation should be used consistently throughout a product to help users become familiar with how data is displayed. Vertical is the more common and recognizable display, but horizontal can be useful for charts with long labels.

Source: NN/g — Choosing Chart Types

Stacked and grouped

Stacked bar charts have bars that are divided into subparts. These subparts represent a portion of the total value. Stacked bar charts can be helpful to simultaneously compare totals while also representing individual data points. Stacked bar charts can also be divided into groups, with two or more bars grouped together into a category.

UX research shows that stacked bar charts can be difficult to understand. If space allows, use a series of bar charts instead of a single stacked bar chart.

Source: NN/g — Choosing Chart Types

Usage guidelines

General

Do use bar charts:

When comparing parts of a bigger set of data, highlighting different categories, or showing change over time.
If you want to illustrate both positive and negative values in the dataset.

Don’t use bar charts:

If you're using multiple data points.
If you have many categories. Avoid overloading your graph. Your graph shouldn't have more than 7 bars.

Severity

If you’re using bar charts to indicate severity, use the labels outlined in severity guidelines and the colors in the styles section.

Status

If you’re using bar charts to display the statuses from a collection of items, the statuses are success, warning, error, and informational. Refer to the colors in the styles section.