A legend that also filters the chart needs some visible sign that clicking it does something
Aliases: interactive legend · legend as filter
What it is
In interactive charts the legend often holds two jobs at once: colour key and series switch — click to hide or isolate a series. The second job is powerful, with one precondition: readers must know the legend is clickable. A static-looking legend reads as a mere key, and with no affordance cue nobody clicks it, so the filtering capability effectively does not exist.
Why it happens
The root is missing affordance: "clickable" in digital interfaces is not an intrinsic property but a learned visual convention (hover feedback, pointer cursor, button styling). A legend's default appearance — swatch plus text — is identical to its static counterpart and carries no interaction cue; the capability lives in the code but not in perception. Affordance must be installed explicitly — hover feedback, state icons, explanatory text — or the function is invisible. An undiscovered function is worse than waste: a reader who clicks by accident sees the chart change abruptly with no idea what happened or how to undo it.
Where it stops holding
Cues must stay restrained: hover highlighting plus a cursor change is the cheapest hint; a first-use tip or a "click to hide" note suits flagship features but permanent copy adds noise. Touchscreens have no hover, so affordance must rest entirely on explicit cues (icons, labels) at higher cost — reassess whether the feature earns its keep there. Legend filtering also changes the chart's data extent: the filtered state must stay visible and reversible, or readers will misread "hidden" as "no data."
Applying it
- Give legend entries hover highlighting and a cursor change; announce clickability with a one-line tip on first display of key charts.
- On touch, replace hover with icons or long-press, and keep legend filtering only where the function is genuinely frequent.
- After filtering, keep a visible state marker and a reset entry point.
- Verification: count the share of users who click the legend unprompted in usability tests; near zero without cues means the affordance is missing — add cues and retest.
Related
- Same group: U5.02.1 Legend-to-chart distance sets the cost of each round-trip · U5.02.2 Legend arrangement direction should match the graphic's spatial order · U5.02.3 Above, right, and below placements carry different matching costs · U5.02.4 Too many legend entries degrade matching into a linear search
- Nearby: U5.04.4 Side-by-side charts need a shared order for cross-chart comparison · U11.02.5 View changes caused by interaction must be announced
- Search terms:
interactive legend·affordance·legend as filter
Cards in the same group
- U5.02.1The farther a legend sits from the chart, the more every lookup costs the reader's eye
- U5.02.2A legend should stack vertically or run horizontally depending on which way the chart's categories unfold
- U5.02.3Putting a legend on the right usually costs less lookup effort than putting it above or below
- U5.02.4Past a dozen entries, matching a color to its legend item turns into a slow linear search