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

Add JavaScript Charts to your application in 60 seconds:

Provide a Container Copy

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>

Instantiate the JavaScript Chart Copy

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

// 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

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

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