Skip to content

PieArcPlot API

API reference docs for the React PieArcPlot component. Learn about the props, CSS, and other APIs of this exported module.

Demos

Import

import { PieArcPlot } from '@mui/x-charts/PieChart';
// or
import { PieArcPlot } from '@mui/x-charts';
// or
import { PieArcPlot } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
outerRadius*number-

The radius between circle center and the end of the arc.

arcLabelRadiusnumber(innerRadius - outerRadius) / 2

The radius between circle center and the arc label in px.

cornerRadiusnumber0

The radius applied to arc corners (similar to border radius).

faded{ additionalRadius?: number, arcLabelRadius?: number, color?: string, cornerRadius?: number, innerRadius?: number, outerRadius?: number, paddingAngle?: number }{ additionalRadius: -5 }

Override the arc attributes when it is faded.

highlighted{ additionalRadius?: number, arcLabelRadius?: number, color?: string, cornerRadius?: number, innerRadius?: number, outerRadius?: number, paddingAngle?: number }-

Override the arc attributes when it is highlighted.

innerRadiusnumber0

The radius between circle center and the beginning of the arc.

onItemClickfunc-

Callback fired when a pie item is clicked.

Signature:function(event: React.MouseEvent, pieItemIdentifier: PieItemIdentifier, item: DefaultizedPieValueType) => void
  • event The event source of the callback.
  • pieItemIdentifier The pie item identifier.
  • item The pie item.
paddingAnglenumber0

The padding angle (deg) between two arcs.

skipAnimationboolfalse

If true, animations are skipped.

slotPropsobject{}

The props used for each component slot.

slotsobject{}

Overridable component slots.

See Slots API below for more details.

The component cannot hold a ref.

Slots

Slot nameClass nameDefault componentDescription
pieArc

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.