ApexChart Angular 사용 예시

<apx-chart
    class="px-5 w-[48.5rem] text-gray-500"
    [series]="series ?? chartOptions.series!"
    [chart]="chart ?? chartOptions.chart!"
    [xaxis]="xaxis ?? chartOptions.xaxis!"
    [dataLabels]="labels ?? chartOptions.dataLabels!"
    [stroke]="chartOptions.stroke!"
    [yaxis]="yaxis ?? chartOptions.yaxis!"
    [responsive]="chartOptions.responsive!"
    [legend]="chartOptions.legend ?? {}"
    *ngIf="!isLoading"
  >
  </apx-chart>

import {
  Component,
  OnInit,
  ViewChild,
  AfterViewInit,
  Input,
  ElementRef,
} from '@angular/core';
import { ApexResponsive, NgApexchartsModule } from 'ng-apexcharts';
import {
  ChartComponent as ApexChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexDataLabels,
  ApexStroke,
  ApexYAxis,
  ApexTitleSubtitle,
  ApexLegend,
} from 'ng-apexcharts';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { IconComponent } from '../icon/icon.component';

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  stroke: ApexStroke;
  dataLabels: ApexDataLabels;
  yaxis: ApexYAxis;
  labels: string[];
  legend: ApexLegend;
  subtitle: ApexTitleSubtitle;
  responsive: ApexResponsive[];
};

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss'],
  standalone: true,
  imports: [NgApexchartsModule, CommonModule, IonicModule, IconComponent],
})
export class ChartComponent implements OnInit {
  @Input() series: ApexAxisChartSeries | undefined;
  @Input() xaxis: ApexXAxis | undefined;
  @Input() yaxis: ApexYAxis | undefined;
  @Input() label: string | undefined;
  @Input() chart: ApexChart | undefined;
  @Input() labels: ApexDataLabels | undefined;
  chartOptions: Partial<ChartOptions>;
  isLoading: boolean = true;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: '모두',
          data: [
            1000, 1100, 1200, 1300, 1200, 1100, 1000, 1200, 1300, 1400, 1300,
            1350,
          ],
          color: '#002B9E',
        },
        {
          name: '회원수',
          data: [10, 50, 100, 110, 120, 120, 130, 140, 150, 165, 170, 350],
          color: '#009E23',
        },
        {
          name: '지점',
          data: [1000, 900, 700, 650, 600, 650, 700, 705, 700, 600, 750, 900],
          color: '#9E007A',
        },
        {
          name: '메뉴 통계',
          data: [
            1500, 1300, 1200, 1100, 1000, 900, 1000, 1100, 1200, 1300, 1400,
            1500,
          ],
          color: '#9E7200',
        },
      ],
      responsive: [{ breakpoint: undefined, options: {} }],
      chart: {
        type: 'line',
        fontFamily: 'Pretendard',
        width: 776,
        height: 363.5,
        toolbar: {
          show: false,
        },
        zoom: {
          enabled: false,
        },
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: 'straight',
        width: 2,
      },
      subtitle: {
        text: 'Price Movements',
        align: 'left',
      },
      labels: ['labels'],
      xaxis: {
        categories: [
          '1월',
          '2월',
          '3월',
          '4월',
          '5월',
          '6월',
          '7월',
          '8월',
          '9월',
          '10월',
          '11월',
          '12월',
        ],
      },
      yaxis: {
        opposite: false,
      },
      legend: {
        show: true,
        showForSingleSeries: false,
        showForNullSeries: true,
        showForZeroSeries: true,
        position: 'top',
        horizontalAlign: 'left',
        floating: false,
        fontSize: '1rem',
        fontFamily: 'Pretendard',
        fontWeight: 600,
        width: 346,
        height: 43,
        tooltipHoverFormatter: undefined,
        customLegendItems: [],
        offsetX: 0,
        offsetY: 0,
        labels: {
          colors: undefined,
          useSeriesColors: false,
        },
        markers: {
          width: 12,
          height: 12,
          strokeWidth: 0,
          strokeColor: '',
          fillColors: undefined,
          radius: 12,
          customHTML: undefined,
          onClick: undefined,
          offsetX: 0,
          offsetY: 0,
        },
        itemMargin: {
          horizontal: 16,
          vertical: 0,
        },
        onItemClick: {
          toggleDataSeries: true,
        },
        onItemHover: {
          highlightDataSeries: true,
        },
      },
    };
  }

  ngOnInit() {}

  async ngAfterViewInit() {
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);
  }
}