Donut chart
Donut or semi-circle gauge with rounded padded segments, a centre total that swaps on hover or focus, and a keyboard-selectable legend.
Preview
Visits by source, October
Pinned: DirectStorage
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 }[] | — | Segments in drawing order; colour defaults to --chart-1..5. |
| label | string | — | Accessible name of the chart. |
| variant | "donut" | "gauge" | "donut" | Full ring or semi-circle gauge. |
| max | number | total | Scale maximum; a larger value leaves an empty track. |
| size | number | 200 | Diameter in px. |
| thickness | number | 14% of size | Ring thickness in px. |
| gap | number | 3 | Gap between segments in px. |
| cornerRadius | number | 4 | Segment corner radius in px. |
| centerLabel | string | "Total" | Caption under the centre total. |
| valueFormatter | (value: number) => string | Intl number | Formats centre and legend values. |
| legend | boolean | true | Show the legend list with values and percentages. |
| selected | string | null | — | Controlled pinned segment key. |
| defaultSelected | string | null | null | Initial pinned segment when uncontrolled. |
| onSelectedChange | (key: string | null) => void | — | Called when a segment is pinned or unpinned. |
| locale | string | "en-US" | Locale of the default formatters. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.