Tooltip
Show labels and formatted values for the inspected chart item.
Tooltip uses series metadata and stays within the plot bounds. Add it inside the chart, within Root.
Usage
<Chart.Tooltip />Kind hides entries for deselected series. The default content uses configured labels, colors and value formatters; native tooltip formatters take precedence. Keyboard inspection depends on the chart family. Escape dismisses inspection.
Custom content
Use TooltipContent to keep Kind's labels and formatting in a custom content callback. Pass the complete callback payload through its tooltip prop.
<Chart.Tooltip
content={(tooltip) => (
<Chart.TooltipContent tooltip={tooltip} indicator="dot" hideLabel />
)}
/>TooltipContent accepts native div props and a ref. Its defaults are missingValue="No data", indicator="line", hideLabel={false} and hideIndicator={false}. It renders nothing when no visible entry has a value.
Props
Tooltip
| Prop | Type | Required |
|---|---|---|
content | ContentType<Chart.TooltipValueType, NameType> | undefined | No |
cursor | CursorDefinition | undefined | No |
filterNull | boolean | undefined | No |
shared | boolean | undefined | No |
frameProps | Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children" | "ref"> | undefined | No |
maxWidth | number | undefined | No |
itemKey | ((entry: Chart.TooltipRenderProps["payload"][number]) => string) | undefined | No |
Kind defaults to cursor={false}, filterNull={false}, offset={12} and maxWidth={180}. frameProps and ref address its measured positioning element. itemKey resolves metadata and visibility identity for categories or custom data keys.
Native selection and formatting props are available; Kind controls positioning, the portal and tooltip transitions. See Recharts Tooltip for the native props.
TooltipContent
| Prop | Type | Required |
|---|---|---|
tooltip | Chart.TooltipRenderProps | Yes |
missingValue | React.ReactNode | No |
hideLabel | boolean | undefined | No |
hideIndicator | boolean | undefined | No |
indicator | "dashed" | "dot" | "line" | undefined | No |
itemKey | ((entry: Chart.TooltipRenderProps["payload"][number]) => string) | undefined | No |
Other chart families
Use ScatterTooltip for X/Y/Z dimensions and HeatmapTooltip for heatmap cells.
Sankey uses Tooltip imported directly from recharts. Its hover tooltip is native; the Sankey example supplies separate keyboard selection and status text.