Charts - Pie demos

Demos that use pie charts for multi-level data, angles, labels, padding, and custom legend or tooltip.

TwoLevelPieChart

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

<PieChart
  series={[
    {
      innerRadius: 0,
      outerRadius: 60,
      data: data1,
    },
    {
      innerRadius: 80,
      outerRadius: 100,
      data: data2,
    },
  ]}
  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

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.

Charts - Pie demos

TwoLevelPieChart

StraightAnglePieChart

PieChartWithCustomizedLabel

PieChartWithPaddingAngle

PieChartWithCenterLabel

Pie chart with custom mark in legend and tooltip

API