ApexCharts는 강력하고 사용하기 쉬운 차트 라이브러리입니다. 이 글에서는 ApexCharts를 사용하여 차트에 스파크라인을 생성하는 방법을 알아보겠습니다.

1. ApexCharts 설치하기

먼저 ApexCharts를 설치해야 합니다. 아래 명령을 사용하여 npm을 통해 ApexCharts를 설치합니다.

npm install apexcharts

2. 스파크라인 설정하기

아래 코드는 간단한 라인 차트를 생성하는 예제입니다.

import ApexCharts from 'apexcharts';

const options = {
  series: [{
    name: 'Series 1',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  chart: {
    type: 'line',
    height: 350,
    sparkline: {
      enabled: true // 스파크라인 활성화
    }
  },
  stroke: {
    curve: 'straight'
  },
};

const chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

위의 코드에서 주목해야 할 부분은 chart 옵션에 있는 sparkline 속성입니다. 이 속성을 enabled: true로 설정하여 스파크라인을 활성화합니다.

3. 페이지에 차트 표시하기

HTML 파일에 다음과 같이 차트를 표시하는 div 요소를 추가합니다.

<div id="chart"></div>

4. 차트 표시하기

위의 코드를 실행하고 페이지를 로드하면 스파크라인이 포함된 차트가 표시됩니다.

참고 자료

• ApexCharts 공식 문서
• ApexCharts GitHub 저장소

ApexCharts를 사용하여 차트에 스파크라인을 생성하는 방법에 대해 알아보았습니다. 이제 여러분은 ApexCharts를 활용하여 멋진 데이터 시각화를 구현할 수 있습니다.