
## Usage

Compose a `<Dot />` inside a `<Line />` (or `<Area />`) to render a resting marker at every data point, and an `<ActiveDot />` for the marker shown while that point is hovered. Both read the series color and style from the chart context.

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

<EChartsLineChart {data} config={chartConfig} xDataKey="month">
	<EChartsLineChart.Line dataKey="desktop">
		<EChartsLineChart.Dot variant="border" />
		<EChartsLineChart.ActiveDot variant="default" />
	</EChartsLineChart.Line>
</EChartsLineChart>
```

## Variants

Control the marker style with the `variant` prop on the `<Dot />` (or `<ActiveDot />`) part.

### Default

### variant='default'

```svelte
<script lang="ts">
	import { EChartsLineChart } from '$lib/components/evilcharts/charts/echarts-line-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>

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

### Border

### variant='border'

```svelte
<script lang="ts">
	import { EChartsLineChart } from '$lib/components/evilcharts/charts/echarts-line-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>

<EChartsLineChart {data} config={chartConfig} class="h-full w-full p-4" xDataKey="month">
	<EChartsLineChart.Grid />
	<EChartsLineChart.XAxis
		dataKey="month"
		tickFormatter={(value) => String(value).substring(0, 3)}
	/>
	<EChartsLineChart.Tooltip />
	<!-- [!code highlight:3] -->
	<EChartsLineChart.Line dataKey="desktop">
		<EChartsLineChart.Dot variant="border" />
	</EChartsLineChart.Line>
	<!-- [!code highlight:3] -->
	<EChartsLineChart.Line dataKey="mobile">
		<EChartsLineChart.Dot variant="border" />
	</EChartsLineChart.Line>
</EChartsLineChart>
```

### Colored Border

### variant='colored-border'

```svelte
<script lang="ts">
	import { EChartsLineChart } from '$lib/components/evilcharts/charts/echarts-line-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>

<EChartsLineChart {data} config={chartConfig} class="h-full w-full p-4" xDataKey="month">
	<EChartsLineChart.Grid />
	<EChartsLineChart.XAxis
		dataKey="month"
		tickFormatter={(value) => String(value).substring(0, 3)}
	/>
	<EChartsLineChart.Tooltip />
	<!-- [!code highlight:3] -->
	<EChartsLineChart.Line dataKey="desktop">
		<EChartsLineChart.Dot variant="colored-border" />
	</EChartsLineChart.Line>
	<!-- [!code highlight:3] -->
	<EChartsLineChart.Line dataKey="mobile">
		<EChartsLineChart.Dot variant="colored-border" />
	</EChartsLineChart.Line>
</EChartsLineChart>
```

### Ping

### variant='ping'

```svelte
<script lang="ts">
	import { EChartsLineChart } from '$lib/components/evilcharts/charts/echarts-line-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>

<EChartsLineChart {data} config={chartConfig} class="h-full w-full p-4" xDataKey="month">
	<EChartsLineChart.Grid />
	<EChartsLineChart.XAxis
		dataKey="month"
		tickFormatter={(value) => String(value).substring(0, 3)}
	/>
	<EChartsLineChart.Tooltip />
	<EChartsLineChart.Line dataKey="desktop">
		<EChartsLineChart.Dot variant="ping" />
	</EChartsLineChart.Line>
	<EChartsLineChart.Line dataKey="mobile">
		<EChartsLineChart.Dot variant="ping" />
	</EChartsLineChart.Line>
</EChartsLineChart>
```

`ping` is ECharts-only — a solid core wrapped in a translucent halo.

## API Reference

Both `<Dot />` (the resting marker) and `<ActiveDot />` (the hovered marker) accept the same props and are composed inside a `<Line />` or `<Area />`.


  ### `variant`

type: `"default" | "border" | "colored-border" | "ping" | "none"` · default: `"default"`

Visual style of the point marker. `<Dot>` sets the resting marker; `<ActiveDot>` sets the marker shown on hover.

