[javascript] Chart.js에서의 축 해상도 및 크기 조절

27 Nov 2023

javascript

Chart.js는 데이터 시각화를 위한 JavaScript 라이브러리입니다. 바 차트, 선 그래프, 원 그래프 등 다양한 종류의 차트를 생성할 수 있습니다. 이번 글에서는 Chart.js의 축 해상도 및 크기 조절에 대해 알아보겠습니다.

차트의 크기 조절하기

Chart.js를 사용하여 차트를 생성할 때, 기본적으로 차트의 크기는 부모 요소의 크기에 맞춰집니다. 하지만 경우에 따라 특정한 크기로 차트를 조절해야 할 수도 있습니다. 이때에는 options 객체의 maintainAspectRatio 속성을 이용하여 크기를 조절할 수 있습니다.

아래는 maintainAspectRatio 속성을 활용하여 차트의 가로 길이를 500px로 조절하는 예시입니다:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // ...
    },
    options: {
        maintainAspectRatio: false,
        // ...
    }
});

maintainAspectRatio 속성을 false로 설정하면, 차트가 부모 요소의 크기를 그대로 유지하지 않고, 지정한 값을 기준으로 크기가 조절됩니다.

축의 해상도 조절하기

차트의 축 해상도를 조절하여 데이터를 더욱 세밀하게 표현할 수도 있습니다. Chart.js에서는 options 객체의 scales 속성을 이용하여 축의 설정을 조절할 수 있습니다.

아래는 x축의 해상도를 조절하는 예시입니다:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        // ...
    },
    options: {
        scales: {
            x: {
                type: 'time', // x축의 데이터 유형이 시간임을 지정
                time: {
                    unit: 'day' // x축의 각 포인트는 하루 단위로 표시됨
                }
            },
            // ...
        }
    }
});

위 코드에서는 x 속성을 통해 x축 설정을 조절하였습니다. type 속성을 time으로 설정하여 x축이 시간 데이터임을 지정하고, time 속성의 unit을 day로 지정하여 각 포인트를 하루 단위로 표시하도록 설정하였습니다.

참고 자료

Chart.js 공식 문서: https://www.chartjs.org/docs/latest/
Chart.js GitHub 저장소: https://github.com/chartjs/Chart.js