Charts - Pie demonstration

This page groups demonstration using pie charts.

TwoLevelPieChart

<PieChart
  series={[
    {
      innerRadius: 0,
      outerRadius: 80,
      data: data1,
    },
    {
      innerRadius: 100,
      outerRadius: 120,
      data: data2,
    },
  ]}
  height={300}
  hideLegend
/>

<PieChart
  series={[
    {
      innerRadius: 0,
      outerRadius: 80,
      data: data1,
    },
    {
      innerRadius: 100,
      outerRadius: 120,
      data: data2,
    },
  ]}
  height={300}
  hideLegend
/>

Press Enter to start editing

StraightAnglePieChart

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

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

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

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

Circle
Diamond
Star

API

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