Chartjs-Chart js error in angular: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. Fix?

by

3👍

✅

You’re doing everything right, and you’re so close. I believe there’s no need to store anything in this.chart. Simply return and render. To fix your multi-instance error, simply add a check for chart existence before rendering.

 divClick()
{
 var chartExist = Chart.getChart("myChart"); // <canvas> id
    if (chartExist != undefined)  
      chartExist.destroy(); 

 $('#myModal').modal('show'); 
 this.getChartData()
}

getChartData(): any {
return new Chart(this.canvas.nativeElement.getContext('2d'), {data})
 
}

In your HTML, simply add id for chart

<canvas id="myChart" #chart>{{  chart  }}</canvas>

Leave a comment