Responsive Design

Adapt chart elements for responsiveness in any order—there’s no set order to follow. Identify which elements are most essential to interpreting the chart, then reposition, simplify, or replace. For readability, preserve enough space for data marks, patterns, and relationships.

Preserve the legend when it is necessary to identify series, categories, or values.

Apply Direct Labels

Label series directly on the chart when practical to save space. Direct labels reduce the need to look between the plot and legend and saves space for the plot area and other chart elements. When only one series exists, use a title or direct label instead of a legend.

Bar chart comparing percent GDP across four sectors. Energy is highest at 88%, followed by healthcare at 80%, finance at 76%, and technology at 50%.

Placement and Scale

Stacked bar chart in a wide desktop layout with the legend positioned to the right of the plot area. — For desktop layouts, position the legend to the right of the chart. Horizontal bar charts always start with the legend on top.

Stacked bar chart in a narrow mobile layout with the legend positioned above the plot area. — When width is constrained, as in mobile, position the legend at the top of the chart.

Line chart with four long fund names in a top legend that remains smaller than the plot area, shown as a recommended layout. — Do keep the top legend smaller that the plot area.

Line chart with eight long fund names in a top legend that is larger than the plot area, shown as a layout to avoid. — **Don’t** make the top legend taller than the plot area if doing so makes the chart difficult to interpret.

Line chart with four fund names in a right-side legend that is narrower than the plot area, shown as a recommended layout. — Do keep the right legend smaller than the width of plot area.

Line chart with four fund names in a right-side legend that is wider than the plot area, shown as a layout to avoid. — **Don’t** make the right legend wider than necessary to fit the content, especially when doing so makes the chart difficult to interpret.

Collapse When Constrained

Two line-chart states showing a large legend collapsed into a menu icon and revealed as an overlay over the chart when selected. — When the legend no longer fits in the available space, collapse it and reveal it through interaction as a last resort. Keep the legend one tap away within a scrollable menu overlay and ensure the overlay is keyboard- and screen-reader accessible.

Don’t assume an x-axis or y-axis is more important than the other. Preserve the scale, values, categories, and labels most critical to the chart’s intended comparison and user task.

Adjust for Density

Axis ticks and labels must never overlap and shouldn’t change the underlying scale or meaning of the data.

As space allows, aim for five to seven major ticks. When space is constrained, aim for two to four to reduce tick density. Consider shortening labels while preserving enough reference points to interpret the scale or categories.

Price axis with five evenly spaced tick labels from $0 to $4,000, shown as a recommended approach for reducing tick density. — Do reduce the number of visible ticks at equal intervals.

Price axis with too many tick labels, causing values near the upper end to overlap, shown as an approach to avoid. — **Don’t** risk tick overlap or collision in constrained spaces; reduce tick density.

Adapt Long Labels

When labels don’t fit, adjust the content or layout first. Rename or abbreviate labels, or use a chart layout that better accommodates longer labels, such as a horizontal bar chart.

Then, adapt the labels. Wrap or truncate with ellipses to prevent excessive wrapping.

Bar chart with long category labels wrapped to three lines and truncated with ellipses; hovering reveals the full label in a tooltip. — For web experiences, cap the total number of wrapped lines to three, truncate with ellipses, and reveal the full name with a tool tip.

Bar chart using short, fully visible category labels—Technology, Finance, Healthcare, and Energy—shown as a recommended approach. — Do use shorter labels in a chart.

Bar chart with lengthy, multi-line category labels that consume excessive vertical space, shown as an approach to avoid. — **Don’t** use long labels in a chart where space is limited.

Prevent Clipping

Keep the hover flag within the chart container and reposition it near an edge rather than clipping its content.

Limit Content When Constrained

When there is not enough space to display multiple series clearly, show only the selected series. Do not preserve additional content at the expense of legibility or clipping.