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

> Renders pie chart sectors in a polar chart

Renders pie chart sectors in a polar chart. The Pie component displays data as wedges of a circle, where each wedge's arc length is proportional to the data value.

## Usage

```tsx theme={null}
import { PieChart, Pie } from 'recharts';

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
];

<PieChart width={400} height={400}>
  <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
</PieChart>
```

## Props

### Data and keys

<ParamField path="data" type="array">
  The source data array. Each element in the data array represents one sector of the pie.
</ParamField>

<ParamField path="dataKey" type="DataKey<any>" default="value">
  The key of a group of data which should be unique in a pie chart.

  Can be a string, number, function, or array path.
</ParamField>

<ParamField path="nameKey" type="DataKey<any>" default="name">
  The key of the name property in the data. Used for tooltips and legends.

  Can be a string, number, function, or array path.
</ParamField>

### Position and dimensions

<ParamField path="cx" type="number | string" default="50%">
  The x-coordinate of the pie center.

  If set as a percentage, the final value is obtained by multiplying the percentage with the container width.
</ParamField>

<ParamField path="cy" type="number | string" default="50%">
  The y-coordinate of the pie center.

  If set as a percentage, the final value is obtained by multiplying the percentage with the container height.
</ParamField>

<ParamField path="innerRadius" type="number | string" default="0">
  The inner radius of the sectors.

  If set as a percentage, the final value is obtained by multiplying the percentage with maxRadius.
  Set to a positive value to create a donut chart.
</ParamField>

<ParamField path="outerRadius" type="number | string | function" default="80%">
  The outer radius of the sectors.

  If set as a percentage, the final value is obtained by multiplying the percentage with maxRadius.
  Can also be a function that receives a data point and returns a number or string.
</ParamField>

<ParamField path="startAngle" type="number" default="0">
  The starting angle of the first sector, in degrees.
</ParamField>

<ParamField path="endAngle" type="number" default="360">
  The ending angle of the last sector, in degrees.
</ParamField>

<ParamField path="paddingAngle" type="number" default="0">
  The angle between two adjacent sectors, in degrees.
</ParamField>

<ParamField path="cornerRadius" type="number | string">
  The radius of the rounded corners of each sector.
</ParamField>

### Appearance

<ParamField path="fill" type="string" default="#808080">
  The fill color of the sectors.
</ParamField>

<ParamField path="stroke" type="string" default="#fff">
  The stroke color of the sectors.
</ParamField>

<ParamField path="strokeWidth" type="number">
  The stroke width of the sectors.
</ParamField>

### Behavior

<ParamField path="minAngle" type="number" default="0">
  The minimum angle of each non-zero data sector, in degrees.

  Useful for ensuring small values are still visible.
</ParamField>

<ParamField path="hide" type="boolean" default="false">
  If true, the pie will not be rendered.

  Hidden elements are still visible in the legend and can be included in axis domain calculations.
</ParamField>

### Labels

<ParamField path="label" type="boolean | object | ReactElement | function" default="false">
  Renders one label for each pie sector.

  Options:

  * `true`: renders default labels
  * `false`: no labels are rendered
  * `object` with `position` prop: props for LabelList component
  * `object` without `position` prop: props for custom Pie label with optional labelLine
  * `ReactElement`: custom label element
  * `function`: render function for custom label
</ParamField>

<ParamField path="labelLine" type="boolean | object | ReactElement | function" default="true">
  Controls the line connecting each label to its sector.

  Options:

  * `false`: no label lines
  * `true`: default label lines
  * `object`: props for the label line path element
  * `ReactElement`: custom label line element
  * `function`: render function for custom label line
</ParamField>

### Custom shapes

<ParamField path="shape" type="ReactNode | function">
  Custom shape for rendering pie sectors.

  Can be a React element or a function that receives sector props and returns a React element.
  The function receives `isActive` prop to distinguish active sectors.
</ParamField>

<ParamField path="activeShape" type="ActiveShape" deprecated>
  **Deprecated.** Use the `shape` prop instead. `isActive` designates the active shape.

  Custom shape rendered when a sector is activated (by mouse hover, keyboard, etc.).
</ParamField>

<ParamField path="inactiveShape" type="ActiveShape" deprecated>
  **Deprecated.** Use the `shape` prop instead.

  Custom shape for inactive sectors.
</ParamField>

### Animation

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If false, animation will be disabled.

  If "auto", animation is disabled in SSR and respects the user's prefers-reduced-motion preference.
</ParamField>

<ParamField path="animationBegin" type="number" default="400">
  Specifies when the animation should begin, in milliseconds.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Specifies the duration of animation, in milliseconds.
</ParamField>

<ParamField path="animationEasing" type="string" default="ease">
  The type of easing function.

  Options: 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'
</ParamField>

<ParamField path="onAnimationStart" type="function">
  Callback fired when animation starts.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  Callback fired when animation ends.
</ParamField>

### Display

<ParamField path="legendType" type="LegendType" default="rect">
  The type of icon in the legend.

  Options: 'line', 'plainline', 'square', 'rect', 'circle', 'cross', 'diamond', 'star', 'triangle', 'wye', 'none'
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  Valid tooltip types for this graphical item.
</ParamField>

<ParamField path="zIndex" type="number" default="100">
  The z-index of the pie sectors.

  Higher values render on top of lower values.
</ParamField>

### Interaction

<ParamField path="onClick" type="function">
  Event handler for click events on sectors.

  Signature: `(data: PieSectorDataItem, index: number, e: React.MouseEvent) => void`
</ParamField>

<ParamField path="onMouseEnter" type="function">
  Event handler for mouse enter events on sectors.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  Event handler for mouse leave events on sectors.
</ParamField>

<ParamField path="onMouseMove" type="function">
  Event handler for mouse move events on sectors.
</ParamField>

### Other

<ParamField path="id" type="string">
  Unique identifier for this pie instance.
</ParamField>

<ParamField path="className" type="string">
  CSS class name for the pie element.
</ParamField>

<ParamField path="rootTabIndex" type="number" default="0">
  The tabindex attribute of the wrapper element surrounding the sectors.
</ParamField>