chart.js 라이브러리 사용시 발생가능한 문제

동일한 canvas에 기존 차트 객체를 정상 종료하지 않고 재생성하는 경우,

Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.

<div class="col-4">
	<h3 class="h4">종합점수</h3>
	<canvas id="overallChart"></canvas>
</div>

해당 canvas에 기존 차트 객체를 종료하고 다시 생성해주면 됩니다.

저는 아래와 같이 코드를 작성하였습니다.

//객체 생성 전에 기존 객체가 배열에 있으면 종료, 배열 초기화
charts.forEach(obj =>{
	obj.destroy()
})
charts = [];

//차트 객체 생성, 배열로 객체 관리
let chart = new Chart($("#overallChart"), config)
charts.push(chart)

 

https://chartjs.org/docs/latest/

Chart.js | Chart.js