157Filters & controls
The interactive layer, working end to end: a range toggle re-scaling the data, legend keys that hide a series without repainting the rest, and a crosshair tooltip tracking the pointer. This demo is live — click things.
The working module
Range segments re-render the columns; the legend keys toggle line series (a hidden series never shifts the survivors' colors — color follows the entity); the line plot carries a crosshair tooltip on hover. In product this wiring is React state; here it is the same markup driven by demo JS.
Track progress
JanFebMarAprMayJun
The rules the module obeys
- Filters sit in ONE row above the chart — never scattered around it
- A range change re-scales the data, not the palette
- A hidden series leaves its slot color unused — survivors never repaint
- The crosshair snaps to real data points — never interpolates a lie
- Tooltips list only visible series, in slot order
- Keyboard: every control is a real button; columns are tabbable and show their tooltip on focus