Pie & Donut
Pie Chart with Custom Legend
Pie chart with a detailed custom legend showing values and percentages.
Loading chart…
#pie#legend#custom#percentage
When to use a Pie Chart with Custom Legend
A Pie Chart with Custom Legend 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 Pie Chart with Custom Legend
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