Angular ChartsQuick Start

AG Charts is a high-performance, canvas-based Angular charting library for building Angular Charts and Angular Graphs with an intuitive API, a wide-range of series types and a rich feature set. Available in Community and Enterprise editions. Visit Community vs. Enterprise to learn more.

Create a Angular Chart

Add Angular Charts to your application in 60 seconds:

NPM Install

Install the AG Charts Angular library:

npm install ag-charts-angular

yarn add ag-charts-angular

Import the Angular Chart

// Angular Chart Component
import { AgCharts } from 'ag-charts-angular';
// Chart Options Type Interface
import { AgChartOptions } from 'ag-charts-community';

Define Chart Data and Series

// Angular Chart Component
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AgCharts],
  template:``,
})
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' }]
    };
  }
}

Angular Charts Component

Chart options are set as an ag-charts component attribute.

template:
  `<ag-charts
    style="height: 100%"
    [options]="chartOptions">
   </ag-charts>`,
})

Running the Angular Chart

Below is a live example of the application running. Click </> Code to see the code.

Next Steps

Now that you have a basic Angular Chart running, choose one of the following options to continue your learning journey: