Chart.js showing old chart on hover

Question

I am having 3 different charts on my web page for which I am using Chartjs. The problem occurs when I hover over one of the charts it starts showing old data. I am creating chart on a HTML button click. I checked few answers on stackoverflow (for eg. destroy()) but that is not working for me. Below is the function for chart. please guide me regarding this.

   <script>
         function dailyPrd1() {
            var pl_type1 = "";
            var pl_sl1 = "";
            var date1="";
            pl_type1 = plant_type1.options[plant_type1.selectedIndex].innerHTML;
            //alert(pl_type1);
            pl_sl1 = plant_select1.options[plant_select1.selectedIndex].innerHTML;
            //alert(pl_sl1);
            date1 = document.getElementById('date2').value;
            //alert(date1);
            var pl2 = "";
            pl2 = pl_type1 + '-' + pl_sl1;
            var obj2 = "";
            var hrs1 = [];
            var prod1 = [];
            var colr1 = [];
            var req2 = new XMLHttpRequest();           
            var config_string2 = '<%=ConfigurationManager.AppSettings["serverip11"].ToString() %>' + pl_sl1 + "/" + pl_type1 + "/" + date1;           
            req2.open("GET", config_string2, true);
            req2.send();
            req2.overrideMimeType("application/json");
            req2.onload = function () {                
                obj2 = JSON.parse(this.response);                
                obj2 = JSON.parse(obj2);

                var len12 = 0;
                len12 = obj2.day_list.length;                
                for (i = 0; i < len12; i++) {
                    hrs1.push(obj2.day_list[i].day);
                }
                var speedCanvas2 = document.getElementById("myChart3");
                Chart.defaults.global.defaultFontFamily = "Lato";
                Chart.defaults.global.defaultFontSize = 16;
                var chartOptions2 = {
                    responsive: true,
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Days'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Value in cu.m'
                            }
                        }]
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            boxWidth: 80,
                            fontColor: 'black'
                        }
                    }
                };

                var speedData2 = {
                    labels: hrs1,
                    // datasets: [dataFirst, dataSecond]
                };               
                var lineChart2 = new Chart(speedCanvas2, {
                    type: 'bar',
                    data: speedData2,
                    options: chartOptions2
                });
                var iti1 = 0;
                iti1 = obj2.prod_qty.length;

                var aaa = 'Pl 1'
                for (j = 0; j < iti1; j++) {
                    prod1.push(obj2.prod_qty[j].tot_prod);
                }
                    addData(lineChart2, pl2, getRandomColor(), prod1);
            }
        }            
    </script>

Answer 1

After you change your data you should update your chart with chartVariable.update().

I made a JSBin which explains you how to use it.

The important function for you is the last in the code, addDataButton() which gets triggered by a button click. In this function I add new data and update my chart after that.

Instead of chartVariable and chart you should use lineChart2 in your case.

Complete code:

let numberOfDataCounter = 0 // Current data counter
const numberOfDataAtBeginning = 4 // data number to start with
const weekdays = ["Su", "Mo", "Du", "We", "Th", "Fr", "Sa"]

function randomNumber(){
  let randomNumber = Math.floor(Math.random()*100)
  return randomNumber
}

let chartData = {
  label: [],
  data: []
}

function addData (){
  chartData.label.push(weekdays[numberOfDataCounter % 7])
  chartData.data.push(randomNumber())

  numberOfDataCounter++
}

// Fill chart with data at beginning
while (numberOfDataAtBeginning>numberOfDataCounter) {
  addData()
}

let data = {
  labels: chartData.label,
  datasets: [{
    label: "Label",
    data: chartData.data
  }]
}

let chart = new Chart(document.getElementById("chart"), {
  type: 'line',
  data: data,  
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 100
        }
      }]
    }
  }
});

function addDataButton(){
  addData()
  chart.update()
}