Pie & Donut
Donut Chart
Multi-segment donut with animated reveal and center label. Great for showing proportions.
Loading chart…
#donut#pie#animated#label
When to use a Donut Chart
A Donut Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:
- ✓Showing how parts make up a whole (e.g. traffic sources as % of total)
- ✓Displaying budget or resource allocation
- ✓Visualizing market share between competitors
- ✓Showing device or browser breakdown — best with 5 or fewer segments
Tips for Recharts Donut Chart
TIP 1Limit to 5–6 segments maximum — more than that, use a bar chart instead
TIP 2Use paddingAngle={2} to add space between segments for clarity
TIP 3Always add a Tooltip so users can see exact percentages
TIP 4For donut charts, add a center label with the total value
TIP 5Order segments from largest to smallest starting at 12 o'clock
Key Recharts Props