Chart Tooltip

The ChartTooltip and ChartTooltipContent components provide themed, accessible tooltips for all chart types. They automatically adapt to the Five African Minerals color scheme and respect light/dark themes.

Basic usage

import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 
<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}`}
    />
  }
/>

Tooltip with indicator

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 all Mukoko apps
• 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