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

Yuri Lee·2021년 4월 9일
1

배경

Chart.js를 사용하던 도중 label을 숨기는 요구사항을 받았다. 이미 h tag 로 차트 타이틀에 대한 정보를 표시하고 있기 때문!

방법

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

profile
Step by step goes a long way ✨

0개의 댓글