@82chart/angular

82chart Angular(17+) 독립 컴포넌트 — 한국 사이트를 위한 무료(MIT) 차트. 만·억 단위, 카드 스킨, 확대, 내보내기, 키보드 접근. Angular (17+) standalone component for 82chart, the free (MIT) chart component: line, area, bar, pie, donut, scatter, radar, gauge, population pyramid, heatmap, calendar heatmap, treemap, funnel and waterfall.

npm i @82chart/core @82chart/angular

import { Component } from '@angular/core';
import { Chart82Component, type ChartPoint } from '@82chart/angular';

@Component({
  selector: 'app-revenue',
  standalone: true,
  imports: [Chart82Component],
  template: `<chart-82 type="bar" [data]="data" [options]="{ title: '월별 매출', unit: '만원' }" (pointClick)="open($event)"></chart-82>`,
})
export class RevenueComponent {
  data = { labels: ['1월', '2월', '3월'], series: [{ name: '매출', data: [2200, 2900, 2600] }] };
  open(point: ChartPoint) { console.log(point.x, point.y); }
}

Add the stylesheet once (e.g. in angular.json styles): node_modules/@82chart/core/dist/styles.css.

Inputs: type, data, options, theme. Outputs: ready (the chart instance, also on the chart property), pointClick. Assign a new data or options object to redraw. The chart runs outside the Angular zone, so hover and resize do not trigger change detection.

Docs: https://82chart.com/docs/angular/

License

MIT © 2nd Korea (세컨드코리아)