Legend Series Toggle

Click a legend key and its series leaves the chart while the axis rescales to what is left.

click a legend key

Build a two-series line chart whose legend keys toggle their series. Structure: a legend row of toggle buttons above one SVG holding a baseline and one path per series. One y axis. Never two. The rule that makes it worth building: THE AXIS RESCALES. Recompute the maximum from the VISIBLE series only, every render. Holding the old maximum wastes the height and flattens the shape of whatever is still on screen, which is the exact thing the person was trying to look at more closely. Each legend swatch must DRAW THE ACTUAL LINE: same stroke, same dash pattern. Colour-only swatches fail completely for anyone who cannot separate the two hues, and the dash is what identifies the series on the chart itself. Hidden is a STATE, not a deletion. The key stays in place, muted and struck through. Remove it and there is no way back and no clue the series ever existed. Fade the series over 300ms while the remaining line rescales underneath. Removing it instantly makes the rescale look like the data itself changed. Accessibility: the keys are buttons with aria-pressed reflecting whether the series is shown, and the svg's aria-label lists only the series currently drawn, including the empty case. Under prefers-reduced-motion, use zero duration. The rescale still happens, because it is the answer rather than the animation. Colors as tokens: accent for the first series, primary ink for the second, hairline for the baseline and for muted swatches. Distinguish the two series by DASH as well as colour. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data