LinearGauge

Examples

Assessed72 / 86

Complete45%

Criteria86 / 86

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

<LinearGauge value={72} max={86} label="Assessed" aria-label="72 of 86 assessed" />
<LinearGauge value={45} max={100} label="Complete" color="var(--color-warning)" formatLabel={(v) => `${v}%`} aria-label="45% complete" />
<LinearGauge value={86} max={86} label="Criteria" color="var(--color-success)" aria-label="All criteria assessed" />

Props

Prop	Type	Default	Description
value	number	—	Current value
max	number	—	Maximum value
label	string	—	Label above the bar
color	string	—color-interactive	Fill colour
height	number	8	Bar height in pixels
format	(v: number) => string	String	Format the displayed value
aria-label	string	—	Required.