Version 1.0.0

Bar chart

Bar charts are ideal for comparing different values that are hierarchically equivalent. Each bar is mapped to a dimension value with a length determined by a metric.

Bar chart with browsers Chrome, Firefox, Safari, and Edge along the y-axis, and visitors along the x-axis.Bar chart with browsers Chrome, Firefox, Safari, and Edge along the y-axis, and visitors along the x-axis.

Anatomy#


Image illustrating through labels the component parts of a bar chart, including the axis label, axis title, bars, and grid lines. Bar charts have horizontal bars (categories on the y-axis), and column charts have vertical bars (categories on the x-axis).Image illustrating through labels the component parts of a bar chart, including the axis label, axis title, bars, and grid lines. Bar charts have horizontal bars (categories on the y-axis), and column charts have vertical bars (categories on the x-axis).

Options#


Key example of a bar chart with browsers on the y-axis and page views on the x-axis.

Bar chart#

A standard bar chart provides a simple, clear view for comparing dimension values by mapping length to a metric.

Key example of a column chart, with browsers on the x-axis, and visitors on the y-axis.

Column chart#

A bar chart becomes a column chart when the x-axis and the y-axis are swapped. Column charts can be dodged, stacked, or faceted.

Key example of a stacked bar chart with browsers on the y-axis, page views on the x-axis, and color coded categories. The color-coded categories are stacked on top of one another.

Stacked#

Stacked bar charts use color to show an additional dimension. To do this, each bar is split into a set of dimension items, distinguished by color, while maintaining the total bar height. Review Color for data visualization for more about choosing colors for stacked bar charts.

Key example of a dodged bar chart with browsers on the y-axis, page views on the x-axis, and color coded categories. The color-coded categories are next to each other, each individually touching the y-axis.

Dodged#

Similar to a stacked bar chart, a dodged bar chart also uses color to encode an additional dimension. It’s best to use a dodged bar chart when the comparison of this additional dimension is more important than comparing the totals of each dimension. Review Color for data visualization for more about choosing colors for dodged bar charts.

Key example of a small multiple bar chart with browsers on the y-axis, and page views on the x-axis, and operating systems each plotted on their own y-axis.

Small multiple#

Another way to incorporate an additional layer of information is to create a repeating grid with a small multiple (also known as faceted or trellis) bar chart. Each row or column represents a dimension item.

This kind of bar chart is most useful when there are many dimensions, or when the chart is already stacked or dodged. Be careful not to put too much information into a single chart, since it becomes more difficult for users to read and understand. Columns in this kind of bar chart can use color, but this isn’t required.

Key example of a diverging bar chart with browsers on the y-axis, and sentiment on the x-axis.

Diverging#

Use a diverging bar chart when data includes both positive and negative values. Absolute length becomes more difficult to see in this configuration, so it’s best to keep item lengths equal by showing the percent of whole. Diverging bar charts can be dodged, stacked, or faceted.

Behaviors#


Key example of a bar chart with one bar receiving hover. Columns not hovered on fade back, and a tooltip appears on the bar next to the cursor displaying the detailed information.

Hover#

Hovering over a bar or the corresponding axis label causes all other bars to fade back from the view. A tooltip displays the dimension value and the corresponding metric value.

Key example of a bar that has been selected. Unselected bars turn gray and any available actions appear in floating action bar at the bottom of the screen, or in a panel or rail.

Selection#

Bars can be interactive. When they are, leverage the selected state and surface relevant actions in a panel, rail, or floating menu.

Key example of a bar chart with one column receiving focus. Selected bar has a focus state plus a blue tooltip above the focused bar displaying the detailed information.

Keyboard focus#

A bar chart can be navigated using a keyboard. A blue border is applied to the bar in focus.

Key example of a bar chart with more items in a categorical axis than can be shown, so they've been combined into an "All others" category. Hovering on "All others" exposes a tooltip with the option to expand the items.

Overflow#

When there are more items in a categorical axis than can be shown, don’t exclude them. Instead, add a label that covers the sum, count, or average of all remaining items. Interacting with that label has the behavior of a link, and will expand the chart or take a user to a dedicated view.

Key example of a bar chart ghost loading.

Loading#

Charts often require time to load, so include a loading state.

Key example of a chart that has returned blank values so the bar has been treated as a zero value, and the axis label includes the word null.

Null values#

When data returns null (blank) values, a chart should treat these as zeros.

Key example of an empty chart, so all that shows is a chart icon with the text "No data available.", and an action to link a dataset.

Empty state#

When there is no data available, a chart should indicate as such and give direction as to how to make data appear there. Do not render an empty chart.

Key example of what happens when there has been an error when fetching data. An error icon appears in place of the chart with the text "Unable to load chart.", and the option to retry.

Error state#

There are occasionally errors with fetching data. When this happens, give users a helpful, actionable explanation of what happened and what they can do to fix things. Do not render an empty chart.

Usage guidelines#


Put categories on the y-axis#

It’s usually best to run bars left-to-right, with the category on the y-axis. This keeps categorical labels — which are critical to understanding the chart — oriented in the same way as running text.

Key example of a chart that correctly places categories on the y-axis.

Put categories on the y-axis.

Key example of a chart that incorrectly places categories on the x-axis.

Don't put categories on the x-axis.

Be careful when adding color to standard bar charts#

Color is not a default on bar charts, but there are instances where it is useful. Examples of this include when color is used elsewhere on the page, or when the dimension is ordinal.

Key example of a bar chart correctly using a single color for each category.
Key example of a bar chart incorrectly using a different color for each category.

Which color palette?#

When representing categorical data without a natural sequence, use Spectrum’s categorical colors. When representing categorical data with a natural sequence (ordinal, interval, or ratio), use Spectrum’s sequential or diverging colors. More information about this is on the Color for data visualization and Legend pages.

Key example of a stacked bar chart correctly using categorical colors for categorical data.

Sort categories by metric#

Proper sorting, which is almost always based on a metric, is important for effectively conveying the information in a bar chart. Provide the viewer with sorting controls whenever possible.

Key example of a bar chart that is sorted by metric.
Key example of a bar chart that is incorrectly sorted alphabetically.

Provide filtering and sorting controls#

Whenever possible, provide controls that let users filter and sort large datasets. This allows them to refine the view to better fit their needs.

Key example of a bar chart with filters provided to refine a large dataset.

Understand the difference between bar charts and histograms#

Bar charts and histograms have a lot in common visually, but they’re fundamentally different. Histograms help viewers see distributions, while bar charts help viewers compare dimension values.

Key example of a histogram incorrectly comparing categories using a metric.

Don't use a histogram when comparing categories using a metric.

Keyboard interactions#


KEYINTERACTION
Right ArrowMoves focus to the bar segment on the right. If focus is already on the right-most bar segment or there are no bar segments, the focus does not move.
Left ArrowMoves focus to the bar segment on the left. If focus is already on the left-most bar segment or there are no bar segments, the focus does not move.
Up ArrowMoves focus to the bar or bar segment above. If focus is already on the top bar or bar segment, the focus does not move.
Down ArrowMoves focus to the bar or bar segment below. If focus is already on the bottom bar or bar segment, the focus does not move.
HomeMoves focus to the first bar segment in the focused bar.
EndMoves focus to the last bar segment in the focused bar.
Control/Command + HomeMoves focus to the first bar segment of the first bar.
Control/Command + EndMoves focus to the last bar segment of the last bar.

Changelog#


DateNumberNotes
Nov 12, 20191.0.0
  • This component has been added to the website

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.