Components
GaugeChart
Gauge chart showing a single value as an arc against a min/max range, like a dial.
GaugeChart renders a single value as a dial arc against a range — use it for
one headline number measured against a target, such as quota attainment or
utilization. Pass the value, optionally set min/max (default 0–100)
and a label. It renders client-side via ECharts, so give it a height
(defaults to 280). For a lighter SVG dial or progress bar, see Gauge.
Example
Preview
import { GaugeChart } from '@officina/ui';
<GaugeChart value={72} label="Quota" max={100} height={280} />;API
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Current value to display. |
| className | string | — | |
| color | string | — | Fill colour of the gauge arc. |
| height | number | 280 | Chart height in pixels. |
| label | string | — | Caption shown with the value. |
| max | number | 100 | Upper bound of the scale. Defaults to 100. |
| min | number | 0 | Lower bound of the scale. Defaults to 0. |