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 an Angular Chart Copy Link

Add Angular Charts to your application in 60 seconds:

NPM Install Copy Link

Install the AG Charts Angular library:

npm install ag-charts-angular

yarn add ag-charts-angular

Import the Angular Chart Copy Link

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

Define Chart Data and Series Copy Link

// 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 Copy Link

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

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

Running the Angular Chart Copy Link

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

Next Steps Copy Link

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