Pie chart

Examples and usage of PieChart component

The PieChart component displays data as slices of a circular chart. It’s ideal for showing proportions and percentages of a whole.

Basic pie chart

import { PieChart, Pie, Cell, Tooltip, Legend } from 'recharts';

const data = [
  { name: '18-24', value: 31.47, fill: '#8884d8' },
  { name: '25-29', value: 26.69, fill: '#83a6ed' },
  { name: '30-34', value: 15.69, fill: '#8dd1e1' },
  { name: '35-39', value: 8.22, fill: '#82ca9d' },
  { name: '40-49', value: 8.63, fill: '#a4de6c' },
  { name: '50+', value: 2.63, fill: '#d0ed57' },
];

function Example() {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={data}
        dataKey="value"
        nameKey="name"
        cx="50%"
        cy="50%"
        outerRadius={100}
        fill="#8884d8"
      />
      <Tooltip />
      <Legend />
    </PieChart>
  );
}

Donut chart

<PieChart width={400} height={400}>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={100}
    fill="#8884d8"
  />
  <Tooltip />
  <Legend />
</PieChart>

Set innerRadius to create a donut chart. The larger the inner radius, the thinner the donut.

Custom colors with Cell

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8'];

<PieChart width={400} height={400}>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    outerRadius={100}
  >
    {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
    ))}
  </Pie>
  <Tooltip />
  <Legend />
</PieChart>

Pie with labels

Outside labels

<Pie
  data={data}
  dataKey="value"
  nameKey="name"
  cx="50%"
  cy="50%"
  outerRadius={100}
  fill="#8884d8"
  label
/>

Center label (donut)

import { Label } from 'recharts';

<PieChart width={400} height={400}>
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    innerRadius={60}
    outerRadius={100}
    fill="#8884d8"
  >
    <Label value="Total" position="center" fill="#000" fontSize={16} fontWeight="bold" dy={-10} />
    <Label value="100%" position="center" fontSize={14} dy={10} />
  </Pie>
  <Tooltip />
</PieChart>

Multiple pies

<PieChart width={800} height={400}>
  <Pie
    data={data}
    dataKey="value"
    cx="25%"
    cy="50%"
    outerRadius={80}
    fill="#8884d8"
  />
  <Pie
    data={data}
    dataKey="value"
    cx="75%"
    cy="50%"
    innerRadius={40}
    outerRadius={80}
    fill="#82ca9d"
  />
  <Tooltip />
</PieChart>

Active shape

import { Sector } from 'recharts';
import { useState } from 'react';

function Example() {
  const [activeIndex, setActiveIndex] = useState(0);

  const renderActiveShape = (props) => {
    const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
    return (
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius + 10}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
    );
  };

  return (
    <PieChart width={400} height={400}>
      <Pie
        activeIndex={activeIndex}
        activeShape={renderActiveShape}
        data={data}
        dataKey="value"
        cx="50%"
        cy="50%"
        outerRadius={100}
        fill="#8884d8"
        onMouseEnter={(_, index) => setActiveIndex(index)}
      />
    </PieChart>
  );
}

Pie with padding angle

<Pie
  data={data}
  dataKey="value"
  cx="50%"
  cy="50%"
  outerRadius={100}
  fill="#8884d8"
  paddingAngle={5}
/>

Custom start and end angle

Semi-circle

<PieChart width={400} height={250}>
  <Pie
    data={data}
    dataKey="value"
    cx="50%"
    cy="100%"
    startAngle={180}
    endAngle={0}
    outerRadius={150}
    fill="#8884d8"
  />
</PieChart>

Common pitfalls

• Missing dataKey: Always specify dataKey to tell Recharts which field contains the slice values.
• Colors: If you don’t use <Cell> components or fill property on data items, all slices will use the default color.
• Tooltip event type: PieChart only supports 'item' tooltip event type.
• Center positioning: Use cx and cy as percentages (e.g., "50%") for responsive centering.
• Label overlap: When using labels on small slices, consider using labelLine={false} or custom label rendering.