Combo Chart

Combo Chart

A combo chart is a combination of two or more chart types, such as a line chart and a bar chart, to visualize different data series together. This allows for better comparison and understanding of the data.

export function ComboChart(): ReactElement {
  const options: AgChartOptions = useMemo(() => {
    return {
      data,
      title: {
        text: 'Flight Time Analysis',
      },
      series: [
        {
          type: 'bar',
          xKey: 'month',
          yKey: 'time',
          yName: 'Monthly Flight Time',
        },
        {
          type: 'line',
          xKey: 'month',
          yKey: 'time',
          yName: 'Trend',
          marker: {
            enabled: true,
          },
        },
      ],
      axes: [],
      theme,
    };
  }, [data]);

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

• The series array now contains two series: a bar chart and a line chart.
• The xKey and yKey properties define the data mapping for each series.

This should look really familiar since we have already built a bar chart and a line chart in previous sections.

Now, let's define the axes for our combo chart to enhance readability and provide context for the data.

export function ComboChart(): ReactElement {
  const data = useRollupData();

  const options: AgChartOptions = useMemo(() => {
    return {
      // code omitted for brevity
      axes: [
        {
          type: 'number',
          position: 'left',
          title: {
            text: 'Flight Time (hours)',
          },
        },
        {
          type: 'category',
          position: 'bottom',
          label: {
            formatter: (params) => data[params.index].label,
          },
        },
      ],
      theme,
    };
  }, [data]);

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

• The axes property is added to define the axes for the combo chart.
• The left axis is a number axis for the flight time, and the bottom axis is a category axis for the months.

Challenge

Open the Challenge on Stackblitz

For this challenge, you will combine the line and bar charts to create a combo chart. Here’s what you need to do:

1. Create a series of type 'bar':
   • Set the xKey to 'month'.
   • Set the yKey to 'time'.
   • Set the yName to 'Monthly Flight Time'.
2. Create a series of type 'line':
   • Set the xKey to 'month'.
   • Set the yKey to 'time'.
   • Set the yName to 'Trend'.
   • Enable markers for the line series.
3. Define the axes:
   • The left axis should be a number axis with the title 'Flight Time (hours)'.
   • The bottom axis should be a category axis with labels formatted to show the month names.

Solution

View the Solution on Stackblitz