Sunburst chart
Hierarchical rings with fitting arc labels, path highlight with a breadcrumb readout, and click to zoom into a branch with a centre back button.
Preview
Where visits come from
October · 36,810 visits- Search: 18.4K, 50% of All traffic. Press Enter to open
- Search › Brand: 10.3K, 28% of All traffic. Press Enter to open
- Search › Brand › Desktop: 6.2K, 16.8% of All traffic
- Search › Brand › Mobile: 4.1K, 11.1% of All traffic
- Search › Generic: 8.1K, 22% of All traffic. Press Enter to open
- Search › Generic › Desktop: 3.8K, 10.3% of All traffic
- Search › Generic › Mobile: 4.3K, 11.7% of All traffic
- Direct: 9.3K, 25.3% of All traffic. Press Enter to open
- Direct › App: 5.1K, 13.9% of All traffic
- Direct › Typed: 4.2K, 11.4% of All traffic
- Referral: 5.2K, 14.2% of All traffic. Press Enter to open
- Referral › Forum: 2.4K, 6.5% of All traffic
- Referral › Partners: 1.7K, 4.6% of All traffic
- Referral › Press: 1.1K, 3.1% of All traffic
- Social: 3.9K, 10.5% of All traffic. Press Enter to open
- Social › Video: 2.1K, 5.7% of All traffic
- Social › Posts: 1.8K, 4.8% of All traffic
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { key: string; label: string; value?: number; children?: SunburstNode[]; color?: string } | — | Root node; groups sum their children. |
| label | string | — | Accessible name of the chart. |
| size | number | 320 | Diameter in px. |
| depth | number | 3 | Rings shown below the current centre. |
| valueFormatter | (value: number) => string | compact | Formats values. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.