Chart.js 가운데 정렬하는 방법

개인적으로 진행하는 프로젝트가 있는데요. 해당 프로젝트에서는 Chart.js라는 라이브러리를 사용하고 있습니다. Chart.js를 사용해서 코딩을 하다 보면 잘 안 되는 것 중 하나가 가운데 정렬입니다.

Chart.js 가운데 정렬하기

Chart.js 에서는 <canvas> 태그를 이용해서 차트를 그리는데요. 이 태그의 문제가 가운데 정렬이 잘 되지 않는다는 점입니다.

설령 강제로 가운데 정렬을 시켰다고 해도 데이터 변경으로 인해 다시 그리기를 진행하게 되면 차트 자체가 정상적으로 나타나지 않는 경우도 있습니다.

저는 Vue에서 Chart.js를 사용하고 있으니 참고하시고.. 아래 div 부분만 참고하시면 됩니다.

일단 제가 사용한 방법을 코드로 설명드리면 다음과 같습니다.

<div style="height: 40rem;  display: flex; align-items: center; justify-content: center;">
      <canvas ref="chart"></canvas>
</div>

위와 같이 하면 Chart를 destory 후 다시 생성하더라도 정상적으로 가운데 정렬이 이루어집니다.

많은 블로그나 외국 사이트에서는 아래와 같은 방법을 예시로 알려주는데요. 저 같은 경우에는 다시 그리기를 할 때 height 가 0으로 고정돼버리는 현상이 나타났습니다.

canvas {
    margin: 0 auto;
}

만약 chart의 변경이 잦은 UI라면 제가 제시한 코드를 참고해보세요.

Interhelper

생활에 도움이 되는 정보를 모아 제공해드립니다.