Create a chart with AG Charts in 60 seconds.
Install
Install the AG Charts library:
npm install ag-charts-angular
yarn add ag-charts-angular
Create
Replace your app.component.ts
file (or root component) with the following:
import { Component } from '@angular/core';
import { AgChartsAngularModule } from 'ag-charts-angular';
import { AgChartOptions } from 'ag-charts-community';
@Component({
selector: 'app-root',
standalone: true,
imports: [AgChartsAngularModule],
// ag-charts-angular component with chartOptions attribute
template:
`<ag-charts-angular
style="height: 100%"
[options]="chartOptions">
</ag-charts-angular>`,
})
export class AppComponent {
// Chart Options
public chartOptions: AgChartOptions;
constructor() {
this.chartOptions = {
// 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' }]
};
}
}
Example
When you run your app, you should see a basic chart: