Primitives

ChartTooltip

Shared chart tooltip content for consistent labels, markers, icons, units, hidden labels, and totals across every chart type.

Examples

Default

<ChartTooltip
  label="July 16, 2024"
  rows={[
    {key: 'running', label: 'Running', value: '380', color: 'var(--uin-chart-1)'},
    {key: 'swimming', label: 'Swimming', value: '420', color: 'var(--uin-chart-2)'}
  ]}
/>

Line indicator

<ChartTooltip
  label="July 16, 2024"
  indicator="line"
  rows={rows}
/>

Icons and total

<ChartTooltip
  label="Activities"
  indicator="none"
  rows={[
    {key: 'running', label: 'Running', value: '380', unit: 'kcal', icon: '⌁'},
    {key: 'swimming', label: 'Swimming', value: '420', unit: 'kcal', icon: '≈'}
  ]}
  total="800 kcal"
/>

Used by a chart

Tooltip - Line Indicator Tooltip rows can use line indicators. Running Swimming

Tooltip - Line Indicator
day	Running	Swimming
Mon	450	300
Tue	380	420
Wed	510	240
Thu	220	610
Fri	560	460
Sat	410	520

<BarChart
  title="Tooltip - Line Indicator"
  xKey="day"
  data={activity}
  stacked
  tooltipIndicator="line"
  series={[
    {key: 'running', label: 'Running'},
    {key: 'swimming', label: 'Swimming'}
  ]}
/>

Props

Prop	Type	Default	Description
`label`	`string`	`—`	Tooltip heading, usually the active x/category value.
`rows`	`ChartTooltipRow[]`	`[]`	Rows with label, formatted value, color, icon, and unit metadata.
`indicator`	`'dot' \| 'line' \| 'none'`	`'dot'`	Visual marker rendered before row labels.
`hideLabel`	`boolean`	`false`	Hide the heading while keeping the rows.
`totalLabel`	`string`	`'Total'`	Label for the optional total row.
`total`	`string`	`—`	Optional preformatted total value.

Install

CLI

npx @a3tai/mittsu add chart-tooltip --registry ./packages/charts/registry.json