Gauge

Examples

Different sizes, colours, and format functions.

import { Gauge } from '@eekodigital/raster';

<Gauge value={72} max={86} label="Assessed" aria-label="72 of 86 assessed" />
<Gauge value={3.5} max={4} label="Score" format={(v) => v.toFixed(1)} color="var(--color-success)" aria-label="Score: 3.5/4" />
<Gauge value={45} max={100} label="Complete" format={(v) => `${v}%`} size={80} thickness={8} aria-label="45% complete" />

Props

Prop	Type	Default	Description
value	number	—	Current value
max	number	—	Maximum value
label	string	—	Label below the value
color	string	—color-interactive	Fill colour
size	number	120	Diameter in pixels
thickness	number	10	Ring thickness
format	(v: number) => string	String	Format the displayed value
aria-label	string	—	Required.