Pie
Parent Components
Child Components
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:
nameKeyString
The key of each sector's name.
DEFAULT: 'name'
dataKeyString | Number | Function
The key of each sector's 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:
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:
dataArray
The source data which each element is an object.
activeShapeObject | ReactElement | Function
The shape of active sector.
Examples:
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