This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

Isolated Hover

Bar Chart

Bar charts are useful ways to compare values of categorical data against one measure or variable.

Vertical bar charts are, visualizations of a table with multiple columns and one row containing a measure of continuous data.

Horizontal bar charts are, visualizations of a table with multiple rows and one column containing a measure of continuous data (such as revenue).

Vertical bar charts should only be used with short category labels, such as dates or abbreviations with no more than 3 to 5 characters. Use horizontal bar charts if you have longer category labels.

Examine the order of your (horizontal or vertical) bar charts and consider ranking them by magnitude.

Types

Stacked Bar Hover Behavior

Isolated Hover

When you want to zoom in on a single category, an isolated tooltip allows you to feature more data points for a single category. The other categories fade into the background on hover in order to focus attention on the single category.

Unselected Bars (not hovered)
opacity: 30%
Categorical Hover
Default

For optimum comprehension, include Category names and data labels in each tootip.

Unselected Bars (not hovered)
opacity: 30%
High density

There may be instances where the density of data on the graph does not allow space for the full tooltip. In this case, provide only the data amount.

Specifications

Anatomy
1) Bar
color: select from core palette
2) Bar (hover state)
color: see color hover options
3) Bar Data
font-face: Helvetica Now Text
font-weight: 400
font-size: 12px
line-height: 12px
4) Grid Lines
border: 1px solid Gray 05
5) Base Line
border: 1px solid Gray 05
6) Category Labels
font-face: Helvetica Now Text
font-weight: 400
font-size: 12px
line-height: 12px
alignment: center
7) Tooltip
See Global Elements page for style
Size & Spacing
Vertical
Content Recommendation
Best with a maximum of 12 units
Horizontal
Category Overflow Recommendation
Ellipsis should be used when category title is too long for column. Full category title can be accessed in tooltip on hover. Width of categories column will vary from product to product, but 20% of full chart width is recommended.
Content Recommendation
Best with a maximum of 10 categories
Stacked