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

by

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

More Related Contents:

  1. Remove x-axis label/text in chart.js
  2. Dynamically update values of a chartjs chart
  3. Click events on Pie Charts in Chart.js
  4. How to put rounded corners on a Chart.js Bar chart
  5. ChartJS: datalabels: show percentage value in Pie piece
  6. Limit labels number on Chart.js line chart
  7. How to set ChartJS Y axis title?
  8. Chart.js v2: How to make tooltips always appear on pie chart?
  9. How to change colours for Angular-Chart.js
  10. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  11. Write tags in HTML and print
  12. Get class list for element with jQuery
  13. How to disable HTML links
  14. Converting user input string to regular expression
  15. How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
  16. Can I run javascript before the whole page is loaded?
  17. How do I clear the content of a div using JavaScript? [closed]
  18. How to reorder divs using flex box?
  19. “.addEventListener is not a function” why does this error occur?
  20. Javascript Code works in jsfiddle and but not in the Browser [closed]
  21. How can I stop an onclick event from firing for parent element when child is clicked?
  22. getting mouse position with javascript within canvas
  23. How can i access javascript variables in JSP?
  24. Maximum item size in IndexedDB
  25. How do I detect the inherited background-color of an element using jQuery/JS?
  26. multiple pages in Vue.js CLI
  27. Images failing to load in IE with DOM: 7009 error (unable to decode) in console
  28. How to change class for all elements retrieved by document.getElementsByClassName
  29. onchange / onclick in a checkbox doesn’t work in IE
  30. customize highcharts tooltip to show datetime

Leave a Comment