Gauge

One number against the range it lives in — a disk that is x% full, a load average, a score.

The arc sweeps up to the value when it mounts and eases to any new one, so a live figure moves rather than jumps. Give it zones and the track is banded: the arc takes the colour of the zone the value has reached, which is how a gauge says "this is fine" or "this is not" without the reader doing arithmetic. Zones are a status signal, so pair them with the caption — never colour alone. It reports itself as a meter with its real min, max and value, so a screen reader gets the number and its range without a table.

Charts

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

Light	Dark

Props

Prop	Type	Default	What it does
value required	number	—	The number being shown. Clamped into [min, max] for the arc.
min	number	0
max	number	100
size	number	160	Outer diameter in pixels.
thickness	number	12	Arc thickness.
caption	string	—	Under the number, e.g. "of 4 vCPU".
unit	string	—	A unit rendered small beside the number, e.g. "%".
color	string	'var(--primary)'	Colour of the arc when no zone applies. Any token works.
format	(value: number) => string	compact	Formats the number in the middle. Defaults to compact (1.2k).
sweep	number	240	How much of a full circle the gauge spans, in degrees.
aria-label required	string	—	Names the gauge. Required.
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.

<Gauge value={68} unit="%" caption="volume1 capacity" aria-label="volume1 capacity used" />
<Gauge
	value={92}
	unit="%"
	caption="volume2 capacity"
	zones={[
		{ upTo: 70, color: 'var(--success)' },
		{ upTo: 90, color: 'var(--warning)' },
		{ upTo: 100, color: 'var(--destructive)' }
	]}
	aria-label="volume2 capacity used"
/>

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

---

← All components · Getting started · Theming · source