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.
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.|
|Nov 12, 2019||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
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).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
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.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.