Home›Pie & Donut›Circle Chart (Proportional Segments)
NEWPOPULARPie & Donut

Circle Chart (Proportional Segments)

Circular proportional segment chart with interactive slice inspection, user distribution metrics, and center summary.

Loading chart…
#circle#pie#proportional#distribution#segments
Customization Guides & Code Snippets

◆Active Sector Expansion on Hover

Implement activeShape={renderActiveShape} on <Pie> to expand the hovered sector outward with a glowing halo ring on user mouseover.

const renderActiveShape = (props: any) => {
  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
  return (
    <g>
      <Sector cx={cx} cy={cy} innerRadius={innerRadius - 4} outerRadius={outerRadius + 8} startAngle={startAngle} endAngle={endAngle} fill={fill} cornerRadius={6} />
      <Sector cx={cx} cy={cy} innerRadius={outerRadius + 12} outerRadius={outerRadius + 15} startAngle={startAngle} endAngle={endAngle} fill={fill} opacity={0.4} />
    </g>
  );
};
When to use a Circle Chart (Proportional Segments)

A Circle Chart (Proportional Segments) 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 Circle Chart (Proportional Segments)
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 circle chart?

A circle chart is any circular data visualization—including proportional donut charts, pie circle charts, and Venn-style overlapping distribution graphs—that illustrates part-to-whole segment breakdown and audience overlap.

What is the difference between a circle chart and a pie chart?

A traditional pie chart is a solid filled disk, while modern circle charts often incorporate hollowed donut centers, multi-ring concentric tracks, or active exploded sectors with floating KPI tags.

How do you build an interactive circle chart with active sector highlights in React?

Pass activeShape={renderActiveShape} and activeIndex state to Recharts <Pie>. When users hover over a slice, Recharts draws an enlarged <Sector> with an outer halo ring.

Related Charts