## 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.

```svelte
<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

### variant='default'

```svelte
<script lang="ts">
	import { EChartsBarChart } from '$lib/components/evilcharts/charts/echarts-bar-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/echarts-chart/index.js';

	const data = [
		{ month: 'January', desktop: 342, mobile: 184 },
		{ month: 'February', desktop: 876, mobile: 491 },
		{ month: 'March', desktop: 512, mobile: 290 },
		{ month: 'April', desktop: 629, mobile: 391 },
		{ month: 'May', desktop: 458, mobile: 309 },
		{ month: 'June', desktop: 781, mobile: 449 },
		{ month: 'July', desktop: 394, mobile: 234 },
		{ month: 'August', desktop: 925, mobile: 557 },
		{ month: 'September', desktop: 647, mobile: 367 },
		{ month: 'October', desktop: 532, mobile: 357 },
		{ month: 'November', desktop: 803, mobile: 515 },
		{ month: 'December', desktop: 271, mobile: 149 }
	];

	const chartConfig = {
		desktop: {
			label: 'Desktop',
			colors: {
				light: ['#047857'],
				dark: ['#10b981']
			}
		},
		mobile: {
			label: 'Mobile',
			colors: {
				light: ['#be123c'],
				dark: ['#f43f5e']
			}
		}
	} satisfies ChartConfig;
</script>

<EChartsBarChart {data} config={chartConfig} class="h-full w-full p-4">
	<EChartsBarChart.Grid />
	<EChartsBarChart.XAxis dataKey="month" tickFormatter={(value) => String(value).substring(0, 3)} />
	<EChartsBarChart.Legend />
	<!-- [!code highlight] -->
	<EChartsBarChart.Tooltip variant="default" defaultIndex={4} />
	<EChartsBarChart.Bar dataKey="desktop" variant="default" />
	<EChartsBarChart.Bar dataKey="mobile" variant="default" />
</EChartsBarChart>
```

### Frosted Glass

### variant='frosted-glass'

```svelte
<script lang="ts">
	import { EChartsBarChart } from '$lib/components/evilcharts/charts/echarts-bar-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/echarts-chart/index.js';

	const data = [
		{ month: 'January', desktop: 342, mobile: 184 },
		{ month: 'February', desktop: 876, mobile: 491 },
		{ month: 'March', desktop: 512, mobile: 290 },
		{ month: 'April', desktop: 629, mobile: 391 },
		{ month: 'May', desktop: 458, mobile: 309 },
		{ month: 'June', desktop: 781, mobile: 449 },
		{ month: 'July', desktop: 394, mobile: 234 },
		{ month: 'August', desktop: 925, mobile: 557 },
		{ month: 'September', desktop: 647, mobile: 367 },
		{ month: 'October', desktop: 532, mobile: 357 },
		{ month: 'November', desktop: 803, mobile: 515 },
		{ month: 'December', desktop: 271, mobile: 149 }
	];

	const chartConfig = {
		desktop: {
			label: 'Desktop',
			colors: {
				light: ['#047857'],
				dark: ['#10b981']
			}
		},
		mobile: {
			label: 'Mobile',
			colors: {
				light: ['#be123c'],
				dark: ['#f43f5e']
			}
		}
	} satisfies ChartConfig;
</script>

<EChartsBarChart {data} config={chartConfig} class="h-full w-full p-4">
	<EChartsBarChart.Grid />
	<EChartsBarChart.XAxis dataKey="month" tickFormatter={(value) => String(value).substring(0, 3)} />
	<EChartsBarChart.Legend />
	<!-- [!code highlight] -->
	<EChartsBarChart.Tooltip variant="frosted-glass" defaultIndex={4} />
	<EChartsBarChart.Bar dataKey="desktop" variant="default" />
	<EChartsBarChart.Bar dataKey="mobile" variant="default" />
</EChartsBarChart>
```

## API Reference


  ### `variant`

type: `"default" | "frosted-glass"` · default: `"default"`

Visual style of the tooltip surface.
  ### `roundness`

type: `"sm" | "md" | "lg" | "xl"` · default: `"lg"`

Corner radius of the tooltip container.
  ### `position`

type: `"variable" | "fixed"` · default: `"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.
  ### `cursor`

type: `boolean` · default: `true`

Shows the axis-pointer line that marks the hovered category.
  ### `defaultIndex`

type: `number`

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