> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```jsx theme={null}
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

```jsx theme={null}
<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>
```

<Note>
  Set `innerRadius` to create a donut chart. The larger the inner radius, the thinner the donut.
</Note>

## Custom colors with Cell

```jsx theme={null}
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

<CodeGroup>
  ```jsx Outside labels theme={null}
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    outerRadius={100}
    fill="#8884d8"
    label
  />
  ```

  ```jsx Custom label theme={null}
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    outerRadius={100}
    fill="#8884d8"
    label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
  />
  ```

  ```jsx Label line theme={null}
  <Pie
    data={data}
    dataKey="value"
    nameKey="name"
    cx="50%"
    cy="50%"
    outerRadius={100}
    fill="#8884d8"
    label
    labelLine={{ stroke: '#8884d8', strokeWidth: 1 }}
  />
  ```
</CodeGroup>

## Center label (donut)

```jsx theme={null}
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

```jsx theme={null}
<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

```jsx theme={null}
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

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

## Custom start and end angle

<CodeGroup>
  ```jsx Semi-circle theme={null}
  <PieChart width={400} height={250}>
    <Pie
      data={data}
      dataKey="value"
      cx="50%"
      cy="100%"
      startAngle={180}
      endAngle={0}
      outerRadius={150}
      fill="#8884d8"
    />
  </PieChart>
  ```

  ```jsx Three-quarter circle theme={null}
  <Pie
    data={data}
    dataKey="value"
    cx="50%"
    cy="50%"
    startAngle={0}
    endAngle={270}
    outerRadius={100}
    fill="#8884d8"
  />
  ```
</CodeGroup>

## 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.