/// Charts
ChartTooltip
Custom recharts tooltip content — a surface-3 overlay with a mono label and per-series rows.
import { ChartTooltip } from "@protocore/pds";Import path
ChartTooltip ships from the `@protocore/pds/charts` subpath. It is the content render-prop for recharts' <Tooltip> — recharts (>=3, the optional peer) injects active, payload, and label; you rarely construct these yourself.
import { ChartTooltip } from "@protocore/pds/charts";Wired in by default
Every LineChart, AreaChart, and BarChart wrapper already passes ChartTooltip as its tooltip content — hover (or focus) a mark to see it. You only import the component directly when building a bespoke recharts chart outside the wrappers.
Resting appearance
The panel is a surface-3 overlay (the one place a chart uses --pds-shadow-overlay): a mono x-axis label on top, then one swatch / series-name / value row per payload entry. This demo supplies the recharts-injected props by hand to show it in isolation.
When to use it
You mostly don't — the chart wrappers wire it in for you. Import it directly only when you compose a raw recharts chart and want the family-consistent tooltip: pass content={<ChartTooltip />} to recharts' <Tooltip>.
It is the transient hover readout of exact values. Its persistent counterpart is ChartLegend (the always-visible series key); the surrounding frame is ChartContainer. Together they cover naming, framing, and inspecting a chart.
Usage
Do
- Let the chart wrappers supply it — reach for the component only in custom recharts setups.
- Pass it as `content={<ChartTooltip />}` so recharts injects the live props.
- Rely on the swatch `color` recharts mirrors from each series' stroke/fill.
- Keep series `label`s meaningful — they surface as the tooltip row names.
Don't
- Don't hand-construct `active`/`payload` in production — that's recharts' job.
- Don't restyle it away from the surface-3 overlay; it's the family readout.
- Don't import it from `@protocore/pds`; it lives on the `/charts` subpath.
- Don't use it as a persistent legend — pair charts with ChartLegend for that.
Accessibility
- recharts shows the tooltip on hover and on keyboard focus of the plot, so values are reachable without a pointer.
- Each row carries the series name and value as text; the swatch is `aria-hidden`, so meaning never rests on color alone.
- The overlay uses `--pds-shadow-overlay` for separation from the plot beneath it — the sole shadow permitted in the charts family.
ChartTooltip props
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | — | Whether the tooltip is showing. Injected by recharts; renders nothing when false. |
payload | ChartTooltipPayloadItem[] | — | Per-series rows for the hovered point (recharts-injected). `ChartTooltipPayloadItem` = `{ name?: ReactNode; value?: number | string; color?: string; dataKey?: string | number }`. |
label | React.ReactNode | — | The x-axis label for the hovered point (recharts-injected). |