Chart.js 옵션 dataset labels 숨기/ 클릭 tooltip 내용

라벨 dataset labels 숨기는 방법

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

차트를 만들어내는 js 코드가 있다고 가정하자. 여기서 labels을 숨기는 방법은 아주 간단하다.

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

 

다음과 같이 legend의 display를 false로 설정하면 깔끔하게 label이 숨겨진다.

 

 

 

https://www.chartjs.org/docs/latest/charts/line.html
https://stackoverflow.com/questions/37204298/chart-js-v2-hide-dataset-labels

 

출처

 

Chart.js 라벨 dataset labels 숨기는 방법

 

 

 

클릭하면 나오는tooltip lable내용 변경

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

출처

 

Chart.js v2 hide dataset labels