 |
| Photo by Isaac Smith on Unsplash |
요약
- chart.js는 canvas에 차트를 그린다. 이 때 canvas의 크기는 반응형이다.
- canvas의 크기를 고정하려면 option에 responsive: false를 추가한다.
- 가로와 세로축의 범위를 지정하려면 scale 옵션에서 suggestedMin과 suggestedMax 값을 지정한다.
왜?
chart.js를 사용해서 차트를 그리면 브라우저 크기나, 데이터에 따라 차트의 기울기가 달리 보인다. 일반적인 경우라면 별 문제가 없을 것 같다. 하지만 여러 데이터를 비교해서 보다 보면 조회하는 데이터에 따라 범위와 기울기가 달라져서 오해를 하게 되는 경우가 생겼다.
그래서 차트를 그리는 canvas의 크기와 데이터의 범위를 고정할 수 있는 방법을 찾았다.
canvas의 크기 고정하기
chart.js를 사용할 때 canvas의 크기를 고정하는 방법은 간단하다. 아래 코드를 option에 추가하면 된다.
데이터 범위 고정하기
데이터의 범위를 고정하는 방법도 간단하다. 가로 축과 세로 축의 최소값과 최대값을 option에서 지정해 주면 된다.
적용 예시
