React ChartsQuick Start

AG Charts is a high-performance, canvas-based React charting library for building React Charts and React Graphs with an intuitive API, a wide-range of series types and a rich feature set. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Create a React Chart Copy Link

Add React Charts to your application in 60 seconds:

NPM Install Copy Link

Install the AG Charts React library:

npm install ag-charts-react

yarn add ag-charts-react

Module Install Copy Link

Register the AllCommunityModule to access all Community features:

import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';

// Enable all Community features
ModuleRegistry.registerModules([AllCommunityModule]);

Import the React Chart Copy Link

// React Chart Component
import { AgCharts } from 'ag-charts-react';

Define Chart Data and Series Copy Link

All configuration is done via the options object. At a minimum, you need to provide the data and series properties:

const ChartExample = () => {
    // Chart Options: Control & configure the chart
    const [chartOptions, setChartOptions] = useState({
        // Data: Data to be displayed in the chart
        data: [
            { month: 'Jan', avgTemp: 2.3, iceCreamSales: 162000 },
            { month: 'Mar', avgTemp: 6.3, iceCreamSales: 302000 },
            { month: 'May', avgTemp: 16.2, iceCreamSales: 800000 },
            { month: 'Jul', avgTemp: 22.8, iceCreamSales: 1254000 },
            { month: 'Sep', avgTemp: 14.5, iceCreamSales: 950000 },
            { month: 'Nov', avgTemp: 8.9, iceCreamSales: 200000 },
        ],
        // Series: Defines which chart type and data to use
        series: [{ type: 'bar', xKey: 'month', yKey: 'iceCreamSales' }],
    });

    // ...
};

React Chart Component Copy Link

Return the AgCharts component with the chartOptions as a prop:

return (
    // AgCharts component with options passed as prop
    <AgCharts options={chartOptions} />
);

Running the React Chart Copy Link

Below is a live example of the application running. Click </> Code to see the code.

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { AgCharts } from "ag-charts-react";
import {
  AgBarSeriesOptions,
  AgChartOptions,
  AllCommunityModule,
  ModuleRegistry,
} from "ag-charts-community";

interface IData {
  // Chart Data Interface
  month:
    | "Jan"
    | "Feb"
    | "Mar"
    | "Apr"
    | "May"
    | "Jun"
    | "Jul"
    | "Aug"
    | "Sep"
    | "Oct"
    | "Nov"
    | "Dec";
  avgTemp: number;
  iceCreamSales: number;
}

ModuleRegistry.registerModules([AllCommunityModule]);

const ChartExample = () => {
  const [options, setOptions] = useState<AgChartOptions>({
    // Data: Data to be displayed in the chart
    data: [
      { month: "Jan", avgTemp: 2.3, iceCreamSales: 162000 },
      { month: "Mar", avgTemp: 6.3, iceCreamSales: 302000 },
      { month: "May", avgTemp: 16.2, iceCreamSales: 800000 },
      { month: "Jul", avgTemp: 22.8, iceCreamSales: 1254000 },
      { month: "Sep", avgTemp: 14.5, iceCreamSales: 950000 },
      { month: "Nov", avgTemp: 8.9, iceCreamSales: 200000 },
    ] as IData[],
    // Series: Defines which chart type and data to use
    series: [
      {
        type: "bar",
        xKey: "month",
        yKey: "iceCreamSales",
      } as AgBarSeriesOptions,
    ],
  });

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

const root = createRoot(document.getElementById("root")!);
root.render(<ChartExample />);

Next Steps Copy Link

Now that you have a basic React Chart running, choose one of the following options to continue your learning journey: