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.
A standard bar chart provides a simple, clear view for comparing dimension values by mapping length to a metric.
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 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.
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.
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.
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.
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.
Bars can be interactive. When they are, leverage the selected state and surface relevant actions in a panel, rail, or floating menu.
A bar chart can be navigated using a keyboard. A blue border is applied to the bar in focus.
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.
Charts often require time to load, so include a loading state.
When data returns null (blank) values, a chart should treat these as zeros.
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.
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.
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.
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.
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.
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.
Whenever possible, provide controls that let users filter and sort large datasets. This allows them to refine the view to better fit their needs.
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.
|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.|
|Apr 06, 2022||2.0.0|
|Apr 28, 2020||1.0.1|
|Nov 13, 2019||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
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).
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).
UI language and information design considerations have been incorporated into component design.
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
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.
Component is included in the Spectrum for Adobe XD plugin.