Home›Pie & Donut›Half Donut Chart
NEWPie & Donut

Half Donut Chart

180-degree semi-circular donut gauge with animated reveal and central KPI metric. Ideal for goals, speedometers, and progress tracking.

Loading chart…
#donut#half-donut#semi-circle#gauge#kpi#animated
Customization Guides & Code Snippets

◆180° Semi-Circular Gauge Alignment

Configure startAngle={180} and endAngle={0} on the Recharts <Pie> component. Offset cy='75%' to position the arc at the upper hemisphere of the container.

<Pie
  data={data}
  cx="50%"
  cy="75%"
  startAngle={180}
  endAngle={0}
  innerRadius={85}
  outerRadius={125}
  paddingAngle={4}
  dataKey="value"
  cornerRadius={6}
/>

◆Center Gauge Metric Positioning

Place absolute-positioned KPI metric text at bottom: 22% and left: 50% with transform: translateX(-50%) to perfectly nestle into the hollow arc.

When to use a Half Donut Chart

A Half 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 Half 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
PROPTYPEDESCRIPTION
dataarrayArray of objects with name and value keys
dataKeystringThe key for segment values (usually 'value')
innerRadiusnumber | stringInner radius for donut charts (0 = solid pie)
outerRadiusnumber | stringOuter radius of the chart
paddingAnglenumberGap between segments in degrees
labelboolean | functionShow labels on segments
Frequently Asked Questions

What is a half donut chart?

A half donut chart (also called a semi-circle donut chart or semi-circular gauge) displays proportional data or KPI progress across a 180-degree arc instead of a full 360-degree circle. It is ideal for project completion meters, speedometers, and performance thresholds.

How do you configure a semi-circle donut in Recharts?

Pass startAngle={180} and endAngle={0} to the Recharts <Pie> component, and set cy='75%' so the half-circle sits comfortably in the upper hemisphere of the container.

Can I customize the inner and outer radius of a half donut chart?

Yes, adjusting innerRadius (e.g. 80-90) and outerRadius (e.g. 120-130) alters the thickness of the arc track to accommodate large central KPI typography.

Related Charts