Chart.js Canvas Size OnResize Example

Chart.js에서 Canvas Size 바꾸기

chart.js에서 canvas size를 바꾸기 어려운 이유는 캔버스의 크기를 상위 태그에서 선지정을 하기 때문이다. 그러니까 이미 캔버스의 크기가 그려지고, 그 내부에서 차트가 그려지기 때문에 고정된 캔버스의 크기 안에 차트가 어떻게든 찌그러들거나 늘어나거나 해서 그려진다는 이야기이다.

 

그래서 Canvas 크기 자체를 바꾸기 위해서는 다른 방법을 사용해야하는데, asPectRatio 값을 바꿔서 차트 사이즈를 바꾸는 것도 가능하지만 더 편한 방법은 onResize 함수를 사용하는 것이다. onResize 함수는 사후적으로 canvas parantNode의 style을 바꿔준다.

 

아래 예시는 데이터의 길이에 따라서 canvas의 높이를 dynamic하게 바꿔준다.

const options = {	
    responsive: true,
    maintainAspectRatio: false,
    onResize: function(chart:any, data:string[]) {
      const n = data.length;
      chart.canvas.parentNode.style.height = `${64 + n * 32}px`;
      chart.update();
    }
}

 

반응형

 

사실상 onResize를 활용하면 canvas의 크기뿐만아니라 다양한 스타일요소를 다이나믹하게 지정하고 변경할 수 있다. 아래 예시는 size의 height값이 128이상인 경우에만 범례(legend)를 표기하도록 하는 코드이다. 

const options = {	
    responsive: true,
    maintainAspectRatio: false,
    onResize: function(chart:any, size:any) {
      chart.options.legend.display = size.height > 128;
      // ... do whatever changes you need to have your chart display correctly ...
      chart.update();
    }
}