ChartLegend

The identity key for a chart: a swatch and a name per series.

Present it whenever a chart draws two or more series — colour alone is not an accessible channel, and a reader who cannot separate two hues still has the list. Give it onToggle and every entry becomes a real button that mutes its series; leave it off and the legend is inert text with no tab stops. The charts in the kit render one themselves, so reach for this only when you are composing a chart of your own.

Charts

<script lang="ts">
	import { ChartLegend } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
items required	LegendItem[]	—	In the same order as the chart's series, so swatch and mark agree.
onToggle	(index: number) => void	—	Called with the index when an entry is clicked. Omit for an inert legend.
vertical	boolean	false	Stack the entries instead of wrapping them in a row.
class	string	—	Merged with the component's own classes, last — so yours win.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<ChartLegend
	items={[
		{ label: 'Media', color: 'var(--chart-1)', value: '5.2 TB' },
		{ label: 'Backups', color: 'var(--chart-2)', value: '3.2 TB' },
		{ label: 'Code', color: 'var(--chart-3)', value: '980 GB', hidden: true }
	]}
/>

Charts · LineChart · BarChart · DonutChart · ShareBar · Heatmap · Gauge · Sparkline

---

← All components · Getting started · Theming · source