Skip to documentation content
|

Tooltip

Show values for the chart point or category under the pointer.

Chart tooltips provide supporting detail during pointer exploration. They are not a replacement for a visible summary, labels, or data table when exact values are required to understand the chart.

Usage

Add <AreaChart.Tooltip /> as a child of the chart root. It reads the chart's data and config from the root, so the default tooltip needs no props.

import { AreaChart } from "honestui/charts"

<AreaChart data={data} config={chartConfig}>
  <AreaChart.Tooltip variant="frosted-glass" roundness="md" position="fixed" />
</AreaChart>

The canvas tooltip opens from pointer interaction. If the values are required for comprehension or an action, expose them in persistent HTML as well.

Variants

Use variant to change the tooltip surface without changing its content.

Default

Default tooltip

Frosted glass

Frosted-glass tooltip

API Reference
PropTypeDefaultDescription
variantdefault|frosted-glass"default"

Visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Corner radius of the tooltip container.

positionvariable|fixed"variable"

variable follows the pointer on both axes. fixed stays near the top and follows the active horizontal category.

cursorbooleantrue

Shows the axis-pointer line for the active category.

defaultIndexnumber–

Data index shown when the chart first renders, before pointer interaction.