[javascript] Chart.js에서의 색상 및 스타일 지정

27 Nov 2023

javascript

Chart.js는 웹 애플리케이션에서 사용할 수 있는 강력한 차트 라이브러리입니다. 차트를 만들 때 색상과 스타일을 지정하여 더욱 재미있고 시각적으로 매력적인 차트를 만들 수 있습니다. 이번 글에서는 Chart.js에서 색상과 스타일을 지정하는 방법에 대해 알아보겠습니다.

1. 색상 지정하기

Chart.js에서는 차트의 요소들에게 색상을 지정할 수 있습니다. 다음은 간단한 옵션을 설정하여 색상을 지정하는 예제입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Green', 'Blue'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        // 추가적인 옵션 설정
    }
});

위의 예제에서는 각 막대 그래프에 대한 색상을 backgroundColor 배열에 RGB 값으로 지정하였습니다. 또한, 막대 그래프의 테두리 색상은 borderColor 배열에 지정하였습니다.

2. 스타일 지정하기

Chart.js에서는 차트의 스타일을 지정하여 더욱 개성있고 독특한 차트를 만들 수 있습니다. 다음은 차트의 스타일을 지정하는 예제입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Green', 'Blue'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(54, 162, 235, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            legend: {
                labels: {
                    font: {
                        size: 16,
                        weight: 'bold'
                    }
                }
            }
        }
    }
});

위의 예제에서는 options 객체 내부에서 plugins 객체와 legend 객체를 이용하여 레전드(범례)의 폰트 스타일을 지정하였습니다. font.size를 통해 폰트 크기를 지정하고, font.weight를 통해 폰트의 두께를 지정할 수 있습니다.

참고 자료

Chart.js 공식 문서 (https://www.chartjs.org/docs/latest/)