React ChartsQuick Start

Add React Charts and React Graphs to your application in 60 seconds.

Your First React Chart

Add AG Charts to your application in these steps:

1. Install

Install the AG Charts React library:

npm install ag-charts-react

yarn add ag-charts-react

2. Import the React Chart

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

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

3. Define Chart Data and Series

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' }],
    });

    // ...
};

4. React Chart Component

Replace your index.js file (or root component) with the following code:

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

// Render component inside root element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ChartExample />);

5. Running the React Chart

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

Next Steps

• Read our Introductory Tutorial.