Chart Crosshair

Build a line chart with a crosshair that reads out values. Structure: one inline SVG with a baseline, a polyline path, a dashed vertical crosshair and a marker dot, plus a FIXED readout row underneath. The rule that makes it trustworthy: SNAP TO THE NEAREST REAL SAMPLE. On pointer move, convert clientX to chart coordinates and pick the point with the smallest distance. Never interpolate between two points: a readout that does reports a number the data never contained, which is worse than showing no readout at all. Put the value in ONE FIXED PLACE under the chart, not in a bubble that follows the pointer. A tooltip that chases the cursor makes the eye travel, and the number is the thing being read. Ring the marker dot with a 2px stroke in your SURFACE colour. That separates it from the line it sits on without introducing a second colour into the chart. Keep the transitions at about 120ms. This tracks a pointer, and anything slower lags behind the finger pointing at it. On mouse leave, rest on the LATEST point rather than clearing. An empty readout is a hole in the layout, and the most recent value is the sensible default. One y axis only. Never two. Accessibility: role="img" on the svg with an aria-label listing every label and value, and aria-live="polite" on the readout number. Hover data is completely invisible to a screen reader otherwise. Under prefers-reduced-motion, drop the transitions and let the crosshair jump. The snapping is the behaviour; the easing was only decoration. Colors as tokens: accent for the line and marker, hairline for the baseline and crosshair, surface for the marker ring and the readout card. Use tabular numerals so the readout does not jitter as digits change. 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.