JavaScript ChartsGet Started with AG Charts

AG Charts is a powerful standalone component with no dependencies. The charts factory API can be used to seamlessly create and update data visualizations independently of the grid.

Quick Look Code Example

main.js
index.html

var data = [
    {
        beverage: 'Coffee',
        Q1: 450,
        Q2: 560,
        Q3: 600,
        Q4: 700
    },
    {
        beverage: 'Tea',
        Q1: 270,
        Q2: 380,
        Q3: 450,
        Q4: 520
    },
    {
        beverage: 'Milk',
        Q1: 180,
        Q2: 170,
        Q3: 190,
        Q4: 200
    },
];

var options = {
    container: document.querySelector('#myChart'),
    data: data,
    title: {
        text: 'Beverage Expenses'
    },
    subtitle: {
        text: 'per quarter'
    },
    footnote: {
        text: 'Based on a sample size of 200 respondents'
    },
    padding: {
        top: 40,
        right: 40,
        bottom: 40,
        left: 40
    },
    series: [
        { type: 'column', xKey: 'beverage', yKey: 'Q4', stacked: true },
        { type: 'column', xKey: 'beverage', yKey: 'Q3', stacked: true },
        { type: 'column', xKey: 'beverage', yKey: 'Q2', stacked: true },
        { type: 'column', xKey: 'beverage', yKey: 'Q1', stacked: true },
    ],
    legend: {
        spacing: 40
    },
};

agCharts.AgChart.create(options);

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AG Charts Basic Example</title>
        <script src="https://cdn.jsdelivr.net/npm/ag-charts-community/dist/ag-charts-community.min.js">
        </script>
    </head>
    <body>
        <div id="myChart" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
        <script src="main.js"></script>
    </body>
</html>

Open in

Plunker

Getting Started

In this article we will walk through the necessary steps to add AG Charts to an existing JavaScript project and produce your first chart.

Your First Chart

Let's say you want to visualise how much you spend on coffee each quarter and that you have the following data:

var data = [
    {
        quarter: 'Q1',
        spending: 450,
    },
    {
        quarter: 'Q2',
        spending: 560,
    },
    {
        quarter: 'Q3',
        spending: 600,
    },
    {
        quarter: 'Q4',
        spending: 700,
    },
];

To render it we can use this simple chart factory configuration:

agCharts.AgChart.create({
    data: data,
    container: document.querySelector('#myChart'),
    series: [{
        xKey: 'quarter',
        yKey: 'spending',
    }],
});

Here we pass in the data we want to render, the container element for the chart (our chart won't be attached to the DOM without it) and the series to use to plot the data.

The series type defaults to 'line' so the only series configuration we need to specify is which keys to use to fetch the data to be plotted along the horizontal (x) and vertical (y) axes.

The series property is an array because it is possible to supply multiple series (including mixed kinds!) into a single chart.

The default axes configuration is a category axis on the bottom and number axis on the left of a chart, both of which are exactly what we need in this case, so we don't need to supply these here.

The chart also features a legend by default which uses the yKey for the series, which in this case is 'spending'.

Customising the Legend

If we don't want the legend to show the yKey itself we can give it a name, for example 'Coffee Spending'.

This name is more descriptive but also longer, so let's position the legend on the bottom of the chart to make more space for the series:

agCharts.AgChart.create({
    data: data,
    container: document.querySelector('#myChart'),
    series: [{
        xKey: 'quarter',
        yKey: 'spending',+       yName: 'Coffee Spending',  }],+   legend: {
+       position: 'bottom',
+ },});

Basic Column Chart

Now let's try something more interesting. Let's say you want to visualise how much is spent on coffee, milk and tea in your company each quarter and in total. Your data might look something like this:

var data = [
    {
        beverage: 'Coffee',
        Q1: 450,
        Q2: 560,
        Q3: 600,
        Q4: 700,
    },
    {
        beverage: 'Tea',
        Q1: 270,
        Q2: 380,
        Q3: 450,
        Q4: 520,
    },
    {
        beverage: 'Milk',
        Q1: 180,
        Q2: 170,
        Q3: 190,
        Q4: 200,
    },
];

This time, let's choose another series type to plot the data: stacked columns. Here's the chart factory configuration we can use to do that:

agCharts.AgChart.create({
    data: data,
    container: document.querySelector('#myChart'),
    series: [
        { type: 'column', xKey: 'beverage', yKey: 'Q4', stacked: true },
        { type: 'column', xKey: 'beverage', yKey: 'Q3', stacked: true },
        { type: 'column', xKey: 'beverage', yKey: 'Q2', stacked: true },
        { type: 'column', xKey: 'beverage', yKey: 'Q1', stacked: true },
    ],
});

Chart tooltips are enabled by default so you can hover over a block to see its value.

Labels and Titles

We can enhance our chart by providing a label for each block segment. We can set a label's fontSize, fontFamily and other properties, but for now we'll just accept the default values:

agCharts.AgChart.create({
    data: data,
    container: document.querySelector('#myChart'),
    series: [
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q4',
            stacked: true,+           label: {},        },
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q3',
            stacked: true,+           label: {},        },
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q2',
            stacked: true,+           label: {},        },
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q1',
            stacked: true,+           label: {},        },
  ],});

If we then want to add a title and subtitle to the chart, we can simply add this to our chart config:

agCharts.AgChart.create({
    data: data,
    container: document.querySelector('#myChart'),+   title: {
+       text: 'Beverage Expenses',
+   },
+   subtitle: {
+       text: 'per quarter',
+   },
+   footnote: {
+       text: 'Based on a sample size of 200 respondents',
+ },    series: [
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q4',
            stacked: true,
            label: {},
        },
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q3',
            stacked: true,
            label: {},
        },
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q2',
            stacked: true,
            label: {},
        },
        {
            type: 'column',
            xKey: 'beverage',
            yKey: 'Q1',
            stacked: true,
            label: {},
        },
  ],});

Install AG Charts with NPM

To install AG Charts and update your package.json file run:

npm install --save ag-charts-community

Then import the module as follows:

import * as agCharts from 'ag-charts-community';

Creating charts is done using the agCharts.AgChart factory as shown in the example above, i.e.

agCharts.AgChart.create(options);

Now that you've had a taste of what it's like to use AG Charts, we encourage you to explore our documentation to learn more.