Chart

Use Chart.Container with a LayerChart chart (for example BarChart). Pass a config for labels and colors, and place Chart.Tooltip in the chart’s tooltip snippet.

1<script lang="ts">
2	import { scaleBand } from 'd3-scale';
3	import { BarChart } from 'layerchart';
4	import * as Chart from '~/components/chart';
5
6	const chartData = [
7		{ month: 'January', desktop: 186, mobile: 80 },
8		{ month: 'February', desktop: 305, mobile: 200 },
9		{ month: 'March', desktop: 237, mobile: 120 },
10		{ month: 'April', desktop: 73, mobile: 190 },
11		{ month: 'May', desktop: 209, mobile: 130 },
12		{ month: 'June', desktop: 214, mobile: 140 }
13	];
14
15	const chartConfig = {
16		desktop: { label: 'Desktop', color: 'var(--chart-1)' },
17		mobile: { label: 'Mobile', color: 'var(--chart-2)' }
18	} satisfies Chart.ChartConfig;
19</script>
20
21<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
22	<BarChart
23		data={chartData}
24		xScale={scaleBand().padding(0.25)}
25		x="month"
26		axis="x"
27		seriesLayout="group"
28		legend
29		series={[
30			{
31				key: 'desktop',
32				label: chartConfig.desktop.label,
33				color: chartConfig.desktop.color
34			},
35			{
36				key: 'mobile',
37				label: chartConfig.mobile.label,
38				color: chartConfig.mobile.color
39			}
40		]}
41		props={{
42			xAxis: {
43				format: (d) => d.slice(0, 3)
44			}
45		}}
46	>
47		{#snippet tooltip()}
48			<Chart.Tooltip />
49		{/snippet}
50	</BarChart>
51</Chart.Container>