[chart.js in vue.js] data label 없애는 설정 방법

개요

chart.js + vue.js로 개발하고 있습니다.

chart를 생성했을 때, 아래 그림처럼 차트 포인터 위에 데이터 라벨이 표시되고 있었습니다.

제품의 요구사항이 아니였어서 없애야 했습니다.

chart.js line chart 어노테이션이 표시되는 설정 없애는 방법

plugins.datalabels.display: false

👇 사용 코드

makeChartDataForm: (aData, aIndex) => {
  const ctx = document.getElementById(`chart-${aIndex}`).getContext('2d');
  gChart = new Chart(ctx, {
    type: 'line',
    data: aData,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        datalabels: {
          display: false  //👈 
        },
      }
  });
},

 

설정 결과