Chart js shows old data on mouse hover

Question

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:selected",this).val();
   $.ajax({
          type : "GET",
          dataType:"JSON",
          url : '/get-percentage',
          data : 
                {
                  'questionId' : questionId
                },
                success: function(data)
                {
                   
                    console.log(data)
                    if(data == '')
                    {
                      alert('No Data')
                    }
                    var option = [];
                    var label = [];
                     for(var i=0;i < data.example.length; i++)
                     {
                    option.push(data.example[i]);
                    label.push(data.labels[i]);
                    
                }

                var chartdata = {
                labels: label,
                datasets : [
                {
                        label: 'FeedBack Report Graph',
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: option
                        }
                      ]
             };

        var ctx = $("#mycanvas");
                var myChart = new Chart(ctx, { type: 'pie', data: chartdata, options:{
                                   legend: {
                                   display: true
                              }
                            }  });
                myChart.destroy();    
       
        var barGraph = new Chart(ctx, {
                            type: 'pie',
                            data: chartdata,
                            options: {
                                   legend: {
                                   display: true
                              }
                            }
            });
          } 
   })
  
 })

I can able to display data from JSON response in chart js but the problem with it shows previous values when I just move the mouse on the chart.

I have tried to destroy method but it did not work. How to prevent this problem??.

Does this answer your question? [Chartjs Bar Chart showing old data when hovering](https://stackoverflow.com/questions/42788924/chartjs-bar-chart-showing-old-data-when-hovering) — Wai Ha Lee, May 13 '20 at 05:54

score 16 · Accepted Answer · answered Aug 02 '17 at 09:52

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

answered Aug 02 '17 at 09:52

ɢʀᴜɴᴛ

32,025
15
116
110

No Brother, the data will change for every chart. Anyway, Your answer worked perfectly.Thank you so much. – Aug 02 '17 at 10:05
If the data is different then its okay. Cheers!! – ɢʀᴜɴᴛ Aug 02 '17 at 10:07
1

Thanks again for you help, Cheers brother. – Aug 02 '17 at 10:09
1

Thanks for this answer i am facing same problem but with your solution i am getting solution so thank you so much. also +1 vote – Edit Aug 25 '17 at 09:11
Thanks. destroy() also work ..but one thing I observed after destroying, canvas does not create i.e width and height not set properly – Priyanka Ahire Jun 15 '20 at 17:18

score 2 · Answer 2 · answered Nov 05 '18 at 03:24

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.

score 2 · Answer 3 · edited Feb 25 '21 at 19:39

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

edited Feb 25 '21 at 19:39

Sabito stands with Ukraine

4,271
8
34
56

answered Sep 17 '19 at 12:04

SantoshK

1,789
16
24

score 1 · Answer 4 · edited Feb 25 '21 at 19:39

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

edited Feb 25 '21 at 19:39

Sabito stands with Ukraine

4,271
8
34
56

answered Jun 15 '20 at 17:19

Priyanka Ahire

432
2
9
28

score 0 · Answer 5 · answered Jan 13 '22 at 06:27

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 , {});`

Chart js shows old data on mouse hover

5 Answers5

Linked