Tooltip
Updated
Every chart takes a tooltip prop: an object that sets the header over the rows, how each row marks its series, a unit after each value, a total row, and the point the tooltip opens on before anyone hovers. Leave it out and the tooltip shows the x label over one row per series, each marked with a square in the series' pattern.
Usage
A stacked bar chart whose tooltip drops the date and adds a unit and a total:
const chartData = [
{ date: "Jul 15", running: 450, swimming: 300 },
{ date: "Jul 16", running: 380, swimming: 420 },
]
const chartConfig = {
running: { label: "Running" },
swimming: { label: "Swimming" },
} satisfies ChartConfig
<BarChart
data={chartData}
config={chartConfig}
xKey="date"
label="Running and swimming by day"
stack="stacked"
tooltip={{ hideLabel: true, unit: "kcal", total: true }}
/>Options
| Prop | Type | Default | Description |
|---|---|---|---|
| label | Type string | Default – | Fixed text over the rows, in place of the x label. |
| labelKey | Type string | Default – | The row key whose value heads the tooltip in place of the x label, e.g. a long date. |
| indicator | Type "dot" | "line" | "dashed" | "none" | Default "dot" (a square) | How each row marks its series, in the series' pattern. |
| hideLabel | Type boolean | Default false | Leave out the x label over the rows. |
| hideIndicator | Type boolean | Default false | Leave out the rows' indicators. |
| unit | Type string | Default – | Text after every value, e.g. "kcal". |
| total | Type boolean | Default false | A row under the series that sums them. |
| defaultIndex | Type number | Default – | The x position whose tooltip shows at rest; the cursor takes over while it is on the chart. |
Behavior
The tooltip is drawn in the charts' 3x5 bitmap font, in ink on paper. On a chart with several series, the row under the cursor is inverted. A config entry's icon takes the place of its row's indicator.
With defaultIndex, the tooltip shows at rest. The pointer or the arrow keys take over, and Escape returns it to the resting point.
The tooltip is decorative. Screen readers get each chart's data table and its announcements as the cursor moves.