Chart

Charts are built with LayerChart — lily only ships the themed Chart.Container and Chart.Tooltip wrappers plus a 5-color palette, so any LayerChart chart works.

Installation

npx lily-svelte@latest add chart

npx lily-svelte@latest init

npm i layerchart

Colors

Charts use the --chart-1 … --chart-5 CSS variables — the one sanctioned color surface in lily's otherwise monochrome system. Override them in your stylesheet to theme every chart at once:

:root {
	--chart-1: #3182f6;
	--chart-2: #10b981;
	--chart-3: #f59e0b;
	--chart-4: #8b5cf6;
	--chart-5: #f43f5e;
}

Reference them in your chart config with var(--chart-N):

<script lang="ts">
	import * as Chart from '$lib/components/ui/chart';
 
	const chartConfig = {
		desktop: { label: 'Desktop', color: 'var(--chart-1)' },
		mobile: { label: 'Mobile', color: 'var(--chart-2)' }
	} satisfies Chart.ChartConfig;
</script>

Bar Chart

Pie Chart