Donut Chart
Display part-to-whole relationships as proportional slices around a central hole. Supports rounded corners, inside/outside labels, center KPI display, and small multiples. A modern alternative to pie charts with better visual hierarchy.
Examples
When to Use
- Showing how a total breaks down into component parts
- Budget allocation or revenue share by category
- Market share distribution across competitors
- Any part-to-whole comparison with 3-7 categories
Data Roles
Settings
Donut Chart
Inner Radius
numberRatio of the inner hole to the outer radius (0.2-0.85).
Default:0.67Slice Padding
numberGap between slices in radians.
Default:0.02Rounded Corners
booleanApply rounded corners to slice edges.
Default:trueCorner Radius
numberRadius of rounded corners in pixels.
Default:6Show Center
booleanDisplay a label and value in the center hole.
Default:trueCenter Label
stringText shown above the center value.
Default:TotalCenter Value
dropdownWhat to display in the center: total or none.
Default:totalHover Highlight
booleanEnlarge the hovered slice for emphasis.
Default:trueData Labels
Show Labels
booleanDisplay labels on or near slices.
Default:trueLabel Content
dropdownWhat to show: category, value, percent, or combinations.
Default:categoryPercentLabel Position
dropdownPlace labels inside slices or outside with leader lines.
Default:insideAuto Fit
booleanAutomatically shrink or hide labels that overflow.
Default:trueOverflow To Outside
booleanMove labels outside when they do not fit inside the slice.
Default:trueColor & Appearance
Color Scheme
dropdownControls the color palette for slices.
Default:rainbowCommon settings like Legend, Tooltip, and Small Multiples configuration are covered in Shared Concepts.
Tips & Best Practices
- Keep slices under 7 for readability -- combine small categories into "Other"
- Use the center label to display a meaningful total or KPI
- Enable "Overflow To Outside" for small slices that cannot fit labels inside