Interactivity

Charts are interactive by default. Hovering highlights the nearest observation and shows a tooltip; no configuration is needed.

<GraphProvider input={spec} data={data}>
  <GraphRenderer /> {/* hover + tooltips on by default */}
</GraphProvider>

How hover works

For most cartesian charts, hover is anchored to the x-axis: the renderer resolves the nearest position along x rather than requiring the cursor to land exactly on an observation. Everything at that x — every series in a multi-line chart, every segment in a stack — highlights together, and the tooltip lists their values in legend order. This is why a line chart responds smoothly between vertices instead of only when you touch a dot. Layers can opt out of hit-testing with interactive: false — useful for a decorative point overlay that shouldn’t compete with the line beneath it:

geom.point({ interactive: false, params: { size: 6 } });

Tooltips

Tooltips are on by default. Turn them off with showTooltips:

<GraphRenderer showTooltips={false} />

To change how the tooltip looks, replace it with the Tooltip slot — you receive the same render-ready rows the default tooltip gets:

<GraphRenderer slots={{ Tooltip: MyTooltip }} />

Animation

Set isAnimated to transition between compiled states — for example when the data or a config value changes:

<GraphRenderer isAnimated />

Slots — replace the tooltip or other regions
Provider & renderer — showTooltips, isAnimated, mode

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

How hover works

Tooltips

Animation

​How hover works

​Tooltips

​Animation

​Related

How hover works

Tooltips

Animation

Related