Chart.js Canvas Resize 차트 크기 바꾸기

Chart.js는 웬일인지 모르겠는데 차트 크기가 고정되어 있다.

 

내가 원하는건 데이터의 크기에 따라서 세로 길이가 길어지게 하는거였기 때문에 맨 처음에는 height = {2n} 이런식으로 설정하고 싶었다.

 

구글링을 해보니 이걸 바꾸는 방법은 responsive와 maintainAspectRatio를 false로 하는 것이라는데, 실제로 해당 옵션을 false 값으로 바꾸고 나니 이상하게 차트 모양이 일그러졌다.

https://www.chartjs.org/docs/latest/configuration/responsive.html

Responsive Charts | Chart.js

 

 

그래서 내가 택한 방법은 aspectRatio가 default 값은 2로 고정되어있는데 이 값을 조금씩 바꾸면서 세로 길이를 늘리는 방법을 사용했다.

 

모든 경우에 적합한 방법은 아니지만, 차트 모양을 일그러뜨리지 않고 사용할 수 있어서 행복했다....

const options = {
    responsive: true,
    aspectRatio: 2.3 - 0.04 * n,
}