Bar Chart

Basic Bar Chart

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

export default function BarChart(): ReactElement {
  const options: AgChartOptions = useMemo(
    () => ({
      data,
      series: [
        {
          type: 'bar',
          xKey: 'month',
          yKey: 'time',
          yName: 'Flight Time',
        },
      ],
    }),
    []
  );

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

• The series type is set to bar to render a bar chart.
• The xKey and yKey properties map the data to the chart.
• The yName property specifies the name of the y-axis.

Category Axis

A category axis is used to display discrete data points. In this example, we're using the month property as the category axis.

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

  const options: AgChartOptions = useMemo(
    () => ({
      data,
      axes: [
        {
          type: 'number',
          position: 'left',
        },
        {
          type: 'category',
          position: 'bottom',
          label: {
            formatter: (params) => data[params.index].label,
          },
        },
      ],
    }),
    [data]
  );

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

• The type property is set to category to render a category axis.
• The position property specifies the position of the axis.
• The label property is used to format the axis labels.
• The formatter function is used to display the month name.

Challenge

Open the Challenge on Stackblitz

It's time for another challenge! This time, you'll be working with a bar chart to display flight time data by month. 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 'Flight Time'
2. Create an axis with type set to 'number' and position it on the 'left'.
3. Create another axis with the type set to 'category' and position it on the 'bottom'.
   • Use a custom formatter function for the axis labels to display the label stored in the dataset for each month.

Solution

View the Solution on Stackblitz