Docs › Frameworks and server
Angular
Use 82chart as a Angular component.
npm i @82chart/core @82chart/angularimport { Component } from '@angular/core';
import { Chart82Component } from '@82chart/angular';
import type { ChartData, ChartOptions, ChartPoint } from '@82chart/core';
@Component({
selector: 'app-sales',
standalone: true,
imports: [Chart82Component],
template: `<chart-82 type="bar" [data]="data" [options]="options" (pointClick)="onPoint($event)"></chart-82>`,
})
export class SalesComponent {
data: ChartData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [{ name: 'Sales', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};
options: Partial<ChartOptions> = { title: 'Monthly sales', prefix: '₩' };
onPoint(p: ChartPoint) { console.log(p); }
}
// angular.json → "styles": ["node_modules/@82chart/core/dist/styles.css"]- A standalone component:
<chart-82 [type] [data] [options] [theme] (ready) (pointClick)>. (pointClick)fires on a point, bar or slice;(ready)hands you the chart instance.dataredraws when you pass a new object.- Angular 17 or newer.