Chart

bun x bosia@latest add chart

Pure SVG chart components with tooltips, responsive sizing, and automatic axis formatting. No external charting library needed.

Preview

Line Chart

<script lang="ts">
	import { LineChart } from "$lib/components/ui/chart";

	const data = [
		{ date: "2024-01-01", value: 120 },
		{ date: "2024-01-02", value: 340 },
		{ date: "2024-01-03", value: 280 },
		{ date: "2024-01-04", value: 450 },
		{ date: "2024-01-05", value: 390 },
	];
</script>

<LineChart {data} />

Line Chart Props

Area Chart Variant

<LineChart {data} showArea showDots={false} height={200} />

Bar Chart

<script lang="ts">
	import { BarChart } from "$lib/components/ui/chart";

	const data = [
		{ date: "2024-01", value: 1200 },
		{ date: "2024-02", value: 1800 },
		{ date: "2024-03", value: 1500 },
		{ date: "2024-04", value: 2200 },
	];
</script>

<BarChart {data} granularity="month" />

Bar Chart Props

Custom Colors

<LineChart {data} color="hsl(var(--color-destructive))" />
<BarChart {data} color="#22c55e" />

Internals

Charts include built-in utilities:

• scale.ts — linearScale(), timeScale(), niceYTicks() for mapping data to SVG coordinates
• format.ts — formatDate(), formatNumber() for axis labels and tooltips (compact: 1200 → "1.2k")
• tooltip.svelte — SVG-embedded tooltip with popover styling