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

Question

I use Chartjs to display a line chart, and this works great:

// 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 a chart. I am updating the chart by creating a new chart instance with new data points and thus reinitializing the canvas.

It works great. However, when I wind up on a new chart, if I accidentally go through certain locations corresponding to the points displayed on the old chart, the hover / mark still fires and the old chart suddenly appears. It remains visible when my mouse is in this place and disappears when moving from this point. I do not want the old chart to be displayed. I want to completely remove it.

I tried to clear both the canvas and the existing chart before loading a new one. How:

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

and

 chart.clear(); 

But none of them have worked so far. Any ideas on how I can stop this?

Answer 1

I had huge problems with this

First I tried .clear() , then I tried .destroy() , and I tried to set the reference to the diagram to zero

Which finally fixed the problem for me: removing the <canvas> and then reusing the new <canvas> in the parent container

---

My special code (obviously, there are 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); }; 

Answer 2

I ran into the same problem a few hours ago.

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

After carefully reading the official documentation , in the “Advanced Use” section, I noticed the “.destroy ()” method, described as follows:

"Use this to destroy instantiated charts. Clear any links stored in the chart object in Chart.js, along with any related event listeners attached to Chart.js."

He really does what he claims, and he did a great job with me, I suggest you give it a try.

Answer 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}); } 

Answer 4

This is the only thing that worked for me:

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

Answer 5

I had the same problem here ... I tried using the destroy () and clear () method, but without success.

I solved it as follows:

HTML:

 <div id="pieChartContent"> <canvas id="pieChart" width="300" height="300"></canvas> </div> 

JavaScript:

 var pieChartContent = document.getElementById('pieChartContent'); pieChartContent.innerHTML = '&nbsp;'; $('#pieChartContent').append('<canvas id="pieChart" width="300" height="300"><canvas>'); ctx = $("#pieChart").get(0).getContext("2d"); var myPieChart = new Chart(ctx).Pie(data, options); 

This works great for me ... I hope this helps.

Answer 6

It worked very well for me.

  var ctx = $("#mycanvas"); var LineGraph = new Chart(ctx, { type: 'line', data: chartdata}); LineGraph.destroy(); 

Use .destroy to destroy instantiated diagrams. This will clear any links stored in the chart object in Chart.js, as well as any related event listeners attached by Chart.js. This must be called before the canvas is reused for the new chart.

Answer 7

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(); 

Answer 8

Using CanvasJS, this will help me clear the chart and everything else can work for you too, leaving you to completely set the canvas / chart before each processing in another place:

 var myDiv= document.getElementById("my_chart_container{0}"; myDiv.innerHTML = ""; 

Answer 9

I could not get .destroy () to work, so this is what I do. The chart_parent is where I want to show the canvas. I need the size to be resized every time, so this answer is an extension of the above.

HTML:

<div class="main_section" > <div id="chart_parent"></div> <div id="legend"></div> </div>

JQuery

  $('#chart').remove(); // this is my <canvas> element $('#chart_parent').append('<label for = "chart">Total<br /><canvas class="chart" id="chart" width='+$('#chart_parent').width()+'><canvas></label>'); 

Answer 10

When you create one new chart.js file, this creates one new hidden iframe, you need to delete the canvas and the old iframes.

 $('#canvasChart').remove(); $('iframe.chartjs-hidden-iframe').remove(); $('#graph-container').append('<canvas id="canvasChart"><canvas>'); var ctx = document.getElementById("canvasChart"); var myChart = new Chart(ctx, { blablabla }); 

link: https://github.com/zebus3d/javascript/blob/master/chartJS_filtering_with_checkboxs.html

Answer 11

If you use chart.js in an Angular project with Typescript, you can try the following;

 Import the library: import { Chart } from 'chart.js'; In your Component Class declare the variable and define a method: chart: Chart; drawGraph(): void { if (this.chart) { this.chart.destroy(); } this.chart = new Chart('myChart', { ......... }); } In HTML Template: <canvas id="myChart"></canvas> 

Answer 12

For me it worked:

  var in_canvas = document.getElementById('chart_holder'); //remove canvas if present while (in_canvas.hasChildNodes()) { in_canvas.removeChild(in_canvas.lastChild); } //insert canvas var newDiv = document.createElement('canvas'); in_canvas.appendChild(newDiv); newDiv.id = "myChart"; 

Answer 13

Chart.js has an error: Chart.controller(instance) registers any new chart in the global Chart.instances[] property and removes it from this property on .destroy() .

But when creating a chart, Chart.js also writes the ._meta property to the data set variable:

 var meta = dataset._meta[me.id]; if (!meta) { meta = dataset._meta[me.id] = { type: null, data: [], dataset: null, controller: null, hidden: null, // See isDatasetVisible() comment xAxisID: null, yAxisID: null }; 

and does not remove this property on destroy() .

If you use the old dataset object without deleting the ._meta property , Chart.js will add the new dataset to ._meta without deleting the previous data. Thus, each time you re-initialize the chart, your dataset object accumulates all previous data.

To avoid this, destroy the dataset object after calling Chart.destroy() .

Answer 14

It worked for me. Add a call to clearChart, at the top of your updateChart ()

 'function clearChart() { event.preventDefault(); var parent = document.getElementById('parent-canvas'); var child = document.getElementById('myChart'); parent.removeChild(child); parent.innerHTML ='<canvas id="myChart" width="350" height="99" ></canvas>'; return; }' 

Answer 15

Since destruction destroys "everything," a cheap and easy solution when all you really need is just to "dump the data." Dumping your datasets into an empty array will also work fine. So, if you have a dataset with labels and an axis on each side:

 window.myLine2.data.labels = []; window.myLine2.data.datasets[0].data = []; window.myLine2.data.datasets[1].data = []; 

After that, you can simply call:

 window.myLine2.data.labels.push(x); window.myLine2.data.datasets[0].data.push(y); 

or, depending on whether you are using a 2d dataset:

 window.myLine2.data.datasets[0].data.push({ x: x, y: y}); 

This will be much easier than completely destroying your entire graph / data set and rebuilding everything.

Answer 16

Before initializing a new chart, we deleted / destroyed an instance of the preview chart, if it already exists, and then, for example, created a new chart.

 if(myGraf != undefined) myGraf.destroy(); myGraf= new Chart(document.getElementById("CanvasID"), { ... } 

Hope this helps.