Chartist는 간단하고 가볍게 사용할 수 있는 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하여 반응형 차트를 그려보겠습니다.

설치

Chartist는 NPM을 통해 설치할 수 있습니다. 다음 명령을 사용하여 설치합니다.

npm install chartist --save

또는 CDN을 이용하여 다음과 같이 추가할 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chartist"></script>

HTML 구조 작성

Chartist를 사용하기 위해 HTML 구조를 작성해야 합니다. 예를 들어, 다음과 같이 div 요소를 생성하여 차트를 표시할 공간을 만들 수 있습니다.

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

JavaScript 코드 작성

이제 실제로 Chartist를 사용하여 차트를 그려보겠습니다. chart 엘리먼트를 선택하고, 데이터 및 옵션을 설정하여 차트를 초기화합니다.

// Chartist 사용을 위해 필요한 모듈을 가져옵니다.
const Chartist = require('chartist');

// 데이터를 설정합니다.
const data = {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 2, 4, 3, 6],
    [3, 1, 5, 2, 4]
  ]
};

// 옵션을 설정합니다.
const options = {
  width: '100%',
  height: 'auto',
  chartPadding: {
    right: 20
  }
};

// 차트를 초기화합니다.
new Chartist.Line('#chart', data, options);

결과 확인

이제 작성한 코드를 실행하여 반응형 차트를 확인해보세요. 차트는 데이터를 기반으로 선 그래프를 그리고, 옵션을 통해 스타일 및 레이아웃을 조정할 수 있습니다.

참고 자료: Chartist 공식 문서