Radial bar chart
Concentric radial bars per category with start labels, end values, hover and keyboard highlight with a centre swap, and a grow-in.
Preview
Sessions by device
This week| Desktop | 642 |
|---|---|
| Mobile | 518 |
| Tablet | 196 |
| TV app | 74 |
Quarterly goals
Percent done| Launch v4 | 86% |
|---|---|
| Hiring | 60% |
| Docs refresh | 42% |
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value: number; color?: string }[] | — | Categories from the outer ring inwards. |
| label | string | — | Accessible name and table caption. |
| max | number | largest value | Value of a full track. |
| size | number | 280 | Diameter in px. |
| sweep | number | 270 | Degrees each track covers (90–330). |
| thickness | number | fit | Ring thickness in px. |
| gap | number | 6 | Space between rings in px. |
| centerLabel | string | "Total" | Caption in the centre when nothing is active. |
| centerValue | number | sum | Number in the centre when nothing is active. |
| valueFormatter | (value: number) => string | Intl number | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.