chart.js 툴팁(데이터) 항상 보이게 하기

chart.js의 툴팁을 항상 보여지도록 하는 방법은 생각보다 까다롭다. chart.js 외에도 chartjs-plugin-datalabels 플러그인을 별도로 설치해야 구현하기 한결 간편해진다. chartjs-plugin-datalabels는 chart.js 버전 3까지 지원한다.

1. chartjs-plugin-datalabels 설치

https://chartjs-plugin-datalabels.netlify.app/guide/getting-started.html#installation

아래 설치 방법 중에 선택하면 된다.

1-1. NPM

npm install chartjs-plugin-datalabels --save

1-2. CDN

본인에게 맞는 버전을 선택해서 html에 아래와 같이 작성하면 된다. chart.js 버전 2를 사용한다면 플러그인도 버전 2를 설치해준다.

<!-- 버전 2 (특정 버전) -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<!-- 버전 2 (최신) -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<!-- 버전 3 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>

Uncaught ReferenceError: ChartDataLabels is not defined 에러가 발생한다면 chart.js와 플러그인 버전이 맞지 않기 때문일 수 있다. 다른 버전으로 연결해보자.

2. chartjs-plugin-datalabels 사용

설치가 완료되었다면, 해당 플러그인을 사용하여 툴팁을 차트 위에 고정해보자. 기존 툴팁은 안 보이게 처리한 다음 플러그인을 사용하여 새로운 툴팁을 차트 위에 고정하는 방식이다.

const myChart = new Chart(
  document.getElementById('myChart1'),
  {
    plugins: [ChartDataLabels], // chartjs-plugin-datalabels 불러오기
    type: 'pie', // 차트 타입 지정
    data: { // 차트 데이터
      // ...
    },
    options: {
      plugins: {
        legend: { // 범례 사용 안 함
          display: false,
        },
        tooltip: { // 기존 툴팁 사용 안 함
          enabled: false
        },
        animation: { // 차트 애니메이션 사용 안 함 (옵션)
          duration: 0,
        },
        datalabels: { // datalables 플러그인 세팅
          formatter: function (value, context) {
            var idx = context.dataIndex; // 각 데이터 인덱스

            // 출력 텍스트
            return context.chart.data.labels[idx] + value + '%';
          },
          align: 'top', // 도넛 차트에서 툴팁이 잘리는 경우 사용
        },
      },
    },
  }
);

3. 여러 가지 옵션

따로 스타일을 주고 싶다면 datalabels 객체 내부에 작성하면 된다.

const myChart = new Chart(
  document.getElementById('myChart1'),
  {
    plugins: [ChartDataLabels], // chartjs-plugin-datalabels 불러오기
    type: 'pie', // 차트 타입 지정
    data: { // 차트 데이터
      // ...
    },
    options: {
      plugins: {
        legend: { // 범례 사용 안 함
          display: false,
        },
        tooltip: { // 기존 툴팁 사용 안 함
          enabled: false
        },
        animation: { // 차트 애니메이션 사용 안 함 (옵션)
          duration: 0,
        },
        datalabels: { // datalables 플러그인 세팅
          formatter: function (value, context) {
            var idx = context.dataIndex; // 각 데이터 인덱스

            // 출력 텍스트
            return context.chart.data.labels[idx] + value + '%';
          },
          align: 'top', // 도넛 차트에서 툴팁이 잘리는 경우 사용
          font: { // font 설정
          	weight: 'bold',
            size: '12px',
          },
          color: '#222', // font color
        },
      },
    },
  }
);

그 외에 다른 스타일 옵션은 아래 페이지를 참고
https://chartjs-plugin-datalabels.netlify.app/guide/options.html#scriptable-options