A histogram shows distributions or the frequency at which specific metric values occur. It’s a useful way to show a more granular version of an average.
A standard histogram is similar to a bar chart. However, one axis uses an ordinal scale — one with implicit order — that is created by binning a ratio or interval scale (e.g., 0-99, 100-199, 200-299, and so on). The other axis uses a metric.
A histogram can be overlaid with the mean, median, and mode to help users better understand the data.
Hovering on a bar or the corresponding axis label causes all other bars to fade back from the view. A tooltip displays the name of the bar (the range) as well as the value.
Bars can be interactive. When they are, leverage the selected state and surface relevant actions in a panel, rail, or floating menu.
A histogram can be navigated with a keyboard. A blue border is applied to the bar in focus and a tooltip displays relevant information.
When there are more values than can fit on an axis, don’t exclude them. Instead, add a label that includes the range's extreme values. (e.g., “2400+” implies that the range is “2400 and above”).
Charts often require time to load, so include a loading state.
When data returns null (blank) values, treat these as zeros. Place these value on a separate x-axis labeled as “Null.”
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 place binned metrics on the x-axis. Only swap these axes when it helps to make the chart easier to understand.
Only use one color in a histogram. Spectrum’s default single-metric color is seafoam. View the Color for data visualization page for more information.
Unlike a bar chart, histogram bars should touch to indicate that values are on a continuous scale. This requires a subtle border to keep the bars from colliding (combining).
Intervals with values equal to zero should remain as part of the chart. This maintains the integrity of the continuous scale and helps users better understand the data.
The size of bins can often have a dramatic effect on how the data looks. Start with a reasonable, parsable default and give users the ability to customize the bin size.
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 bar chart when representing the distribution of your data.
|Right Arrow||Moves focus forward to the next bar. If focus is already on the last bar or there are no bars, the focus does not move.|
|Left Arrow||Moves focus to the previous bar. If focus is already on the first bar or there are no bars, the focus does not move.|
|Home||Moves focus to the first bar of the chart.|
|End||Moves focus to the last bar of the chart.|
|Space or Enter||Triggers the selection state of a bar.|
|Mar 04, 2020||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.