Donut Chart
Multi-segment donut with animated reveal and center label. Great for showing proportions.
◆Centering KPI Values in Donut Hole
Use absolute positioning inside a relative container or SVG text elements centered at 50% width and 50% height for clean responsive metric callouts.
<div style={{ position: 'relative' }}>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie data={data} innerRadius={75} outerRadius={115} dataKey="value" />
</PieChart>
</ResponsiveContainer>
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center' }}>
<div style={{ fontSize: 24, fontWeight: 800 }}>$124.5K</div>
<div style={{ fontSize: 12, color: '#5c6370' }}>Total Revenue</div>
</div>
</div>◆Donut Chart vs. Pie Chart: Proportions & Space
Donut charts improve on traditional pie charts by hollowed center space that accommodates overall totals or key metrics. Studies demonstrate that users gauge arc lengths more accurately than acute slice angles, especially across 3 to 6 categories.
◆Animated Donut Reveal Configuration
Fine-tune transition animations by passing isAnimationActive, animationDuration={900}, and animationEasing='ease-out' directly to the <Pie> component.
<Pie
data={data}
dataKey="value"
innerRadius={75}
outerRadius={120}
isAnimationActive={true}
animationDuration={900}
animationEasing="ease-out"
/>◆Converting to a Half Donut Chart (Semi-Circle)
Set startAngle={180} and endAngle={0} with cy='75%' to transform standard 360-degree donuts into a 180-degree gauge or progress speedometer.
<Pie
data={data}
cx="50%"
cy="75%"
startAngle={180}
endAngle={0}
innerRadius={80}
outerRadius={125}
dataKey="value"
/>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
What is a donut chart and when should you use it?
A donut chart is a circular statistical graphic with a hollow center (resembling a donut) divided into proportional slices. Unlike standard pie charts, the hollow center can display summary totals or KPI metrics, while readers compare proportional arc lengths rather than angles. It is best used for 3 to 6 categorical proportions that add up to 100%.
Donut chart vs. pie chart: which is better?
Donut charts are generally preferred in modern SaaS dashboards because the center cutout provides valuable real estate for key metrics or total values. Furthermore, studies in data visualization show that human perception assesses arc circumference more quickly and accurately than acute angles.
How do you add a center label or KPI to a React donut chart?
In Recharts, wrap the <ResponsiveContainer> inside a relative container and position an absolute-centered div at top: 50%, left: 50% with transform: translate(-50%, -50%). Alternatively, render SVG <text> elements with textAnchor='middle' at the chart's cx and cy coordinates.
How do you create a half donut chart in React with Recharts?
Set startAngle={180} and endAngle={0} on the <Pie> component, and offset cy='75%' to render a 180-degree semi-circular arc that resembles a speedometer gauge.