Chart.js trouble shooting

ℹ️ 버전: chart.js 3.5.0

1. Chart.js core.js:6162 ERROR Error: “line” is not a registered controller

위와 같은 에러가 발생시 조치

import { Chart, registerables, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js'
...

// new Chart를 하기전에 필요한 패키지들을 다 등록해준다.
Chart.register(...registerables)
Chart.register(LineController, LineElement, PointElement, LinearScale, Title)

new Chart(ctx, {..})

2. 이미 차트 인스턴스가 있어서 제거해줘야할때.

변수를 통해서 존재시 삭제해준다.

let myLineChart = null
...
if (myLineChart) {
  myLineChart.destroy()
}
myLineChart = new Chart(ctx, {...})

3. 차트가 다시 생성될때 부모컨테이너 사이즈와 상관없이 커져서 overflow될때

maintainAspectRatio: false,
위에 설정을 옵션에 추가해준다.

  myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [
        {
          label: 'Confirmed for the last two weeks',
          backgroundColor: '#feb72b',
          borderColor: '#feb72b',
          data,
        },
      ],
    },
    options: {
      maintainAspectRatio: false,
    },
  })

참고링크

• Chart.js core.js:6162 ERROR Error: “line” is not a registered controller