Chart Js Shows Old Data On Mouse Hover

How can I fix the chart js bug like it shows old data when I move the mouse on the chart. My Js file $('#select-question').change(function(){ var questionId = $('option:selec

Solution 1:

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(...);
...

Solution 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 componentif(window.bar != undefined)
  window.bar.destroy();
  window.bar = newChart(ctx , {});

if you don't change the "bar", only one chart will show in your page.

Solution 3:

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 #pieCanvasstyle="height:40vh; width:80vw"id="pieCanvas"></canvas>;

Solution 4:

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('<canvasid="DetailedGraphMainChart"height="300"></canvas>');

Solution 5:

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 = newChart(ctx , {});

After changing above code as below it is working.

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

Graph 2:

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