For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
0
Sponsor

Tooltip

PreviousNext

Tooltips that surface the values under the pointer as you hover a chart.

ChartGPUPixiJS
PixiJS renderer

Usage

Compose <Tooltip /> inside a cartesian chart root. It reads the chart data and config from context, so no props are required for the default tooltip.

import { ChartcnAreaChart } from "@/components/chart/area-chart";
 
<ChartcnAreaChart data={data} config={chartConfig} xDataKey="month">
  <ChartcnAreaChart.Tooltip variant="frosted-glass" roundness="md" />
  <ChartcnAreaChart.Area dataKey="desktop" />
</ChartcnAreaChart>;

Variants

Control the tooltip surface with the variant prop.

Default

variant='default'

Frosted Glass

variant='frosted-glass'

API Reference

PropTypeDefaultDescription
variant"default" | "frosted-glass""default"Visual style of the tooltip surface.
roundness"sm" | "md" | "lg" | "xl""lg"Corner radius of the tooltip container.
defaultIndexnumber-Data index shown before the pointer moves.

The heading comes from the active x-axis value. Series labels, icons, and colors come from ChartConfig. The vertical cursor and active dots stay synchronized with the hovered category.