[Chartjs]-Chart js shows old data on mouse hover

by

16👍

✅

First off, why are you creating two same type of chart, with same data? There is no need!

You indeed need to use destroy method, but the reason it­‘s not working is because, you haven’t declared the chart variable in global scope. In order to destroy any instance of chart, the chart instance must be available in global scope (meaning, the chart variable should be globally accessible).

So, in your case, you should define the chart variable as :

myChart = new Chart(...);

or,

window.myChart = new Chart(...);

also, you need to destroy the previous instance of chart, before creating a new one, as such :

...
 if (myChart) myChart.destroy();
 myChart = new Chart(...);
...

2👍

Above solution worked for me but when I have two charts on the same page, Only one is showing. Other charts are becoming empty. Here is the solution for that.

  var ctx = document.getElementById("bar-chart").getContext("2d");  

  //Destroy the previous chart;
  //Rename the "bar" according to your component
  if(window.bar != undefined)
  window.bar.destroy();
  window.bar = new Chart(ctx , {});

if you don’t change the “bar”, only one chart will show in your page.

2👍

There is the best concept to empty the div and append the canvas through your JavaScript function. it will help you to re-plot your updated data

$('#DetailedGraphMain').empty().append('<canvas id="DetailedGraphMainChart" height="300"></canvas>');

1👍

Using Javascript we can empty the contain of the div and append the canvas once again

document.getElementById('pieChartContainer').innerHTML = "";
  document.getElementById('pieChartContainer').innerHTML = <canvas #pieCanvas style="height:40vh; width:80vw" id="pieCanvas"></canvas>;

0👍

I too had flickering issue when mouse hover on chart. I’ve two graphs and when I use below code, first graph is not appearing.

    var ctx = document.getElementById("bar-chart").getContext("2d");  
    //Destroy the previous chart;
    if(window.bar != undefined)
    window.bar.destroy();
    window.bar = new Chart(ctx , {});

After changing above code as below it is working.

Graph 1:    
    var ctx = document.getElementById("bar-chart").getContext("2d");  
    //Destroy the previous chart;
    if(window.bar != undefined)
     window.bar.destroy();
    window.bar = new Chart(ctx , {});

Graph 2:

    var ctx1 = document.getElementById("line-chart").getContext("2d");  
    //Destroy the previous chart;
    if(window.barline != undefined)
     window.barline .destroy();
    window.barline = new Chart(ctx1 , {});`

Leave a comment