Component
GaugeChart
One reading on a scale, filled in the accent colour or shown with a needle.
import { GaugeChart } from '@loidolt/theme-charts';
Example
Gauge reading 72 on a scale of 0 to 100 (72%).
| Reading | Value |
|---|---|
| Value | 72 |
| Minimum | 0 |
| Maximum | 100 |
Gauge reading 14 on a scale of 0 to 40 (35%).
| Reading | Value |
|---|---|
| Value | 14 |
| Minimum | 0 |
| Maximum | 40 |
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
data required | GaugeData | — | The reading, and the scale it sits on (0–100 unless given). |
tableLabels | { readingLabel?: string; valueLabel?: string; minLabel?: string; maxLabel?: string; } | {} | Headings of the data table columns. |
Plus the attributes of Omit<ComponentProps<typeof Chart>, 'option' | 'table' | 'extensions'>andGaugeOptions, forwarded to the root element.