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\').getConte         


        

Answer 1

Using CanvasJS, this works for me clearing chart and everything else, might work for you as well, granting you set your canvas/chart up fully before each processing elsewhere:

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

Answer 2

This 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 3

When you create one new chart.js canvas, this generate one new iframe hidden, you need delete the canvas and the olds 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 });

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