> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactivity

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

```tsx theme={null}
<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:

```tsx theme={null}
geom.point({ interactive: false, params: { size: 6 } });
```

## Tooltips

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

```tsx theme={null}
<GraphRenderer showTooltips={false} />
```

To change how the tooltip looks, replace it with the `Tooltip` [slot](/sdk-next/extending/slots) — you receive the same render-ready rows the default tooltip gets:

```tsx theme={null}
<GraphRenderer slots={{ Tooltip: MyTooltip }} />
```

## Animation

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

```tsx theme={null}
<GraphRenderer isAnimated />
```

## Related

* [Slots](/sdk-next/extending/slots) — replace the tooltip or other regions
* [Provider & renderer](/sdk-next/rendering/provider-and-renderer) — `showTooltips`, `isAnimated`, `mode`