> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mzizi.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart tooltip

> Customising chart tooltips and legends — formatters, labels and indicator styles.

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

```tsx theme={null}

<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`:

```tsx theme={null}
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):

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

### Label formatter

Customize the tooltip header label:

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

## Tooltip with indicator

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

```tsx theme={null}
<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:

```tsx theme={null}
<ChartTooltipContent hideLabel />
```

## Cursor styling

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

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

For line and area charts:

```tsx theme={null}
<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