Interaction

Touch screens have no hover, keyboard users reach a tooltip only if the chart supports it, and a screenshot or printout loses it. Put the takeaway in the title, the key values in labels or a table, and use the tooltip for the exact figure, the date and related series.

Show the series name with its color, the value with its unit, and the x value as a heading. For several series at one x, list them in the order they are drawn.

• A label at the end of each line, or inside a large enough area, saves the reader a trip between the legend and the data.
• When you need a legend, list the series in the order they appear in the chart: top to bottom for stacked bars and for line ends.
• A legend that toggles series is a set of buttons. Each item takes focus, works with Enter and Space, and reports whether its series is shown (aria-pressed). Keep hidden items visible in the legend, dimmed, so the reader can bring them back.

When the reader hovers or focuses a series, lower the opacity of the others rather than adding a new color. The highlighted series keeps the color it already has, so the reader does not have to relearn it. Apply the same highlight on keyboard focus.

• Start with the whole range visible, and let the reader zoom in from there.
• Show the current range in text near the chart, and give a visible Reset button.
• A brush or zoom drawn with the pointer needs a keyboard path: a pair of range inputs, or keys on the focused chart. See Keyboard.
• Do not capture the scroll wheel on a page that scrolls. Zoom on a modifier key, or only after the chart has focus.

• Show selection with an outline or a stronger color on the mark, and repeat it in text: "3 regions selected".
• When a click opens a more detailed view, show where the reader is (a breadcrumb or a title that names the level) and a way back.
• Give every action a pointer can take a control the keyboard can reach too, and a Clear button for selections.

• Loading: show a skeleton in the shape of the chart (bars, a line, a ring) at the chart's final size, so the page does not jump when the data arrives.
• Empty: replace the plot area with a short message and, when there is one, the action that fixes it: "No orders in this period. Try a wider date range." Never show empty axes, which read as a chart of zeros.
• Error: say what failed and offer a retry. Keep the title, so the reader knows which chart is missing.

• Show fewer ticks, and shorten tick labels (Jan for January).
• Move the legend below the chart, or switch to direct labels.
• Turn vertical bars with long labels into horizontal bars, and consider fewer categories or small multiples stacked vertically.
• Keep tap targets large. A tooltip that follows a finger hides the mark under it, so anchor it above the plot area or pin it on tap.

• Keep transitions short, a few hundred milliseconds.
• Never loop, and never animate a chart the reader is not changing.
• Respect the reader's reduced motion setting: under prefers-reduced-motion, draw the final state at once.
• Never make motion the only evidence that something changed.