Donut chart
Place a total or active value inside a category breakdown.
Usage
Arc defaults to a donut. Change innerRadius to control the opening and compose Label inside Plot for center content.
Place Legend and Tooltip directly inside Root. Their snippets receive the formatted value and the percentage of the current total.
Total in the center
Replay preview Full screen Code
Where visitors come from
Sessions by acquisition channel this month.
| Category | Value |
|---|---|
| Direct | 1,240 |
| Search | 860 |
| Referral | 420 |
Switch periods
Replay preview Full screen Code
Monthly plans
| Category | Value |
|---|---|
| Team | 420 |
| Solo | 580 |
Custom center and legend
Replay preview Full screen Code
Infrastructure spend
This month, before tax.
| Category | Value |
|---|---|
| Storage | $1,840 |
| Compute | $3,260 |
| Network | $900 |
Data and animation states
Full screen Code
| Category | Value |
|---|---|
| Completed | 72 |
| Remaining | 28 |
API reference
See the shared API reference for every part and prop.