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

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

data · array

The source data array. Each element in the data array represents one sector of the pie.

dataKey · 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.

nameKey · 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.

Position and dimensions

cx · 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.

cy · 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.

innerRadius · 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.

outerRadius · 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.

startAngle · number · default: "0"

The starting angle of the first sector, in degrees.

endAngle · number · default: "360"

The ending angle of the last sector, in degrees.

paddingAngle · number · default: "0"

The angle between two adjacent sectors, in degrees.

cornerRadius · number | string

The radius of the rounded corners of each sector.

Appearance

fill · string · default: "#808080"

The fill color of the sectors.

stroke · string · default: "#fff"

The stroke color of the sectors.

strokeWidth · number

The stroke width of the sectors.

Behavior

minAngle · number · default: "0"

The minimum angle of each non-zero data sector, in degrees.

Useful for ensuring small values are still visible.

hide · 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.

Labels

label · 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

labelLine · 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

Custom shapes

shape · 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.

activeShape · 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.).

inactiveShape · ActiveShape · deprecated

Deprecated. Use the shape prop instead.

Custom shape for inactive sectors.

Animation

isAnimationActive · 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.

animationBegin · number · default: "400"

Specifies when the animation should begin, in milliseconds.

animationDuration · number · default: "1500"

Specifies the duration of animation, in milliseconds.

animationEasing · string · default: "ease"

The type of easing function.

Options: ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘linear’

onAnimationStart · function

Callback fired when animation starts.

onAnimationEnd · function

Callback fired when animation ends.

Display

legendType · LegendType · default: "rect"

The type of icon in the legend.

Options: ‘line’, ‘plainline’, ‘square’, ‘rect’, ‘circle’, ‘cross’, ‘diamond’, ‘star’, ‘triangle’, ‘wye’, ‘none’

tooltipType · TooltipType

Valid tooltip types for this graphical item.

zIndex · number · default: "100"

The z-index of the pie sectors.

Higher values render on top of lower values.

Interaction

onClick · function

Event handler for click events on sectors.

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

onMouseEnter · function

Event handler for mouse enter events on sectors.

onMouseLeave · function

Event handler for mouse leave events on sectors.

onMouseMove · function

Event handler for mouse move events on sectors.

Other

id · string

Unique identifier for this pie instance.

className · string

CSS class name for the pie element.

rootTabIndex · number · default: "0"

The tabindex attribute of the wrapper element surrounding the sectors.