## Usage

```svelte
<EvilBarChart {data} config={chartConfig}>
	<EvilBarChart.XAxis dataKey="month" />
	<EvilBarChart.Tooltip variant="frosted-glass" roundness="md" />
	<EvilBarChart.Bar dataKey="desktop" />
</EvilBarChart>
```

## Variants

Set the `variant` prop on the chart's `Tooltip` part to `"default"` or `"frosted-glass"`.

### Default

A solid background.

### variant='default'

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

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

### Frosted glass

A semi-transparent background with a backdrop blur.

### variant='frosted-glass'

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

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

## API reference


	### `variant`

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

The tooltip's visual style.
	### `roundness`

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

The tooltip's border-radius.
	### `defaultIndex`

type: `number`

Shows the tooltip by default at this data-point index.