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

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 element and then reappending a new 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  element
  $('#graph-container').append('');
  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);
};