Ship the hover layer

Every chart gets a snapping crosshair, tooltips, and 24px hit targets.

From dataviz (references/interaction.md).

Aim at a date, not a line

Sweep the pointer across both charts.

Organic
Paid
Referral

Hit the lineBad

0% of 0pointer-events: stroke

Snaps to nearest XGood

0% of 0tabindex="0"

svg.addEventListener("pointermove", (e) => showAt(Math.round((e.offsetX - left) / step)));
svg.addEventListener("keydown", (e) => e.key === "ArrowRight" && showAt(i + 1));

An 8px dot is a pinpoint

Click the ringed dot in each hit test.

Show hit areas

Painted pixels onlyBad

–

Hit test	Hits	Misses	Rate
Painted 8px	0	0	–
24px area	0	0	–
Nearest point	0	0	–

const hit = nearest(points, pointer, 40); // -1 past the cap

The whole column is the target

Hover the tiny March, August and November bars.

June label

Painted bar onlyBad

pointer-events: visiblePainted

Full column + focusGood

–

<g class="col" tabindex="0"><rect class="hit" height="{plotHeight}" /><path class="bar" /></g>
name.textContent = label;

Why it matters

Readers aim at a date or a bar, never at the ink. Big targets and focus make every value reachable.

Pros

Every series at one X, one readout
Tiny bars and dense dots become reachable
Keyboard and touch get what hover gets

Cons

Tooltips never gate; a table still carries values
Nearest-point needs a distance cap
Past 20 marks, use one roving tab stop