||

Tooltip

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

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

Usage

Add <EChartsAreaChart.Tooltip /> as a child of the chart root. It reads the chart's data and config from context — no props are required to get a working tooltip.

import { EChartsAreaChart } from "@/components/evilcharts/charts/echarts-area-chart";
 
<EChartsAreaChart data={data} config={chartConfig}>
  <EChartsAreaChart.Tooltip variant="frosted-glass" roundness="md" position="fixed" />
</EChartsAreaChart>;

Variants

Control the tooltip surface with the variant prop on the <Tooltip /> part.

Default

variant='default'

Frosted Glass

variant='frosted-glass'

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 pins the tooltip near the top of the chart and tracks the pointer along the X axis only.

cursorbooleantrue

Shows the axis-pointer line that marks the hovered category.

defaultIndexnumber–

Data index shown when the chart first renders, before any hover.

Did you like the content?