Add xy.tooltip(mode="x"): a shared-axis tooltip with cursor and active dots

AL
5d ago
+2317-46

Adds xy.tooltip(mode="x") (and mode="y"): a shared-axis tooltip in the model Recharts uses by default and Plotly calls hovermode="x unified".

Behavior

  • The pointer only has to be inside the plot. Its coordinate along the band axis picks the data; the perpendicular coordinate is ignored, so the whole plot height (width) is the hit target.
  • Every eligible series snaps to its point nearest along the band axis; the closest to the pointer sets the band, and every series whose snapped point projects to the same coordinate joins it. Index-aligned series therefore read as one band whose boundaries fall halfway between adjacent points. A series with no point at that coordinate is omitted, not guessed.
  • The tooltip shows the band coordinate as its title, then one row per series with the series name painted in the series colour and its value along the other axis. title=, fields=, and format= keep their meaning.
  • The tooltip follows the pointer (the one exception to data-space anchoring, because a band has several points); a new tooltip_cursor DOM slot draws the cursor line at the snapped coordinate, reprojected on every draw; each series gets an active dot drawn from its CPU columns in the series colour.
  • xy:hover fires once per band change with points[] holding one entry per series; one exact kernel pick goes out per series and each reply replaces its row.
  • Density tiers, bars, rectangles, ribbons, funnels, heatmaps and segments keep their own hover geometry; legend-hidden series are excluded; polar falls back to nearest; keyboard traversal and static exports are unchanged. The default mode="nearest" is byte-identical to before on the wire.

Fixed on the way

Adding the active dots exposed that the existing nearest-mode hover highlight dot had stopped rendering entirely: the full point program multiplies fill alpha by the per-item a_style.x factor, the regular scatter draw moved to the simpler point program that never sets that constant attribute, and _drawHoverPoint inherited its default of 0. It now sets every constant attribute and stroke uniform the program reads. Verified in real Chrome by counting highlight-coloured pixels on the presented canvas (0 → 520 around the hovered point) and pinned by test_browser_nearest_hover_highlight_is_visible.

Verified

Browser probes drive the real client: pointer far above Page B, horizontally aligned → Page B, pv 1398, uv 3000, two active targets, cursor at Page B's x spanning the plot height; moving inside the band re-places the tooltip and sends no new picks; two pixels past the midpoint → Page C; two pixels before → Page B; outside the plot → nothing; legend-hiding uv → one row; xy:hover carries two points. A mode="y" probe on a horizontal layout, a regression probe that the default still requires the pointer near a point and never creates the cursor element, and byte-identical SVG/PNG with and without the option.

Spec / docs

spec/api/interaction.md §7.3 (new) and the §3 event row; tooltip_cursor in spec/api/styling.md, docs/styling/chrome-slots.md, and the regenerated capability matrix (48 → 49 slots, counts updated in export.md, chrome-slots.md, the dossier); docs/components/tooltips.md gains a "Shared Tooltip Along an Axis" section with a live demo.

Live capture

Pointer (red ring) far above Page B; the band tooltip, the cursor line at Page B, and both active dots in their series colours.

shared-axis tooltip

Full suite 4194 passed locally (the one failure is the pre-existing pandas time-series locator case on main, fixed separately in #508).

Summary by CodeRabbit

  • New Features

    • Added shared-axis tooltips with mode="x" or mode="y", showing aligned points across series.
    • Added cursor lines, per-series highlight dots, aggregated hover events, and grouped-bar support.
    • Added the tooltip_cursor styling slot for customizing cursor lines.
    • Preserved nearest-point tooltips as the default behavior.

  • Bug Fixes

    • Restored hover highlight dots for nearest-point tooltips.
    • Improved cursor positioning for partially clipped bars.

  • Documentation

    • Documented shared-axis tooltip behavior, styling, events, and export compatibility.