Svelte 5 port
| |

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.

<script lang="ts">
	import { EChartsAreaChart } from '$lib/components/evilcharts/charts/echarts-area-chart/index.js';
</script>

<EChartsAreaChart {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

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.

position variable| 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.

Was this page helpful?