Line Chart

Flights

Let's build a simple line chart using AG Charts that displays flight data.

Our data model is based on the following interface:

export interface Flight {
  date: Date;
  time: number;
}

• The date property is a JavaScript Date object that represents the date of the flight.
• The time property is a number that represents the duration of the flight in hours.

Basic Line Chart

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

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

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

Axes Types

By default, AG Charts will automatically generate the axes for the chart.

We can also specify the type of axis to use for each dimension. There are three basic types of axes available:

• number - For continuous numerical data.
• category - For discrete data.
• time - For time-based data.

Number Axis

A number axis is used to display continuous numerical values in a chart. Let's update the line chart to use a number axis for the left y-axis.

export default function LineChart(): ReactElement {
  const options: AgChartOptions = useMemo(
    () => ({
      // code omitted for brevity
      axes: [
        {
          type: 'number',
          position: 'left',
        },
      ],
    }),
    []
  );

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

• The type property specifies the type of axis to use.
• The position property specifies the position of the axis.

Time Axis

A time axis is used to display time-based data in a chart. The time axis is similar to the number axis but differs in tick segmentation and label formatting. The time values must be either Date objects or numeric timestamp values.

Let's update the line chart to use a time axis for the bottom x-axis.

export default function LineChart(): ReactElement {
  const options: AgChartOptions = useMemo(
    () => ({
      // code omitted for brevity
      axes: [
        {
          type: 'number',
          position: 'left',
        },
        {
          type: 'time',
          position: 'bottom',
          interval: { step: time.month },
          label: {
            format: '%b %Y',
          },
        },
      ],
    }),
    []
  );

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

• The interval property specifies the time interval to use for the axis.
• The time object provides predefined time intervals.
• The label.format property specifies the format of the axis labels.
• The format string uses the same syntax as the Date.toLocaleDateString() method.
• You can also specify a custom formatter function for the label.

Challenge

Open the Challenge on Stackblitz

Now it's your turn to practice! Update the line chart to display the average flight time for each month. Here's your challenge:

1. Update the chart title to "Flight Time".
2. Create a series of type 'line':
   • Set the xKey to 'date'
   • Set the yKey to 'time'
   • Set the yName to 'Flight Time'
3. Create an axis with type set to 'number' and set the axis' position to be 'left'
4. Create another axis with the type set to 'time'
   • Set the position to be 'bottom'
   • Bonus: Set the interval to month using the time constant imported from ag-charts-community
   • Bonus: Configure the label's format to be '%b %Y'
5. Update the component to render the <AgChart /> component, binding our options to the options prop of the component

Solution

View the Solution on Stackblitz