---
title: "Quick Start"
framework: angular
version: "14.1.0"
---

# Quick 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](https://www.ag-grid.com/charts/angular/community-vs-enterprise/) to learn more.

## Create an Angular Chart

Add Angular Charts to your application in 60 seconds:

### NPM Install

Install the AG Charts Angular library:

#### NPM

```bash
npm install ag-charts-angular
```

#### Yarn

```bash
yarn add ag-charts-angular
```

### Module Install

Register the `AllCommunityModule` to access all Community features:

```js
import { AllCommunityModule, ModuleRegistry } from 'ag-charts-community';

// Enable all Community features
ModuleRegistry.registerModules([AllCommunityModule]);
```

> **Note**
>
> To minimize bundle size, only register the modules you want to use. See the [Modules](https://www.ag-grid.com/charts/angular/module-registry/) page for more information.

### Import the Angular Chart

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

### Define Chart Data and Series

All configuration is done via the [`options`](https://www.ag-grid.com/charts/options/) object. At a minimum, you need to provide the `data` and `series` properties:

```ts
// 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.

```tsx
@Component({
    template: ` <ag-charts style="height: 100%" [options]="chartOptions"></ag-charts> `,
})
class AppComponent {}
```

### Running the Angular Chart

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

#### Basic Chart Example

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Basic Chart Example](https://www.ag-grid.com/charts/angular/quick-start/examples/basic-example)

> **Note**
>
> To live-edit the code, open the example in CodeSandbox or Plunker using the buttons to the lower-right.

## Next Steps

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

- [Key Features](https://www.ag-grid.com/charts/angular/key-features/) — Browse an overview of our commonly used features
- [Tutorials](https://www.ag-grid.com/charts/angular/create-a-basic-chart/) — Get started with our step-by-step tutorials
- [Community vs. Enterprise](https://www.ag-grid.com/charts/angular/community-vs-enterprise/) — Understand the differences between each version