Spectrum
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.
Table of contents#
Anatomy#
Options#
Bar chart#
A standard bar chart provides a simple, clear view for comparing dimension values by mapping length to a metric.
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.
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.
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.
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.
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#
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.
Selection#
Bars can be interactive. When they are, leverage the selected state and surface relevant actions in a panel, rail, or floating menu.
Focus#
A bar chart can be navigated using a keyboard. A blue border is applied to the bar in focus.
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.
Loading#
Charts often require time to load, so include a loading state.
Null values#
When data returns null (blank) values, a chart should treat these as zeros.
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.
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.
Put categories on the y-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.
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.
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.
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.
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.
Don't use a histogram when comparing categories using a metric.
Keyboard interactions#
| Key | Interaction |
|---|---|
| Right Arrow | Moves 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 Arrow | Moves 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 Arrow | Moves 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 Arrow | Moves focus to the bar or bar segment below. If focus is already on the bottom bar or bar segment, the focus does not move. |
| Home | Moves focus to the first bar segment in the focused bar. |
| End | Moves focus to the last bar segment in the focused bar. |
| Control/Command + Home | Moves focus to the first bar segment of the first bar. |
| Control/Command + End | Moves focus to the last bar segment of the last bar. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 06, 2022 | 2.0.0 |
|
| Apr 28, 2020 | 1.0.1 |
|
| Nov 13, 2019 | 1.0.0 |
|
Design checklist#
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
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).
Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
Accessible contrast for text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Content design
UI language and information design considerations have been incorporated into component design.
Defined options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Defined behaviors
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
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.
Design tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI kit
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
Generated UI kit
Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.
In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.
Area chart