ChartJs mouse hover bug (showing previous charts)

Question

I think my issue is a known one, everytime I make a new chart and hover my mouse over some points in the canvas, the old charts flash in and out all the time. Here's one of the threads I followed to try and fix it, but nothing seems to work. I tried re-appending the canvas, using destroy, clear, if statements which should clear it, but nothing.

Here's my code:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: chartjsDate,
        datasets: [{
            label: 'temp',
            data: chartjsTemp,
            backgroundColor: "rgba(240,240,240,0.5)"
        }]
    }
});

I tried adding myChart.destroy(); before and after that code, even if(myChart!=null){myChart.destroy();}, but still nothing. Any help on how to fix it would be appreciated. All other threads I found are quite old and their solutions don't work.

Edit: Some stuff I tried, to no avail:

var myChart;
if (myChart != undefined || myChart !=null) {
    myChart.destroy();
}

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 11 · Answer 1 · edited Jan 30 '20 at 07:20

I also had this problem. To solve it, you first have to declare myChart variable globally and then try this way.

//var my chart declare globally.  
let chartData = {
        type: 'line',
        data: {
            labels: chartjsDate,
            datasets: [{
                label: 'temp',
                data: chartjsTemp,
                backgroundColor: "rgba(240,240,240,0.5)"
            }]
        }
        if (typeof(this.myChart) != "undefined") {
            this.myChart.destroy();
        }

        const ctx = this.renderRoot.querySelector('#chart-canvas').getContext('2d');
        this.myChart = new Chart(ctx, chartData);
        this.myChart.update();

score 10 · Accepted Answer · answered Apr 19 '17 at 09:53

10

Solved! I added this above the javascript code:

var button = document.getElementById("submitButton");
submitButton.addEventListener("click", function(){
    myChart.destroy();
});

And changed my submit button to have the id "submitButton", like this:

<input type="submit" class="btn btn-danger" id="submitButton" value="Send" />

This way, everytime you press the submit button, it destroys the previous chart. The weird thing is that when trying to use myChart.destroy(); I got errors.

answered Apr 19 '17 at 09:53

Newwt

491
1
5
22

2

how and where you declared your myChart? – QWERTY Jul 31 '17 at 10:19
Thanks... after lot of search, finally works for me. – Kuldeep Sep 03 '19 at 19:20
hyperfkcb, define as global var: var myChart; – Ismael Soschinski May 02 '20 at 19:36

score 6 · Answer 3 · answered Nov 05 '18 at 03:21

Above solutions are working 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 4 · Answer 4 · answered Jun 21 '19 at 07:14

4

It is not bug. Basically you were creating a new graph each time. What you need here is to update graph instead of drawing a new one on that canvas. This can be done using the following code.

 if(typeof Graph ==="undefined"){
       window.Graph = new Chart(Graph_ctx, Graph_config);
 }else{
       //updating with new chart data
       window.Graph.config=Graph_config;
       //redraw the chart
       window.Graph.update();
 }

answered Jun 21 '19 at 07:14

Sami Al-Subhi

4,406
9
39
66

This should be an answer. Very clean solution. – Systems Rebooter May 07 '20 at 08:58
Super clean solution for charts that need to be updated when something changes. – Romias Mar 13 '22 at 14:00

score 3 · Answer 5 · edited Jun 20 '20 at 09:12

3

  var ctxLine = document.getElementById("line-chart").getContext("2d");


 //var myLineChart;
 //myLineChart;
 if(window.bar != undefined)
    window.bar.destroy();
 window.bar = new Chart(ctxLine, {});

For more clear check this: solved-hovering-chartjs-bar-chart-showing-old-data

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 21 '17 at 06:56

Therichpost

1,759
2
14
19

matthew · Answer 6 · 2022-01-30T20:58:59.210

0

I usually do this before creating my chart

document.querySelector(".chart-container").innerHTML= '<canvas id="bar_chart"></canvas>';
var chart3 = $('#bar_chart');

graph = new Chart(chart3, {
type: 'bar',
data: chart_data,
options: options
});

My html:

<div class="chart-container">
  <canvas id="bar_chart"></canvas>0
</div>

edited Jan 30 '22 at 20:58

answered Jan 30 '22 at 20:52

matthew

21
3

score -1 · Answer 7 · answered Jun 28 '18 at 12:34

Just Use That and solve your Problem ;

if(window.myChart!=undefined) {
    var oldcanvasid= window.myChart.chart.ctx.canvas.id;
    if(chardcanvasid==oldcanvasid) {
             window.myChart.destroy();
    }
}
var ctx = document.getElementById(chardcanvasid).getContext('2d');
window.myChart = new Chart(ctx, {
   type: charttype,
   data: datass,
   options: optionss,
});

ChartJs mouse hover bug (showing previous charts)

7 Answers7

Linked