Angular 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

import { Component } from '@angular/core';
import { AgChartOptions } from 'ag-charts-community';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent {
    public options: AgChartOptions;

    beverageSpending = [
        {
            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,
        },
    ];
    constructor() {
        this.options = {
            data: this.beverageSpending,
            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 },
                { type: 'column', xKey: 'beverage', yKey: 'Q3', stacked: true },
                { type: 'column', xKey: 'beverage', yKey: 'Q2', stacked: true },
                { type: 'column', xKey: 'beverage', yKey: 'Q1', stacked: true },
            ],
        };
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgChartsAngularModule } from 'ag-charts-angular';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        AgChartsAngularModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule {
}

<ag-charts-angular
    style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
    [options]="options">
</ag-charts-angular>

Open in

StackBlitz

Getting Started

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

Add AG Charts to Your Project

For the purposes of this tutorial, we are going to scaffold an Angular app with the Angular CLI.

Don't worry if your project has a different configuration - AG Charts and its Angular wrapper are distributed as NPM packages and work with all common Angular project setups.

Let's follow the Angular CLI instructions and run the following in your terminal:

npm install -g @angular/cli
ng new my-app --routing false
cd my-app
ng serve

If everything goes well, ng serve has started the web server. You can open your app at localhost:4200.

As a next step, let's add the AG Charts NPM packages. If you are not using the latest version of Angular check the compatibility table below. Run the following command in my-app (you may need a new instance of the terminal):

npm install --save ag-charts-community ag-charts-angular
npm install # in certain circumstances npm will perform an "auto prune". This step ensures all expected dependencies are present

After a few seconds of waiting, you should be good to go. Let's get to the actual coding! As a first step, let's add the AG Charts Angular module to our app module (src/app/app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgChartsAngularModule } from 'ag-charts-angular';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        AgChartsAngularModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule {
}

Next, let's declare the basic chart configuration. Edit src/app.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    public options: any;

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

    constructor() {
        this.options = {
            data: this.data,
            series: [{
                xKey: 'quarter',
                yKey: 'spending',
            }],
        };
    }
}

Here we'll provide the options we want to use for our chart, including the series to use to plot the data.

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

Finally, let's add the component definition to our template. Edit app/app.component.html and remove the scaffold code:

<ag-charts-angular
    style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
    [options]="options">
</ag-charts-angular>

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:

constructor() {
    this.options = {
        data: this.data,
        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:

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 configuration we can use to do that:

constructor() {
    this.options = {
        data: this.data,
        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:

constructor() {
    this.options = {
        data: this.data,
        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:

constructor() {
    this.options = {
        data: this.data,+       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: {},
            },
        ],
  };}

Compatible Versions

The table below gives the ranges of compatible versions of AG Charts with Angular versions.

AG Charts Legacy is only required for apps on Angular v8-11 that wish to use AG Charts v6+. See AG Grid Legacy for more details about our legacy packages.

Angular	AG Charts	AG Charts Package
8 - 11	2 - 5	ag-charts-angular
8 - 11	6+	ag-charts-angular-legacy
12+	6+	ag-charts-angular

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.