Chartist는 유명한 자바스크립트 차트 라이브러리 중 하나입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 만들 수 있습니다. 이번 글에서는 Chartist 차트에 데이터 툴팁을 추가하는 방법에 대해 알아보겠습니다.

Chartist 데이터 툴팁 추가하기

Chartist에서는 각 데이터 포인트에 툴팁을 추가할 수 있는 기능이 내장되어 있습니다. 이를 사용하여 차트에 특정 데이터에 대한 추가 정보를 표시할 수 있습니다.

먼저, Chartist 라이브러리를 프로젝트에 추가합니다. HTML 파일에 다음 코드를 추가하여 Chartist 라이브러리를 가져올 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.js"></script>

그리고 프로젝트에 필요한 CSS 파일도 추가해야 합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.0/chartist.min.css" />

이제 데이터 툴팁을 추가할 차트를 생성해보겠습니다. 다음은 간단한 Chartist 차트 예제입니다.

// 차트 데이터
const data = {
  labels: ['월', '화', '수', '목', '금', '토', '일'],
  series: [
    [5, 2, 4, 8, 6, 9, 2]
  ]
};

// 차트 옵션
const options = {
  fullWidth: true,
  high: 10,
  low: 0,
  chartPadding: {
    right: 20
  }
};

// 차트 생성
const chart = new Chartist.Line('.chart', data, options);

// 데이터 툴팁 추가
chart.on('draw', function(context) {
  if(context.type === 'point') {
    const value = context.y;
    const tooltip = new Chartist.Svg('text', {
      x: context.x,
      y: context.y,
      'text-anchor': 'middle',
      class: 'ct-tooltip'
    }, 'ct-tooltip');
    tooltip.text(value);
    context.element.append(tooltip);
  }
});

위의 코드에서 chart.on('draw', ...) 이벤트 핸들러를 사용하여 각 데이터 포인트에 대한 툴팁을 추가하고 있습니다. getContext() 메서드를 이용하여 데이터의 x, y 값을 가져올 수 있습니다. 이를 사용하여 툴팁을 생성하고 차트 요소에 추가합니다.

HTML 파일에 차트를 표시할 영역을 만들어야 합니다.

<div class="chart"></div>

CSS 스타일을 추가하여 툴팁을 꾸밀 수도 있습니다.

.ct-tooltip {
  font-family: Arial, sans-serif;
  font-size: 10px;
  fill: #fff;
}

마무리

이번 글에서는 Chartist에서 차트의 데이터 툴팁을 추가하는 방법에 대해 알아보았습니다. Chartist를 사용하여 차트를 더욱 상세하고 유용하게 표현할 수 있습니다.

더 자세한 내용은 Chartist 공식 문서를 참고하시기 바랍니다.