Pie & Donut
Pie Chart with Custom Legend
Pie chart with a detailed custom legend showing values and percentages.
Loading chart…
#pie#legend#custom#percentage
Customization Guides & Code Snippets
◆Responsive Sizing with ResponsiveContainer
Always wrap your Pie & Donut chart inside <ResponsiveContainer width="100%" height={320}> to ensure it scales cleanly across mobile and desktop displays.
◆Custom Dark Theme Tooltip
Style the hover tooltip to match your dark UI with contentStyle={{ background: '#13161a', border: '1px solid #2a3038', borderRadius: 8 }}.
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