chartcn

The tooltip primitives provide a consistent look across all chart types. They compose together to form complete tooltips.

Components

`TooltipShell`

The outer container with background, border, shadow, and padding.

import { TooltipShell, TooltipHeader, TooltipRow } from "@exhibit/charts";

<TooltipShell>
  <TooltipHeader>January</TooltipHeader>
  <TooltipRow label="Sales" value={1234} unit="USD" color="#3b82f6" />
  <TooltipRow label="Returns" value={56} color="#ef4444" />
</TooltipShell>

`TooltipHeader`

Bold label for the tooltip (typically the X axis value).

Prop	Type	Description
`children`	`ReactNode`	Header content

`TooltipRow`

A single metric row with optional colour indicator, label, value, and unit.

Prop	Type	Default	Description
`label`	`string`	required	Metric label
`value`	`number \| string \| null`	required	Display value
`unit`	`string`	—	Unit suffix
`color`	`string`	—	Indicator colour
`indicator`	`"dot" \| "ring" \| "square"`	`"dot"`	Indicator shape

Indicator styles

dot -- filled circle (default, used for bar series)
ring -- outlined circle (used for line series)
square -- filled square

Custom tooltips

Use the <Tooltip> render prop to compose custom content with these building blocks:

import { Chart, LineMark, Tooltip, TooltipShell, TooltipHeader, TooltipRow } from "@exhibit/charts";

<Chart data={data} xDataKey="month" height={360}>
  <LineMark dataKey="sales" name="Sales" color="#3b82f6" />
  <Tooltip>
    {({ datum }) => (
      <TooltipShell>
        <TooltipHeader>{String(datum.month)}</TooltipHeader>
        <TooltipRow label="Sales" value={datum.sales as number} unit="USD" color="#3b82f6" />
      </TooltipShell>
    )}
  </Tooltip>
</Chart>

For geo charts, <Tooltip> auto-detects the geo context and accepts valueLabel and formatValue props:

<Chart height={620}>
  <Choropleth geoData={geo} data={popData} ...>
    <DrillDown onDrill={...} />
  </Choropleth>
  <Tooltip valueLabel="Population" formatValue={(v) => v.toLocaleString()} />
</Chart>

Chart Tooltip