<Recharts />

Pie

Properties

• cxPercentage | Number

  The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.

  DEFAULT: '50%'

• cyPercentage | Number

  The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.

  DEFAULT: '50%'

• innerRadiusPercentage | Number

  The inner radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.

  DEFAULT: 0

• outerRadiusPercentage | Number | Function

  The outer radius of all the sectors. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Function should return a string percentage or number

  DEFAULT: '80%'

• startAngleNumber

  The start angle of first sector.

  DEFAULT: 0

• endAngleNumber

  The end angle of last sector, which should be unequal to startAngle.

  DEFAULT: 360

• minAngleNumber

  The minimum angle of each unzero data.

  DEFAULT: 0

• paddingAngleNumber

  The angle between two sectors.

  DEFAULT: 0

  Examples:

  • Pie with nozero padding angle

• nameKeyString

  The key of each sector's name.

  DEFAULT: 'name'

• dataKeyString | Number | Function

  The key of each sector's value.

• valueKeyString@deprecated

  Use 'dataKey' alternatively, The key of each sector's value.

  DEFAULT: 'value'

• legendType'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'

  The type of icon in legend. If set to 'none', no legend item will be rendered.

  DEFAULT: 'rect'

• labelBoolean | Object | ReactElement | Functionoptional

  If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. If object set, labels will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label.

  DEFAULT: false

  Examples:

  • A pie chart with customized label

• labelLineBoolean | Object | ReactElement | Function

  If false set, label lines will not be drawn. If true set, label lines will be drawn which have the props calculated internally. If object set, label lines will be drawn which have the props merged by the internal calculated props and the option. If ReactElement set, the option can be the custom label line element. If set a function, the function will be called to render customized label line.

  DEFAULT: false

  Examples:

  • A pie chart with customized label

• dataArray

  The source data which each element is an object.

• activeShapeObject | ReactElement | Function

  The shape of active sector.

  Examples:

  • A pie chart with customized active shape

• inactiveShapeObject | ReactElement | Function

  The shape of inactive sector.

• isAnimationActiveBoolean

  If set false, animation of pie will be disabled.

  DEFAULT: true in CSR, and false in SSR

• animationBeginNumber

  Specifies when the animation should begin, the unit of this option is ms.

  DEFAULT: 400

• animationDurationNumber

  Specifies the duration of animation, the unit of this option is ms.

  DEFAULT: 1500

• animationEasing'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | Function

  The type of easing function.

  DEFAULT: 'ease'

• rootTabIndexNumberoptional

  The tabindex of wrapper surrounding the cells.

  DEFAULT: 0

• onAnimationStartFunctionoptional

  The customized event handler of animation start

• onAnimationEndFunctionoptional

  The customized event handler of animation end

• onClickFunctionoptional

  The customized event handler of click on the sectors in this group

• onMouseDownFunctionoptional

  The customized event handler of mousedown on the sectors in this group

• onMouseUpFunctionoptional

  The customized event handler of mouseup on the sectors in this group

• onMouseMoveFunctionoptional

  The customized event handler of mousemove on the sectors in this group

• onMouseOverFunctionoptional

  The customized event handler of mouseover on the sectors in this group

• onMouseOutFunctionoptional

  The customized event handler of mouseout on the sectors in this group

• onMouseEnterFunctionoptional

  The customized event handler of mouseenter on the sectors in this group

• onMouseLeaveFunctionoptional

  The customized event handler of mouseleave on the sectors in this group