The histogram allows single or multi selection when clicking or tapping on individual items. When selected, the entire item, including the bar and text, turns blue.

Histograms can be viewed in the collapsed, expanded, and preview view modes for data cards.

When displayed in the collapsed view mode, the histogram omits labels and percentages and acts as a mini-preview.

• Mobile: When tapping the mini-histogram, the view mode should switch to preview in order to make selection easier for the user. The selected item within the histogram should be selected and displayed before switching to preview mode.
• Web: When hovering or focusing on a histogram item, tooltips are displayed which include the label value of that item. On click, the histogram item should be selected.

When displayed in the expanded view mode, the histogram list always displays all items included in the list.

In the preview view mode, the full histogram is always displayed.

Histograms are part of the module system, and should only be used within data cards. Histograms should be used to filter content using multiple data set options.

Don'tuse histograms outside of data cards.

Douse histograms within the module system.

Label values are required when using histograms. However, in dense data sets, overlapping text becomes a larger risk. We recommend limiting character length, sometimes omitting or combining labels based on the density of the histogram used.

• For 2-4 items, limit labels to 10 characters each.
• For 5-9 items, limit labels to four characters each.
• For 10 or more items, limit labels to three characters each.
• For more than 12 items, omit at least every other label.
• For more than 15 items, omit at least every other label, and always show the most positive, most negative, and zero value labels.

• For 2-4 items, limit labels to seven characters each.
• For 5-9 items, limit labels to four characters each.
• For 10 or more items, limit labels to three characters each.
• For more than 12 items, omit at least every other label.
• For more than 15 items, omit at least every other label, and always show the most positive, most negative, and zero value labels.

Don'tuse verbose labels in histogram items.

Douse concise, logical labels in histogram items.

Don'tsacrifice readability to include labels.

Do intentionally hide or combine labels.

Sometimes the item label alone isn’t enough to aptly convey its meaning. For example, a histogram for “Ball Carriers” might have labels that include the players’ numbers, but omit the name to save space. By adding players’ full names as descriptions, we can provide that extra information via ARIA attributes for screen readers and tooltips.

Don'tuse tooltips to provide unnecessary information or directions.

Douse tooltips to display a concise description when labels could be misunderstood.

Don'tomit histogram item context in collapsed view mode.

Doinclude relevant item information, like clip count in parenthesis after the label, in a tooltip.

Tab navigation is fully supported by default in histograms. Users can press enter to toggle the selection of an item. Sequential tab order will be maintained for individual items in both the mini-histogram and larger histograms.

When the histogram is collapsed into it’s mini-state, all label and clip count information is removed. Use a tooltip to include all of the relevant item information. When selected, include the clip count after any additional information.

Don'tomit histogram item context in collapsed view mode.

Doinclude any relevant item information to the histogram item in a tooltip.

Don'tremove important information.

Doinclude clip count in a tooltip to keep it accessible to the user.

See our full accessibility audit for more information about these results.

Data Card

Card Group

Data Visualizations

Module System

Accessibility

The histogram is available for React and React Native.