Sparkline

A trend at glyph size: no axes, no grid, no labels — just the shape of a series, meant to sit inside a table cell or beside a number.

It draws itself on once, left to right, and stays put. It is a picture of data, so it takes an aria-label that says what the trend is ("CPU load, last 24 hours, rising"). If the numbers themselves matter, put them next to it — a sparkline is context, not a data table.

Charts

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

Light	Dark

Props

Prop	Type	Default	What it does
values required	(number | null)[]	—	The series, oldest first. null is a gap, and breaks the line there.
color	string	'var(--chart-1)'	Line colour. Any token works — var(--chart-2), var(--success).
area	boolean	false	Wash the area under the line at 12% of the colour.
smooth	boolean	true	Monotone cubic instead of straight segments. Never overshoots the data.
marker	boolean	false	A filled dot on the last point, so the current value is findable.
width	number	96
height	number	28
min	number	—	Floor of the y range. Defaults to the smallest value, not to zero.
max	number	—	Ceiling of the y range.
class	string	—	Merged with the component's own classes, last — so yours win.
aria-label required	string	—	What the trend is. Required — this is a picture, and it must say so.

Example

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

<Sparkline values={[4, 6, 5, 9, 8, 12, 14, 13, 17]} marker aria-label="Throughput, rising" />
<Sparkline
	values={[17, 15, 16, 11, 12, 8, 7, 5, 4]}
	color="var(--destructive)"
	area
	marker
	aria-label="Failed reads, falling"
/>
<Sparkline
	values={[8, 9, 8, 10, 9, 9, 11, 10, 10]}
	color="var(--success)"
	smooth={false}
	aria-label="Queue depth, steady"
/>

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

---

← All components · Getting started · Theming · source