Chart tooltip

Universal pointer-anchored tooltip + crosshair overlay. Renders multi-series colored rows or a custom render prop. Zero re-renders on hover (rAF + ref writes).

Primitive: ChartTooltip

Interactive demo

Usage

import { ChartRoot, ChartTooltip } from '@ramtt/charts'

<ChartRoot data={revenue} height={200}>
  <ChartTooltip
    series={[
      { label: 'Revenue', color: 'var(--chart-1)', values: revenue, format: (v) => `$${v}` },
      { label: 'Costs', color: 'var(--chart-2)', values: costs },
    ]}
    showTotal
  />
</ChartRoot>

Props

Prop	Type	Default	Description
series	`TooltipSeriesConfig[]`	—	Multi-series rows (label, color, values, format)
children	`(payload: TooltipPayload) => ReactNode`	—	Custom render prop
labelFn	`(index: number, datum: number) => string`	—	Header label extractor
formatValue	`(v: number) => string`	—	Value formatter for single-series
indicator	`'line' \| 'dot' \| 'none'`	'line'	Crosshair indicator style
tooltipIndicator	`'dot' \| 'line' \| 'dashed'`	'dot'	Marker style next to series labels
showTotal	`boolean`	false	Render a sum row at the bottom