Pie Chart

Basic Pie Chart

Let's start by building a basic pie chart that displays the flight data.

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

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

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

• The series type is set to pie to render a pie chart.
• The angleKey property maps the data to the chart.

Labels

The calloutLabelKey property is used to display the label of the pie chart slice. And, the legendItemKey property is used to display the legend label.

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

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

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

Challenge

Open the Challenge on Stackblitz

For this challenge, you will update the pie chart to display the total flight time per month, using the provided dataset. Here’s what you need to do:

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

Solution

View the Solution on Stackblitz