Donut Chart
Composition of a whole, with room in the middle for the total it adds up to.
Use the hole
The center is the donut's advantage over a pie: it can state the total the slices divide up. Without it you've got a pie with a hole in it.
$2.44Mof revenue
Keep the slice count low
Past five or six slices the small ones stop being distinguishable. Group the tail into an "Other" entry, or use a Bar Chart, which stays readable at any number of categories.
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number }[] | One slice per entry. Values are summed, so they don't need to total 100. | |
| centerValue | string | Large figure in the hole. Pre-formatted, so you control currency and rounding. | |
| centerCaption | string | Small caption under the center value. | |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Preset diameter. |
| height | number | Pixel height override; takes precedence over size. |