Gauge

Examples

Different sizes, colours, and format functions.

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

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

Accessibility

• role="meter" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext from format.
• Named by the visible label through aria-labelledby, so what you see is what is announced.
• The fill transition stops under prefers-reduced-motion.

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
value	number	—	Required.
min	number	0	Start of the range.
max	number	—	Required. End of the range.
label	string	—	Required. Visible label and accessible name.
format	(value: number) => string	Intl.NumberFormat(“en”)	Formats the displayed value and aria-valuetext.
size	number	—	Fixed diameter in px. Omit to fill the container’s width (square).
thickness	number	10	Ring thickness in px.
color	string	series 1	Fill colour.
trackColor	string	grid colour	Track colour.
exportRef	Ref<ChartExportHandle>	—	SVG/PNG export.
className	string	—