将鼠标悬停在折线图上会显示chart.js中的旧图表数据问题

Question

I have a line graph with using chart.js. Here I have 3 options for showing their data: All time, 3 Months, 1 months. which are working fine. but the issue is the, whenever user select 1 month or 3-month data graph and hover the mouse cursor over graph lines then it shows old data(All time).

Expected outcome: Chart no longer has any trace of original data, but instead, shows new data and user can interact with it without issues.

Actual outcome: Chart shows new data, but if a user hovers over the chart, it'll flicker back and forth between original and new data.

Here is my code:

 $.ajax({
        url: "some_url_here,
        method: "GET",
        success: function(data) {
            var month = [];
            var customers = [];
            var data = JSON.parse(data);
            var margin = [];
            for(var i in data) {
                month.push( data[i].time);
                customers.push(data[i].profit);
                margin.push(data[i].exchnage);
            }
            var chartdata1 = {
                 labels: month,         
                datasets : [
                    {
                        label: 'monthly customers for Year 2016',
                        backgroundColor: 'rgba(255, 99, 132, 0.5)',
                        borderColor: 'rgb(255, 99, 132)',

                        data: customers,
                        lineTension: 0
                    }

                ]
            }; 

            var frame = $("#"+currcanvas);
var aR = null;  //store already returned tick
var ctx = document.getElementById(currcanvas).getContext('2d');
            var barGraph1 = new Chart(frame, {
                type: 'line',               
                data: chartdata1,
                options: {

           scales: {
         xAxes: [{
            ticks: {
               autoSkip: false,
               callback: function(e) {
                        if(e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)!=null){
                        var tick = e.match(/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sept|Oct|Nov|Dec).*?\d+/g)[0];
                  if (tick != aR) {
                     aR = tick;
                     return tick;
                  }
                  }
               }
            }
         }]
      },
                          responsive: true,
                          tooltips: {
                              /* bodyFontColor: "#000000",fontColor: "#000000", //#000000

    borderColor: 'rgba(255, 99, 132, 0.5)',
    backgroundColor: '#EEEEEE',*/
                           callbacks: {
                              afterBody: function(t, d) {
                                 return 'current profit/loss: ' + margin[t[0].index];
                              }
                           }
                        }
                       }

            });

        }
            });

So please guide me. where I am going wrong or is there any way to fix this issue. Thanks

Answer 1

Since, you are initializing a new instance of chart each time the user selects an option, hence you need to destroy the previous instance of chart before initializing a new one.

To accomplish so, add the following before initializing your chart ...

// destroy previous instance of chart
barGraph1 && barGraph1.chart && barGraph1.chart.destroy();

// initialize chart
barGraph1 = new Chart(frame, {
         type: 'line',
         data: chartdata1,
         ...

note: make sure barGraph1 variable is globally accessible