Legends that toggle series, linked selection, cursors, brushes, zoom and scrubbers: when each one helps the reader, and how to build it so every reader can use it. The Interaction guideline has the short rules that apply to every chart.
What it is for
Interaction lets the reader change what the chart shows: hide a series, pick a range, zoom into detail, or select a point and see it elsewhere on the page. It fits dashboards and analysis tools, where readers arrive with their own questions. A chart in a report that makes one point rarely needs it.
When to use
Several series overlap and the reader wants to compare two of them. Let the legend hide and show series.
A long time series where the overview and the detail both matter. Add zoom, or a small overview chart whose brush sets the range of a large one.
The reader picks a period to summarize. Add a range brush and show the summary next to the chart.
A chart and a table list the same items. Link the selection, so picking an item in one highlights it in the other.
Several charts share an x axis. Synchronize their cursors, so one date is marked in all of them.
Values change over time and the reader steps through them. Add a scrubber with Play and Pause.
The reader edits a value on the chart, such as an event's end date. Add a draggable handle, next to a form field for the same value.
Use something else when
The chart has one message. A gesture hides it. Make a static chart.
The reader needs exact values. A table they can sort and filter beats a chart they have to zoom.
The control filters more than one chart, like a date range for a whole dashboard. Put it on the page and redraw every chart from it.
The chart is small and sits in a page that scrolls on a phone. Dragging fights scrolling. Use buttons or a select instead.
Do it well
Keep the state outside the chart, as values: the visible series, a date range, a selected id. Draw the chart from that state, so other controls, other views and the URL can share it.
Say the current state in text near the chart: the selected months, the zoomed dates, which series are hidden. The reader should not have to read it off the chart.
Give every gesture a way back, such as Reset zoom or Clear selection. Disable it when there is nothing to undo.
Fix the value axis when series can be hidden. Otherwise the remaining lines jump and look as if their values changed.
Snap brushes and handles to real data values, like months or trading days, so a range never ends between two points.
Preview while the reader drags, and run expensive work, like a fetch, only when they let go.
Bound zoom and pan: limit how far the reader can zoom in, and stop panning at the ends of the data.
Pair each gesture with a control that works from the keyboard: sliders beside a free cursor, Play and Pause beside a scrubber.
Pitfalls
Capturing the scroll wheel, so the page stops scrolling when the pointer crosses a chart. Zoom on the wheel only after the chart has focus, or while a modifier key is held. See Zoom and brush.
Hidden series that disappear from the legend. Keep them there, dimmed, so the reader can bring them back.
Highlighting on hover only. The reader cannot keep a point marked while they read the table below it. Let a click select it.
Linked views that match by pixel position. Match by value, a date or an id, so charts of different sizes stay in step.
Two gestures on one surface, such as a brush and point tooltips that both answer a drag. Turn off point focus where the brush owns the chart.
Live data that moves the view while the reader is looking at it. Let them lock the window, and show which mode is on.
A wide timeline squeezed to fit its container. Let it scroll sideways, with the row names fixed beside it.
Patterns
Toggle series: legend buttons that hide and show each series.
Linked table: one selection shared by the chart and a table.
Axis pointer: a guide line snapped to the nearest x, with one tooltip for every series there.
Synchronized cursors: one cursor across stacked charts that share an axis.
Free cursor: a crosshair at any position, not only on data, that sliders can move too.
Range brush: drag over a range and summarize it below the chart.
Zoom and pan: wheel and drag on a time axis, with a reset.
Focus and context: a small overview chart sets the window of a large one.
Playback scrubber: a playhead on a track, with Play and Pause.
Streaming window: new data arrives while the window stays put, follows the latest values, or widens to show all of them.
Scrollable lanes: a wide timeline in a scrolling box, with lane names fixed beside it.
Editable event: drag a handle to change a date in the data.