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

User · Answer

What we did is  before initialization of new chart  remove destroy the previews Chart instance  if exist already  then create a  new chart  for example  if myGraf    undefined      myGraf destroy        myGraf  new Chart document getElementById  CanvasID                             Hope this helps

User · Answer

Chart js has a bug  Chart controller instance  registers any new chart in a global property Chart instances   and deletes it from this property on  destroy      But at chart creation Chart js also writes   meta property to dataset 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 it doesn t delete this property on destroy      If you use your old dataset object without removing   meta property  Chart js will add new dataset to   meta without deletion previous data  Thus  at each chart s re-initialization your dataset object accumulates all previous data   In order to avoid this  destroy dataset object after calling Chart destroy

User · Answer

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  lt canvas gt  element and then reappending a new  lt canvas gt  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  lt canvas gt  element       graph-container   append   lt canvas id  results-graph  gt  lt canvas gt       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

User · Answer

For me this worked    x000D   x000D    var in canvas   document getElementById  chart holder    x000D     remove canvas if present x000D     while  in canvas hasChildNodes      x000D        in canvas removeChild in canvas lastChild   x000D         x000D     insert canvas x000D     var newDiv   document createElement  canvas    x000D     in canvas appendChild newDiv   x000D     newDiv id    myChart   x000D   x000D   x000D

User · Answer

Simple edit for 2020   This worked for me  Change the chart to global by making it window owned  Change the declaration from var myChart to window myChart   Check whether the chart variable is already initialized as Chart  if so  destroy it and create a new one  even you can create another one on the same name  Below is the code      if window myChart instanceof Chart        window myChart destroy      var ctx   document getElementById  myChart   getContext  2d      Hope it works

User · Answer

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    lt canvas id  myChart  width  350  height  99   gt  lt  canvas gt                     return

User · Answer

This is the only thing that worked for me    document getElementById  chartContainer   innerHTML     amp nbsp    document getElementById  chartContainer   innerHTML     lt canvas id  myCanvas  gt  lt  canvas gt    var ctx   document getElementById  myCanvas   getContext  2d

User · Answer

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   lt canvas id  canvasChart  gt  lt canvas gt      var ctx   document getElementById  canvasChart     var myChart   new Chart ctx    blablabla       reference  https   github com zebus3d javascript blob master chartJS filtering with checkboxs html

User · Answer

This worked very well for me      var ctx       mycanvas         var LineGraph   new Chart ctx            type   line           data  chartdata            LineGraph destroy      Use  destroy 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  This must be called before the canvas is reused for a new chart

User · Answer

Since destroy kind of destroys  everything   a cheap and simple solution when all you really want is to just  reset the data   Resetting your datasets to an empty array will work perfectly fine as well  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 this  you can simply call   window myLine2 data labels push x   window myLine2 data datasets 0  data push y     or  depending whether you re using a 2d dataset   window myLine2 data datasets 0  data push   x  x  y  y      It ll be a lot more lightweight than completely destroying your whole chart dataset  and rebuilding everything

User · Answer

If you are using chart js in an Angular project with Typescript  the 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   lt canvas id  myChart  gt  lt  canvas gt

User · Answer

for those who like me use a function to create several graphics and want to update them a block too  only the function  destroy   worked for me  I would have liked to make an  update    which seems cleaner but     here is a code snippet that may help   var SNS Chart           IF LABELS IS EMPTY  after update my datas  if  labels length    0           if  Object entries SNS Chart  length    0                 array items datas forEach function for item  k arr                   SNS Chart    for item     destroy                                         LOOP OVER ARRAY ITEMS        array items datas forEach function for item  k arr                    chart              OPTIONS title text   array str k arr                var elem   document getElementById for item                SNS Chart    for item       new Chart elem                     type   doughnut                    data                         labels  labels    for item                           datasets                                label                              backgroundColor                                  5b9aa0                                 c6bcb6                                 eeac99                                 a79e84                                 dbceb0                                 8ca3a3                                 82b74b                                 454140                                 c1502e                                 bd5734                                                     borderColor    757575                           borderWidth   2                             hoverBackgroundColor     616161                           data  datas    for item                                                                   options  OPTIONS                                   chart                      END LOOP ARRAY ITEMS          END IF LABELS IS EMPTY

User · Answer

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

User · Answer

First put chart in some variable then history it next time before init  Check if myChart object exist then distort it     if  scope myChart           scope myChart destroy                scope myChart    new Chart targetCanvas

User · Answer

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

User · Answer

You should save the chart as a variable  On global scope  if its pure javascript  or as a class property  if its Angular  Then you ll be able to use this reference to call destroy    Pure Javascript  var chart   function startChart            Code for chart initialization     chart   new Chart          Replace     with your chart parameters    function destroyChart         chart destroy       Angular  export class MyComponent       chart       constructor                Your constructor code goes here            ngOnInit                Probably you ll start your chart here             Code for chart initialization         this chart   new Chart          Replace     with your chart parameters            destroyChart             this chart destroy

User · Answer

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

User · Answer

I couldn t get  destroy   to work either so this is what I m doing   The chart parent div is where I want the canvas to show up   I need the canvas to resize each time  so this answer is an extension of the above one   HTML    lt div class  main section   gt       lt div id  chart parent  gt  lt  div gt       lt div id  legend  gt  lt  div gt   lt  div gt    JQuery         chart   remove       this is my  lt canvas gt  element       chart parent   append   lt label for    chart  gt Total lt br   gt  lt canvas class  chart  id  chart  width       chart parent   width     gt  lt canvas gt  lt  label gt

User · Answer

Complementing Adam s Answer  With Vanilla JS     x000D   x000D  document getElementById  results-graph   remove      canvas x000D  div   document querySelector   graph-container      canvas parent element x000D  div insertAdjacentHTML  afterbegin     lt canvas id  results-graph  gt  lt  canvas gt       adding the canvas again x000D   x000D   x000D

User · Answer

I had the same problem here    I tried to use destroy   and clear   method  but without success   I resolved it the next way   HTML    lt div id  pieChartContent  gt       lt canvas id  pieChart  width  300  height  300  gt  lt  canvas gt   lt  div gt    Javascript   var pieChartContent   document getElementById  pieChartContent    pieChartContent innerHTML     amp nbsp        pieChartContent   append   lt canvas id  pieChart  width  300  height  300  gt  lt canvas gt      ctx       pieChart   get 0  getContext  2d            var myPieChart   new Chart ctx  Pie data  options     It works perfect to me    I hope that It helps

User · Answer

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

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

Examples related to javascript

Examples related to html

Examples related to charts

Examples related to chart.js