Search

Angular ChartsInstallation

AG Charts is available for download from NPM & Yarn. Once installed, you just need to import the package.

Installation

Install the ag-charts-angular package, which also installs ag-charts-community:

npm install ag-charts-angular

yarn add ag-charts-angular

To use AG Charts Enterprise features, install the ag-charts-enterprise package:

npm install ag-charts-enterprise

yarn add ag-charts-enterprise

You can test AG Charts Enterprise locally without a licence. To test in production, access support and remove the watermark & console warnings, request a trial licence.

Importing

Import the AgCharts component from the ag-charts-angular package:

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

To use AG Charts Enterprise features, import the ag-charts-enterprise package:

import 'ag-charts-enterprise';

See the Installing Enterprise Licence Key docs for more information on how to install your Enterprise or Trial licence key.

Accessing AG Charts

To use AG Charts in your Angular application, return the ag-charts component with your chart options:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AgCharts],
  template:
    `<ag-charts
        style="height: 100%"
        [options]="chartOptions">
    </ag-charts>`,
}),

export class AppComponent {
  // Chart Options
  public chartOptions: AgChartOptions;
  constructor() {
    this.chartOptions = {...};
  }
}