
## Usage

Compose a `<Dot>` for the resting marker and an `<ActiveDot>` for the hover marker inside a `<Line>` (or `<Area>`). Each reads the series color and gradient from context.

```svelte
<EvilLineChart.Line dataKey="desktop">
	<EvilLineChart.Dot variant="border" />
	<EvilLineChart.ActiveDot variant="default" />
</EvilLineChart.Line>
```

## Variants

Control the marker style with the `variant` prop.

### Default

### <Dot variant="default" />

```svelte
<script lang="ts">
	import { EvilLineChart } from '$lib/components/evilcharts/charts/layerchart-line-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-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>

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

### Border

### <Dot variant="border" />

```svelte
<script lang="ts">
	import { EvilLineChart } from '$lib/components/evilcharts/charts/layerchart-line-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-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>

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

### Colored Border

### <Dot variant="colored-border" />

```svelte
<script lang="ts">
	import { EvilLineChart } from '$lib/components/evilcharts/charts/layerchart-line-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-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>

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

## API Reference

Both `<Dot>` and `<ActiveDot>` are composed inside a `<Line>` or `<Area>`. `<Dot>` renders the resting marker shown on every data point; `<ActiveDot>` renders the marker shown on hover.


  ### `variant`

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

Style of the point marker.

