Pie

Props

• activeShape(union of 5 variants)optional@deprecated

  Deprecated: Use the `shape` prop to create each sector. `isActive` designates the "active" shape.

  This component is rendered when this graphical item is activated (could be by mouse hover, touch, keyboard, programmatically).

  格式：

  <Pie activeShape={<CustomActiveShape />} />
  https://recharts.github.io/examples/CustomActiveShapePieChart

  示例：

  • Custom Active Shape Pie Chart

• animationBeginnumberoptional

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

  默认值：400

• animationDurationnumberoptional

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

  默认值：1500

• animationEasing"ease" | "ease-in" | "ease-in-out" | "ease-out" | "linear"optional

  The type of easing function.

  默认值："ease"

• childrenReactNodeoptional

  示例：

  • Cell Pie Example

• classNamestringoptional

• cornerRadiusnumber | stringoptional

  示例：

  • Pie Chart with gap and rounded corners

• cxnumber | stringoptional

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

  默认值："50%"

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Needle
  • Rendering into Shadow DOM

• cynumber | stringoptional

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

  默认值："50%"

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Needle
  • Rendering into Shadow DOM

• dangerouslySetInnerHTMLObjectoptional

• dataReadonlyArray<DataPointType>optional

  The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.

  Use the dataKey prop to specify which properties to use.

  格式：

  data={[{ name: 'a', value: 12 }]}
  data={[{ label: 'foo', measurements: [5, 12] }]}

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Customized Label
  • Pie Chart with gap and rounded corners
  • Pie Chart With Needle
  • Pie Chart in Grid
  • Pie Chart with Gradient
  • Pie Responsive Container

• dataKeyTypedDataKey<DataPointType, DataValueType>optional

  The data that you provide via the data prop is an array of objects. Each object can have multiple properties, each representing a different data dimension. Use the dataKey prop to specify which property (or dimension) to use for this component.

  Typically, you will want to have one dataKey on the X axis, and different dataKey on the Y axis, where they extract different values from the same data objects.

  Decides how to extract the value from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the value.

  默认值："value"

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Customized Label
  • Pie Chart with gap and rounded corners
  • Pie Chart With Needle
  • Pie Chart in Grid
  • Pie Chart with Gradient
  • Pie Responsive Container

• endAnglenumberoptional

  Angle, in degrees, at which the chart should end.

  默认值：360

  示例：

  • Straight Angle Pie Chart
  • Pie Chart With Needle

• hidebooleanoptional

  Hides the whole graphical element when true.

  Hiding an element is different from removing it from the chart: Hidden graphical elements are still visible in Legend, and can be included in axis domain calculations, depending on includeHidden props of your XAxis/YAxis.

  默认值：false

• idstringoptional

• inactiveShape(union of 5 variants)optional@deprecated

  Deprecated: Use the `shape` prop to modify each sector.

  The shape of inactive sector.

• innerRadiusnumber | stringoptional

  The inner radius of 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.

  默认值：0

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Custom Active Shape Pie Chart
  • Pie Chart with gap and rounded corners
  • Pie Chart With Needle
  • Pie Chart in Grid
  • Pie Chart with Gradient

• isAnimationActive"auto" | false | trueoptional

  If set false, animation will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.

  默认值："auto"

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart With Customized Label
  • Pie Chart with gap and rounded corners
  • Pie Chart in Grid
  • Pie Chart with Gradient
  • Cell Pie Example
  • Rendering into Shadow DOM

• label(union of 6 variants)optional

  Renders one label for each pie sector. Options:

  • true: renders default labels;
  • false: no labels are rendered;
  • object that has position prop: the props of LabelList component;
  • object that does not have position prop: the props of a custom Pie label (similar to Label with position "outside"); this variant supports labelLine
  • ReactElement: a custom label element;
  • function: a render function of custom label.

  Also see the labelLine prop that draws a line connecting each label to the corresponding sector.

  默认值：false

  格式：

  <Pie label={<CustomizedLabel />} />
  https://recharts.github.io/examples/PieChartWithCustomizedLabel

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Pie Chart With Customized Label
  • Pie Responsive Container
  • Rendering into Shadow DOM

• labelLine(union of 5 variants)optional

  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.

  默认值：true

  格式：

  <Pie labelLine={<CustomizedLabelLine />} />
  https://recharts.github.io/examples/PieChartWithCustomizedLabel

  示例：

  • Pie Chart With Customized Label
  • Rendering into Shadow DOM

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

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

  默认值："rect"

• maxRadiusnumberoptional

  the max radius of pie

• minAnglenumberoptional

  The minimum angle of each unzero data.

  默认值：0

• nameKeyTypedDataKey<DataPointType, DataValueType>optional

  Name represents each sector in the tooltip, and legend. This allows you to extract the name from the data:

  • string: the name of the field in the data object;
  • number: the index of the field in the data;
  • function: a function that receives the data object and returns the name.

  默认值："name"

  示例：

  • Pie Chart in Grid

• outerRadiusFunction | number | stringoptional

  The outer radius of 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.

  默认值："80%"

  示例：

  • Two Level Pie Chart
  • Pie Chart Example
  • Straight Angle Pie Chart
  • Custom Active Shape Pie Chart
  • Pie Chart with gap and rounded corners
  • Pie Chart With Needle
  • Pie Chart in Grid
  • Rendering into Shadow DOM

• paddingAnglenumberoptional

  The angle between two sectors.

  默认值：0

  格式：

  <Pie paddingAngle={5} />
  https://recharts.github.io/examples/PieChartWithPaddingAngle

  示例：

  • Pie Chart with gap and rounded corners

• rootTabIndexnumberoptional

  The tabindex of wrapper surrounding the cells.

  默认值：0

• shape(union of 8 variants)optional

  The custom shape of a Pie Sector. Can also be used to render active sector by checking isActive. If undefined, renders Sector shape.

  示例：

  • Pie Chart With Customized Label
  • Pie Chart with Gradient
  • Cell Pie Example

• startAnglenumberoptional

  Angle in degrees from which the chart should start.

  默认值：0

  示例：

  • Straight Angle Pie Chart
  • Pie Chart With Needle

• tooltipType"none"optional

• zIndexnumberoptional

  默认值：100

• onAbortAdaptChildReactEventHandler<P, T>optional

• onAbortCaptureAdaptChildReactEventHandler<P, T>optional

• onAnimationEndAdaptChildAnimationEventHandler<P, T>optional

  The customized event handler of animation end.

• onAnimationEndCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationAdaptChildAnimationEventHandler<P, T>optional

• onAnimationIterationCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAnimationStartAdaptChildAnimationEventHandler<P, T>optional

  The customized event handler of animation start.

• onAnimationStartCaptureAdaptChildAnimationEventHandler<P, T>optional

• onAuxClickAdaptChildMouseEventHandler<P, T>optional

• onAuxClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onBeforeInputAdaptChildFormEventHandler<P, T>optional

• onBeforeInputCaptureAdaptChildFormEventHandler<P, T>optional

• onBlurAdaptChildFocusEventHandler<P, T>optional

• onBlurCaptureAdaptChildFocusEventHandler<P, T>optional

• onCanPlayAdaptChildReactEventHandler<P, T>optional

• onCanPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughAdaptChildReactEventHandler<P, T>optional

• onCanPlayThroughCaptureAdaptChildReactEventHandler<P, T>optional

• onChangeAdaptChildFormEventHandler<P, T>optional

• onChangeCaptureAdaptChildFormEventHandler<P, T>optional

• onClickFunctionoptional

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

• onClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onCompositionEndAdaptChildCompositionEventHandler<P, T>optional

• onCompositionEndCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartAdaptChildCompositionEventHandler<P, T>optional

• onCompositionStartCaptureAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateAdaptChildCompositionEventHandler<P, T>optional

• onCompositionUpdateCaptureAdaptChildCompositionEventHandler<P, T>optional

• onContextMenuAdaptChildMouseEventHandler<P, T>optional

• onContextMenuCaptureAdaptChildMouseEventHandler<P, T>optional

• onCopyAdaptChildClipboardEventHandler<P, T>optional

• onCopyCaptureAdaptChildClipboardEventHandler<P, T>optional

• onCutAdaptChildClipboardEventHandler<P, T>optional

• onCutCaptureAdaptChildClipboardEventHandler<P, T>optional

• onDoubleClickAdaptChildMouseEventHandler<P, T>optional

• onDoubleClickCaptureAdaptChildMouseEventHandler<P, T>optional

• onDragAdaptChildDragEventHandler<P, T>optional

• onDragCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEndAdaptChildDragEventHandler<P, T>optional

• onDragEndCaptureAdaptChildDragEventHandler<P, T>optional

• onDragEnterAdaptChildDragEventHandler<P, T>optional

• onDragEnterCaptureAdaptChildDragEventHandler<P, T>optional

• onDragExitAdaptChildDragEventHandler<P, T>optional

• onDragExitCaptureAdaptChildDragEventHandler<P, T>optional

• onDragLeaveAdaptChildDragEventHandler<P, T>optional

• onDragLeaveCaptureAdaptChildDragEventHandler<P, T>optional

• onDragOverAdaptChildDragEventHandler<P, T>optional

• onDragOverCaptureAdaptChildDragEventHandler<P, T>optional

• onDragStartAdaptChildDragEventHandler<P, T>optional

• onDragStartCaptureAdaptChildDragEventHandler<P, T>optional

• onDropAdaptChildDragEventHandler<P, T>optional

• onDropCaptureAdaptChildDragEventHandler<P, T>optional

• onDurationChangeAdaptChildReactEventHandler<P, T>optional

• onDurationChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onEmptiedAdaptChildReactEventHandler<P, T>optional

• onEmptiedCaptureAdaptChildReactEventHandler<P, T>optional

• onEncryptedAdaptChildReactEventHandler<P, T>optional

• onEncryptedCaptureAdaptChildReactEventHandler<P, T>optional

• onEndedAdaptChildReactEventHandler<P, T>optional

• onEndedCaptureAdaptChildReactEventHandler<P, T>optional

• onErrorAdaptChildReactEventHandler<P, T>optional

• onErrorCaptureAdaptChildReactEventHandler<P, T>optional

• onFocusAdaptChildFocusEventHandler<P, T>optional

• onFocusCaptureAdaptChildFocusEventHandler<P, T>optional

• onGotPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onGotPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onInputAdaptChildFormEventHandler<P, T>optional

• onInputCaptureAdaptChildFormEventHandler<P, T>optional

• onInvalidAdaptChildFormEventHandler<P, T>optional

• onInvalidCaptureAdaptChildFormEventHandler<P, T>optional

• onKeyDownAdaptChildKeyboardEventHandler<P, T>optional

• onKeyDownCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressAdaptChildKeyboardEventHandler<P, T>optional

• onKeyPressCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpAdaptChildKeyboardEventHandler<P, T>optional

• onKeyUpCaptureAdaptChildKeyboardEventHandler<P, T>optional

• onLoadAdaptChildReactEventHandler<P, T>optional

• onLoadCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedDataAdaptChildReactEventHandler<P, T>optional

• onLoadedDataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataAdaptChildReactEventHandler<P, T>optional

• onLoadedMetadataCaptureAdaptChildReactEventHandler<P, T>optional

• onLoadStartAdaptChildReactEventHandler<P, T>optional

• onLoadStartCaptureAdaptChildReactEventHandler<P, T>optional

• onLostPointerCaptureAdaptChildPointerEventHandler<P, T>optional

• onLostPointerCaptureCaptureAdaptChildPointerEventHandler<P, T>optional

• onMouseDownFunctionoptional

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

• onMouseDownCaptureAdaptChildMouseEventHandler<P, T>optional

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

• onMouseMoveFunctionoptional

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

• onMouseMoveCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOutFunctionoptional

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

• onMouseOutCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseOverFunctionoptional

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

• onMouseOverCaptureAdaptChildMouseEventHandler<P, T>optional

• onMouseUpFunctionoptional

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

• onMouseUpCaptureAdaptChildMouseEventHandler<P, T>optional

• onPasteAdaptChildClipboardEventHandler<P, T>optional

• onPasteCaptureAdaptChildClipboardEventHandler<P, T>optional

• onPauseAdaptChildReactEventHandler<P, T>optional

• onPauseCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayAdaptChildReactEventHandler<P, T>optional

• onPlayCaptureAdaptChildReactEventHandler<P, T>optional

• onPlayingAdaptChildReactEventHandler<P, T>optional

• onPlayingCaptureAdaptChildReactEventHandler<P, T>optional

• onPointerCancelAdaptChildPointerEventHandler<P, T>optional

• onPointerCancelCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerDownAdaptChildPointerEventHandler<P, T>optional

• onPointerDownCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterAdaptChildPointerEventHandler<P, T>optional

• onPointerEnterCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveAdaptChildPointerEventHandler<P, T>optional

• onPointerLeaveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveAdaptChildPointerEventHandler<P, T>optional

• onPointerMoveCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOutAdaptChildPointerEventHandler<P, T>optional

• onPointerOutCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerOverAdaptChildPointerEventHandler<P, T>optional

• onPointerOverCaptureAdaptChildPointerEventHandler<P, T>optional

• onPointerUpAdaptChildPointerEventHandler<P, T>optional

• onPointerUpCaptureAdaptChildPointerEventHandler<P, T>optional

• onProgressAdaptChildReactEventHandler<P, T>optional

• onProgressCaptureAdaptChildReactEventHandler<P, T>optional

• onRateChangeAdaptChildReactEventHandler<P, T>optional

• onRateChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onResetAdaptChildFormEventHandler<P, T>optional

• onResetCaptureAdaptChildFormEventHandler<P, T>optional

• onScrollAdaptChildUIEventHandler<P, T>optional

• onScrollCaptureAdaptChildUIEventHandler<P, T>optional

• onSeekedAdaptChildReactEventHandler<P, T>optional

• onSeekedCaptureAdaptChildReactEventHandler<P, T>optional

• onSeekingAdaptChildReactEventHandler<P, T>optional

• onSeekingCaptureAdaptChildReactEventHandler<P, T>optional

• onSelectAdaptChildReactEventHandler<P, T>optional

• onSelectCaptureAdaptChildReactEventHandler<P, T>optional

• onStalledAdaptChildReactEventHandler<P, T>optional

• onStalledCaptureAdaptChildReactEventHandler<P, T>optional

• onSubmitAdaptChildFormEventHandler<P, T>optional

• onSubmitCaptureAdaptChildFormEventHandler<P, T>optional

• onSuspendAdaptChildReactEventHandler<P, T>optional

• onSuspendCaptureAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateAdaptChildReactEventHandler<P, T>optional

• onTimeUpdateCaptureAdaptChildReactEventHandler<P, T>optional

• onTouchCancelAdaptChildTouchEventHandler<P, T>optional

• onTouchCancelCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchEndFunctionoptional

• onTouchEndCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchMoveFunctionoptional

• onTouchMoveCaptureAdaptChildTouchEventHandler<P, T>optional

• onTouchStartFunctionoptional

• onTouchStartCaptureAdaptChildTouchEventHandler<P, T>optional

• onTransitionEndAdaptChildTransitionEventHandler<P, T>optional

• onTransitionEndCaptureAdaptChildTransitionEventHandler<P, T>optional

• onVolumeChangeAdaptChildReactEventHandler<P, T>optional

• onVolumeChangeCaptureAdaptChildReactEventHandler<P, T>optional

• onWaitingAdaptChildReactEventHandler<P, T>optional

• onWaitingCaptureAdaptChildReactEventHandler<P, T>optional

• onWheelAdaptChildWheelEventHandler<P, T>optional

• onWheelCaptureAdaptChildWheelEventHandler<P, T>optional