title: Chart.js update function (chart,labels,data) will not update the chart
body: <p>I cannot debug the following code. I would like to update chart data (not add on top; delete current data and add completely new dataset). (Not)Working example on codepen:</p>
  
  <p><a href="https://codepen.io/anon/pen/bvBxpr" rel="nofollow noreferrer">https://codepen.io/anon/pen/bvBxpr</a></p>
  
  <pre><code>var config = {
    type: 'line',
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
         label: "My First dataset",
         data: [65, 0, 80, 81, 56, 85, 40],
         fill: false
      }]
     }
   };
  
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, config);
  
      labelsNew = ["Why", "u", "no", "work", "???"];
      dataNew = [2, 4, 5, 6, 10];
  
      function updateData(chart, label, data) {
        removeData();
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) =&gt; {
          dataset.data.push(data);
        });
        chart.update();
      };
  
  function removeData(chart) {
      chart.data.labels.pop();
      chart.data.datasets.forEach((dataset) =&gt; {
          dataset.data.pop();
      });
      chart.update();
  }
  
  $('.button-container').on('click', 'button', updateData(myChart, labelsNew, dataNew));
  </code></pre>