Chartjs Mouse Hover Bug (showing Previous Charts)

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 thr

Solution 1:

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:

<inputtype="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.

Solution 2:

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

Solution 3:

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 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 4:

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


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

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

Solution 5:

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(typeofGraph ==="undefined"){
       window.Graph = newChart(Graph_ctx, Graph_config);
 }else{
       //updating with new chart datawindow.Graph.config=Graph_config;
       //redraw the chartwindow.Graph.update();
 }