GaugeChart

A 270° arc dial for a single score, on the chart engine — the arc animates from zero on mount and can carry a gradient. For a static score that needs no engine, the core package's SVG Gauge is lighter.

Basic

<GaugeChart  value={72}  display="72%"  caption="Completed"  ariaLabel="Sprint completion: 72 percent"/>

Gradient arc

Pass color as two or more stops for a gradient swept along the arc.

<GaugeChart  value={86}  caption="Health score"  color={['#2563eb', '#5fcc57']}  ariaLabel="System health score: 86 out of 100"/>

Props

Prop	Type	Default	Notes
`value`	`number`	—	Current value within [min, max].
`min / max`	`number`	`0 / 100`	The value range the arc spans.
`display`	`string`	—	Large centre figure. Defaults to the formatted value.
`caption`	`string`	—	Small caption under the figure, e.g. "Completed".
`color`	`string \| string[]`	—	Arc colour; an array becomes a gradient. Defaults to the Flab green.
`valueFormatter`	`(value: number) => string`	—	Formats the centre figure when display is not given.
`height`	`number \| string`	`180`	Chart height.