[javascript] Chart.js에서의 툴팁 및 레전드 작업

27 Nov 2023

javascript

Chart.js는 유연하고 강력한 자바스크립트 차트 라이브러리로, 다양한 종류의 차트를 쉽게 생성할 수 있습니다. 이번 포스트에서는 Chart.js를 사용하여 툴팁과 레전드를 추가하는 방법에 대해 알아보겠습니다.

툴팁 추가하기

차트에 마우스를 올렸을 때 정보를 표시하는 툴팁은 차트를 더 사용자 친화적으로 만들어줍니다. Chart.js에서는 tooltips 옵션을 사용하여 툴팁을 추가할 수 있습니다. 아래는 간단한 선형 차트에 툴팁을 추가하는 예제입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['월', '화', '수', '목', '금', '토', '일'],
        datasets: [{
            label: '판매량',
            data: [12, 19, 3, 5, 2, 3, 15],
            backgroundColor: 'rgba(0, 123, 255, 0.3)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 2
        }]
    },
    options: {
        tooltips: {
            mode: 'index',
            intersect: false
        }
    }
});

위 예제에서 options 객체의 tooltips 속성을 사용하여 툴팁을 설정합니다. mode 속성은 툴팁이 어떤 형식으로 표시될지를 설정하며, index 값은 해당 데이터 아이템의 값들을 동시에 표시합니다. intersect 속성은 마우스 이동 시 툴팁이 다른 데이터 아이템과 겹치는지를 설정합니다.

레전드 추가하기

레전드는 차트에 표시되는 데이터 아이템에 대한 설명을 제공합니다. Chart.js에서는 legend 옵션을 사용하여 레전드를 추가할 수 있습니다. 아래는 복합 차트에 레전드를 추가하는 예제입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Dataset 1',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(255, 99, 132, 0.3)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }, {
            label: 'Dataset 2',
            data: [4, 8, 2, 12, 7, 6],
            backgroundColor: 'rgba(54, 162, 235, 0.3)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: true,
            position: 'bottom'
        }
    }
});

위 예제에서 options 객체의 legend 속성을 사용하여 레전드를 설정합니다. display 속성을 true로 설정하면 레전드가 표시되며, position 속성은 레전드의 위치를 설정합니다.

마무리

Chart.js를 사용하여 차트에 툴팁 및 레전드를 추가하는 방법에 대해 알아보았습니다. 툴팁과 레전드를 사용하면 차트를 보다 시각적으로 풍부하게 만들 수 있습니다. 자세한 옵션 및 설정에 대해서는 Chart.js 공식 문서를 참조하시기 바랍니다.

Chart.js 공식 문서: https://www.chartjs.org/