Charts - Pie demonstration

This page groups demonstration using pie charts.

TwoLevelPieChart

StraightAnglePieChart

Group A
Group B
Group C
Group D
Group E
Group F

<PieChart
  series={[
    {
      startAngle: -90,
      endAngle: 90,
      data,
    },
  ]}
  height={300}
  width={300}
/>

<PieChart
  series={[
    {
      startAngle: -90,
      endAngle: 90,
      data,
    },
  ]}
  height={300}
  width={300}
/>

Press Enter to start editing

TwoSimplePieChart

PieChartWithCustomizedLabel

<PieChart
  series={[
    {
      outerRadius: 80,
      data,
      arcLabel: getArcLabel,
    },
  ]}
  sx={{
    [`& .${pieArcLabelClasses.root}`]: {
      fill: 'white',
      fontSize: 14,
    },
  }}
  {...sizing}
/>

<PieChart
  series={[
    {
      outerRadius: 80,
      data,
      arcLabel: getArcLabel,
    },
  ]}
  sx={{
    [`& .${pieArcLabelClasses.root}`]: {
      fill: 'white',
      fontSize: 14,
    },
  }}
  {...sizing}
/>

Press Enter to start editing

PieChartWithPaddingAngle

PieChartWithCenterLabel

<PieChart series={[{ data, innerRadius: 80 }]} {...size}>
  <PieCenterLabel>Center label</PieCenterLabel>
</PieChart>

<PieChart series={[{ data, innerRadius: 80 }]} {...size}>
  <PieCenterLabel>Center label</PieCenterLabel>
</PieChart>

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.