U5.02.5Interactive legends double as filters, but clickability must be signalleddesign

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

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U5.02.5