Gauge
Charts · Gauge
Half-ring showing one value against a maximum: a goal, a budget, a quota.
Props: value, max, caption, format(v), tint, or thresholds ([warn, danger] switches mint → butter → blush), size, stroke, showRange, label.
- One gauge per idea; never put gauges in a row to compare things — use a BarChart.
- Use
thresholdsfor limits (budgets, storage), a fixedtintfor goals where more is better.
€60k80% of monthly target
€0k€75k
72%Agent budget used
0%100%
91%Storage used
0%100%
Props
Gauge
| Prop | Type | Notes |
|---|---|---|
value | number | Required |
max? | number | |
caption? | string | |
format? | (v: number) => string | |
tint? | Tint | "ink" | |
thresholds? | [number, number] | |
size? | number | |
stroke? | number | |
showRange? | boolean | |
label? | string | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |