How to solve a Chart.js 2.0 issue with mouseover and several updates?

Question

Very strange, I have a Chart.js chart that I need to update dinamically. The update works fine, but if you move the mouse over the chart or click several times the button Update

Answer 1

It is because you mixed up the functions to create a chart and add more data. Fixed it by separating them as shown below.

var canvas = document.getElementById("canvasChart");
var $chart;
function createChart(ID) {
  console.log(canvas);
  console.log(chartsParams);
  $chart = new Chart(canvas, chartsParams['myChart']);
}

function addData() {
  $chart.data.datasets.push({
    label: 'Added',
    data: [12, 32, 43, 53]
  });
  $chart.update();
}

createChart();
document.getElementById("addButton").addEventListener("click", addData);

demo here : https://jsfiddle.net/es0kt36e/2/