JavaScript ChartsQuick Start

AG Charts is a high-performance, canvas-based JavaScript charting library for building JavaScript Charts and JavaScript 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 JavaScript Chart Copy Link

Add JavaScript Charts to your application in 60 seconds:

Provide a Container Copy Link

Load the AG Charts library and create a blank container div:

<!doctype html>
<html lang="en">
    <head>
        <title>AG Charts Quick Start</title>
        <!-- JavaScript Charts Core Library -->
        <script src="https://cdn.jsdelivr.net/npm/ag-charts-community/dist/umd/ag-charts-community.js"></script>
    </head>
    <body>
        <!-- Container for Chart -->
        <div id="myChart"></div>
        <!-- Charts configuration file -->
        <script src="index.js"></script>
    </body>
</html>

If you're using TypeScript you need to import and register the modules you want to use. See the NPM Installation docs for more information.

Instantiate the JavaScript Chart Copy Link

Create the Chart inside of your container div using create.

// Chart Options
const options = {};

// Create Chart
const chart = agCharts.AgCharts.create(options);

Define Chart Data and Series Copy Link

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

// Chart Options
const options = {
    // Container: HTML Element to hold the chart
    container: document.getElementById('myChart'),
    // 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' }],
};

Running the JavaScript Chart Copy Link

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

To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

Next Steps Copy Link

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

Key Features

Browse an overview of our commonly used features

Tutorials

Get started with our step-by-step tutorials

Community vs. Enterprise

Understand the differences between each version

Getting started

Core features

Specialised Charts

Series

Gauges