# CanvasJS Angular Charts - Official
CanvasJS [Angular Chart](https://canvasjs.com/angular-charts/) Component for creating interactive charts and graphs for your web pages. Library supports a wide range of chart types including bar, line, area, pie, doughnut, etc.
## Important Links
- [Official Website](https://canvasjs.com/)
- [Angular Charts Demo](https://canvasjs.com/angular-charts/)
- [Download CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/)
- [Angular Charts Integration](https://canvasjs.com/docs/charts/integration/angular/)
- [Chart Documentation](https://canvasjs.com/docs/charts/chart-options/)
- [CanvasJS Support Forum](https://canvasjs.com/forums/)
## Installing CanvasJS Angular Charts
Install CanvasJS Angular Charts package to your Angular app
```
npm install @canvasjs/angular-charts
```
See [npm documentation](https://docs.npmjs.com/) to know more about npm usage.
##### Import Angular Chart Module & register it
Import the Angular Chart module into your Angular application (app.component.ts) & register it.
```
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, CanvasJSAngularStockChartsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
```
##### Set the chart-options & create chart
Set the chart-options in app.component.ts & use ‘canvasjs-chart’ selector to create chart in app.component.html
```
//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, CanvasJSAngularStockChartsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
chartOptions = {
title: {
text: "Basic Column Chart in Angular"
},
data: [{
type: "column",
dataPoints: [
{ label: "Apple", y: 10 },
{ label: "Orange", y: 15 },
{ label: "Banana", y: 25 },
{ label: "Mango", y: 30 },
{ label: "Grape", y: 28 }
]
}]
};
}
//app.component.html
```
#### Angular Synchronized Charts
#### Angular Animated Charts
#### Angular Chart with Zooming / Panning
### Related Chart Packages
* [JavaScript Charts](https://www.npmjs.com/package/@canvasjs/charts)
* [React Charts](https://www.npmjs.com/package/@canvasjs/react-charts)
* [Vue Charts](https://www.npmjs.com/package/@canvasjs/vue-charts)
* [jQuery Charts](https://www.npmjs.com/package/@canvasjs/jquery-charts)