Chart tooltip

The ChartTooltip and ChartTooltipContent components provide themed, accessible tooltips for all chart types. They automatically adapt to the mineral palette and respect light/dark themes.

Basic usage


<ChartTooltip content={<ChartTooltipContent />} />

This renders a tooltip with the label and value when hovering over a data point. The tooltip uses --card for the background and --border for the border, adapting to the active theme.

With chart config

The tooltip reads labels and colors from the chartConfig passed to ChartContainer:

const chartConfig = {
  visitors: { label: "Visitors", color: "var(--chart-1)" },
  revenue: { label: "Revenue", color: "var(--chart-2)" },
}

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="visitors" fill="var(--chart-1)" />
    <Bar dataKey="revenue" fill="var(--chart-2)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

The tooltip automatically shows a colored dot next to each series label, matching the chart colors.

Custom formatting

Value formatter

Format tooltip values (e.g., currency, percentages):

<ChartTooltip
  content={
    <ChartTooltipContent
      formatter={(value) => `$${value.toLocaleString()}`}
    />
  }
/>

Label formatter

Customize the tooltip header label:

<ChartTooltip
  content={
    <ChartTooltipContent
      labelFormatter={(label) => `Week of ${label}`}
    />
  }
/>

Show a color indicator (dot, line, or dashed) next to each value:

<ChartTooltipContent indicator="dot" />    {/* Colored dot (default) */}
<ChartTooltipContent indicator="line" />   {/* Colored line */}
<ChartTooltipContent indicator="dashed" /> {/* Dashed line */}

Hide label

For single-series charts where the label is redundant:

<ChartTooltipContent hideLabel />

Cursor styling

Customize the hover cursor (the line or area that follows the mouse):

<ChartTooltip cursor={{ fill: "var(--muted)", opacity: 0.5 }} content={<ChartTooltipContent />} />

For line and area charts:

<ChartTooltip cursor={{ stroke: "var(--border)", strokeWidth: 1 }} content={<ChartTooltipContent />} />

Styling guidelines

Use the default ChartTooltipContent for consistency across the ecosystem
Include tooltips on all charts — they are the primary way users read exact values
Use value formatters for currency, percentages, and large numbers
The tooltip automatically handles light/dark themes via CSS custom properties
Keep custom formatting minimal — the default styling is designed to be consistent

Start here

The language

The research programme

The registry

Registry architecture

Foundations

Patterns

Blocks

Charts

Content style

Registry tooling

Chart tooltip

Basic usage

With chart config

Custom formatting

Value formatter

Label formatter

Tooltip with indicator

Hide label

Cursor styling

Styling guidelines

​Basic usage

​With chart config

​Custom formatting

​Value formatter

​Label formatter

​Tooltip with indicator

​Hide label

​Cursor styling

​Styling guidelines

Basic usage

With chart config

Custom formatting

Value formatter

Label formatter

Tooltip with indicator

Hide label

Cursor styling

Styling guidelines