Search
What's New
Getting started
Quick Start
Core features
Specialised Charts
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsInstallation

Learn how to add AG Charts to your application.

Overview

Adding AG Charts to your application is simple and follows standard Node.js conventions for modular Javascript.

For Javascript projects not building bundles we also provide a pre-built UMD bundle for direct use.

Adding to Your Bundled Project

This is the recommended approach for modern application development. We expect most users will be using a tool such as rollup, webpack, esbuild, vite or the many other options to bundle their application.

Install NPM Package 

# Pick one package only, the Enterprise edition depends on Community.

# Install AG Charts Community edition.
npm install ag-charts-community

# Install AG Charts Enterprise edition.
npm install ag-charts-enterprise

# Pick one package only, the Enterprise edition depends on Community.

# Install AG Charts Community edition.
yarn add ag-charts-community

# Install AG Charts Enterprise edition.
yarn add ag-charts-enterprise

Use the Charts API

You can then use the Charts API to create and update chart instances:

import { AgCharts } from 'ag-charts-community';

AgCharts.create(/* chart options /*);

const agCharts = require('ag-charts-community');

agCharts.AgCharts.create(/* chart options */);

Enabling Enterprise Features

Enterprise Charts features are enabled by loading the ag-charts-enterprise module and setting your license key before using the Charts API.

import { AgCharts } from 'ag-charts-enterprise';

AgCharts.setLicenseKey('your license key');

const agCharts = require('ag-charts-enterprise');

agCharts.AgCharts.setLicenseKey('your license key');

Without a Bundled Project

We provide a UMD bundle for direct inclusion in an application's HTML by adding a <script> element the <head> tag:

<head>
    <!-- Pick one tag only, the Enterprise edition bundles Community too. -->
    <!-- AG Charts Community edition. -->
    <script src="https://cdn.jsdelivr.net/npm/ag-charts-community@9.0.0/dist/umd/ag-charts-community.js"></script>

    <!-- AG Charts Enterprise edition. -->
    <script src="https://cdn.jsdelivr.net/npm/ag-charts-enterprise@9.0.0/dist/umd/ag-charts-enterprise.js"></script>
</head>

The Charts API is then available via the global agCharts:

<script>
    const options = {
        /* ... */
    };
    agCharts.AgCharts.create(options);
</script>

Enabling Enterprise Features

Enterprise Charts features are enabled by loading the ag-charts-enterprise.js bundle and setting your license key before using the Charts API.

<script>
    agCharts.AgCharts.setLicenseKey('your license key');
</script>