Chart Tooltip

Usage

.chart-tooltip — Root tooltip card container. Rounded border with surface background and overlay shadow.
.chart-tooltip__header — Optional title row (e.g., the X-axis label). Muted 12px medium text.
.chart-tooltip__item — A single series entry row. Flex layout with gap.
.chart-tooltip__indicator — Color marker next to the series name.
.chart-tooltip__indicator--dot — Dot-shaped indicator. Small circle (8px).
.chart-tooltip__indicator--line — Line-shaped indicator. Tall narrow pill (12px × 4px).
.chart-tooltip__label — Series name text. Muted 12px, fills available space.
.chart-tooltip__value — Series data value. Semibold 12px foreground text.

The root tooltip container. Controls visibility and indicator style via context.

Prop	Type	Default	Description
`active`	`boolean`	`true`	Controls visibility. When `false`, the tooltip is not rendered.
`indicator`	`"dot" \| "line"`	`"dot"`	Shape of the color indicator next to each series name.
`children`	`ReactNode`	—	Tooltip content — typically `Header`, `Item`, `Indicator`, `Label`, and `Value` sub-components.

Also supports all native div HTML attributes.

Auto-renders a tooltip from Recharts payload data. Pass as the content prop of a Recharts <Tooltip>:

<Tooltip content={<ChartTooltip.Content />} />

Prop	Type	Default	Description
`active`	`boolean`	—	Provided by Recharts — whether the tooltip is active.
`label`	`number \| string`	—	Provided by Recharts — the X-axis label for the hovered data point.
`payload`	`RechartsPayloadEntry[]`	—	Provided by Recharts — array of series data for the hovered point.
`hideHeader`	`boolean`	`false`	Hide the header row.
`indicator`	`"dot" \| "line"`	`"dot"`	Shape of the color indicator.
`labelFormatter`	`(label: number \| string) => ReactNode`	—	Custom formatter for the header label.
`valueFormatter`	`(value: number \| string) => ReactNode`	—	Custom formatter for series values.

Optional title row rendered above the series items.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Header content (typically the X-axis label text).

Also supports all native div HTML attributes.

A single series entry row containing an indicator, label, and value.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Row content — typically `Indicator`, `Label`, and `Value` sub-components.

Also supports all native div HTML attributes.

Color marker rendered next to the series name. Shape is controlled by the root indicator variant.

Prop	Type	Default	Description
`color`	`string`	—	CSS color value for the indicator background.

Also supports all native span HTML attributes.

Series name text displayed between the indicator and value.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Label content (typically the series name or `dataKey`).

Also supports all native span HTML attributes.

Series data value displayed at the end of each item row.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Value content (typically the formatted numeric value).

Also supports all native span HTML attributes.