Tooltip
Floating tooltips that follow the pointer, shared or for the nearest point.
"use client";
import { ChartCanvas, Pane } from "@reincharts/core";
import { AreaSeries, LineSeries } from "@reincharts/series";
import { Grid, XAxis, YAxis } from "@reincharts/axes";
import { Crosshair } from "@reincharts/coordinates";
import { Tooltip } from "@reincharts/tooltip";
import { useDocsChartTheme } from "@/lib/use-docs-theme";
const data = Array.from({ length: 30 }, (_, i) => ({
day: new Date(2026, 8, i + 1),
visitors: Math.round(2200 + 900 * Math.sin(i / 4) + i * 40),
returning: Math.round(900 + 300 * Math.cos(i / 5) + i * 18),
}));
type Row = (typeof data)[number];
export default function TooltipExample() {
const theme = useDocsChartTheme();
return (
<ChartCanvas data={data} theme={theme} xAccessor={(d) => d.day} initialView="fit" rightOffset={0}>
<Pane>
<Grid />
<AreaSeries<Row> name="Visitors" y="visitors" curve="monotone" />
<LineSeries<Row> name="Returning" y="returning" curve="monotone" color="#f59e0b" />
<YAxis />
{/* a card next to the pointer with every series at the hovered day */}
<Tooltip />
</Pane>
<XAxis />
<Crosshair horizontal={false} xLabel={false} />
</ChartCanvas>
);
}Usage
<Tooltip> shows a card next to the pointer with the hovered x value and the values of the pane's series. It is the
natural choice for general-purpose charts (financial charts usually use a Legend instead).
<Pane>
<AreaSeries y="visitors" />
<LineSeries y="returning" />
<Tooltip />
</Pane>Modes
mode="shared"(default) lists every series at the hovered index.mode="nearest"shows only the series under the pointer. Scatter and bubble series pick the nearest point in 2D, and horizontal bars pick the bar under the pointer.
Custom content
formatHeader changes the header, filter the items, and render(content) replaces the card entirely; the returned
node is still positioned next to the pointer. content has the hovered index and datum, the header and the
legend items. TooltipCard is the default card: wrap it to add rows instead of rebuilding it.
<Tooltip render={(content) => <TooltipCard content={content} theme={myTheme} style={{ minWidth: 160 }} />} />