How to clear a chart from a canvas so that hover events cannot be triggered?

Question

I'm using Chartjs to display a Line Chart and this works fine:

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);

But the problem occurs when I try to change the data for the Chart. I update the graph by creating a new instance of a Chart with the new data points, and thus reinitializing the canvas.

This works fine. However, when I hover over the new chart, if I happen to go over specific locations corresponding to points displayed on the old chart, the hover/label is still triggered and suddenly the old chart is visible. It remains visible while my mouse is at this location and disappears when move off that point. I don't want the old chart to display. I want to remove it completely.

I've tried to clear both the canvas and the existing chart before loading the new one. Like:

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);

and

chart.clear();

But none of these have worked so far. Any ideas about how I can stop this from happening?

Solution 1

I had huge problems with this

First I tried .clear() then I tried .destroy() and I tried setting my chart reference to null

What finally fixed the issue for me: deleting the <canvas> element and then reappending a new <canvas> to the parent container

---

My specific code (obviously there's a million ways to do this):

var resetCanvas = function(){
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph');
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height
  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

Solution 2

I have faced the same problem few hours ago.

The ".clear()" method actually clears the canvas, but (evidently) it leaves the object alive and reactive.

Reading carefully the official documentation, in the "Advanced usage" section, I have noticed the method ".destroy()", described as follows:

"Use this to destroy any chart instances that are created. This will clean up any references stored to the chart object within Chart.js, along with any associated event listeners attached by Chart.js."

It actually does what it claims and it has worked fine for me, I suggest you to give it a try.

Solution 3

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

Solution 4

This is the only thing that worked for me:

document.getElementById("chartContainer").innerHTML = ' ';
document.getElementById("chartContainer").innerHTML = '<canvas id="myCanvas"></canvas>';
var ctx = document.getElementById("myCanvas").getContext("2d");

Solution 5

We can update the chart data in Chart.js V2.0 as follows:

var myChart = new Chart(ctx, data);
myChart.config.data = new_data;
myChart.update();

View more solutions

Comments

[TheLettuceMaster]

Worked like a champ. If anyone knows if Chart.js version 2 fixes this, post it here. I wonder if destroy is broke or if we are using it incorrectly.

[RafaSashi]

this is the best alternative

[Ben Hoffman]

Could you show an example? I have tried to use blocking multiple times and it never works. I always receive an error that the method does not exist.

[David Dal Busco]

(<ChartInstance> this.chart).destroy();

[Antoine Pointeau]

This way work properly for me, it look like it destroy the hover callbacks. Tanks soo much !!

[beginner]

for me non of the above methods worked. This worked perfectly. Thanks a lot.

[Ignacio]

Nice! Thanks! I just added $('#results-graph').remove(); $('#graph-container').append('<canvas id="results-graph"><canvas>'); before chart creation.

[ThePhi]

This is the right anszwer. For future references, see: stackoverflow.com/questions/40056555/…

[Manjunath Siddappa]

Good one. Thanks

[Sumeet Kale]

.destroy() should work fine. If it does't, after calling .destroy() to draw new chart, use setTimeout()

[T.S]

I agree with this as being a much better solution - Destroy is wildly too radical, when all we really want is to just restart the "data".

[Sandy Elkassar]

that's the only solution worked for me many thanks, but for the width and height if you already set them fixed you should reset them to the same value in the reset function

[mimi]

destroy() failed for me with chartjs 2.8.0 but your solution just worked! In my case I only used $('#results-graph').remove(); $('#graph-container').append('<canvas id="results-graph"><canvas>'); before the new Chart(document.getElementById("myCanvas")

[yose]

Thanks man!! this is what i need . up voted!