LiveLoveApp logo
ServicesArchitecture ReviewWorkshopsCase StudiesBlogContact

Donut Chart

Donut Chart

Let's build off of the previous PieChart challenge to build a donut chart.

export default function DonutChart(): ReactElement {
  // roll up data by month

  const options: AgChartOptions = useMemo(
    () => ({
      data,
      series: [
        {
          type: 'donut',
        },
      ],
    }),
    []
  );

  return <AgCharts options={options} />;
}
  • The series type is set to donut to render a donut chart.

Labels

The labels match that of the pie chart. The additional innerRadiusRatio is added to define the radius of the inner circle as a percentage of the outer radius of the chart.

export function DonutChart(): ReactElement {
  // roll up data by month

  const options: AgChartOptions = useMemo(
    () => ({
      data,
      series: [
        {
          type: 'donut',
          angleKey: 'time',
          legendItemKey: 'label',
          calloutLabelKey: 'label',
          innerRadiusRatio: 0.6,
        },
      ],
      theme,
    }),
    [data]
  );

  return <AgCharts options={options} />;
}

Challenge

Open the Challenge on Stackblitz

For this challenge, you will create a simple donut chart. Here's what you need to do:

  1. Create a series of type 'donut':
    • Set the angleKey to 'time' (this will represent the flight time for each slice).
    • Set the legendItemKey to 'label'.
    • Set the calloutLabelKey to 'label'.
    • Set the innerRadiusRatio to 0.6 to create the donut hole.

Solution

View the Solution on Stackblitz