Charts
Rings & gauges
How far along, how full, how good. Rings sweep in from twelve o'clock; the gauge lights its ticks up to the score and sweeps when the score changes.
Tick gauge
168 fine ticks from red to green. Change the source: the lit edge sweeps to the new score and the number counts to it.
2004006008001000 ▼ 15 pts
| Prop | Values | Default | What it does |
|---|---|---|---|
value / min / max | number | · 200 · 1000 | The score and its scale |
labels | number[] | [200…1000] | Scale numbers placed around the arc |
delta / deltaUnit | number · string | · 'pts' | Change badge riding on the arc at the score |
Rings
One ring for one measure; nested rings to compare measures of the same thing. Hover a ring to read it in the centre.
64%done
64%work done
59%of budget
64%
| Prop | Values | Default | What it does |
|---|---|---|---|
value / label / color | 0–100 · string · colour | · 'done' · blue | One ring |
rings | { label, value, color }[] | — | Nested rings, outer first |
size / stroke | px | 150 · 12 | Diameter and ring weight |
Donut without a legend
For tight spaces: the centre reads the hovered slice.
31 paid · 6 due · 4 overdue