Getting Started with AG Charts

Installing

To get started, install the ag-charts-react module.

npm install --save ag-grid-react

Chart Options

We'll be focused on building series-based charts.

When using the <AgCharts> component we will specify the options property that contains both the data to render and the series definition.

export default function Chart() {
  return <AgChart options={options}></AgChart>;
}

Chart Data

First, let's look at how we specify the data.

const data = [
  { date: new Date('2024-01-01T00:00:00'), value: 80 },
  { date: new Date('2024-02-01T00:00:00'), value: 70 },
  { date: new Date('2024-03-01T00:00:00'), value: 60 },
];

export default function Chart() {
  const options: AgChartOptions = useMemo(
    () => ({
      data,
    }),
    []
  );

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

• Define the chart options and specify the data and series properties.
• In most cases, data is an array of objects that represent each cartesian chart data point.

Chart Series

Next, let's specify the series for the chart. The series defines the type of chart to render and the xKey and yKey properties to map the data to the chart.

export default function Chart() {
  const options: AgChartOptions = useMemo(
    () => ({
      data,
      series: [
        {
          type: 'line',
          xKey: 'date',
          yKey: 'value',
        },
      ],
    }),
    []
  );

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

• The series property is an array of objects that define each series to display.
• The type property specifies the type of chart to render.
• In this example, we're rendering a line chart with the date mapped to the x-axis and the value mapped to the y-axis.