Chartjs-Reanimate Data Values in CharJS

I have also come across the same problem where the animation only works only for the first time for a unique update, however, couldn’t find the root cause.

But there is a nice and easy way to get this done is render a new chart after destroying the previous chart. I have used jQuery to clone the config to create a new chart in the below code, but you can use pure javascript also. See the below code or this working fiddle -> http://jsfiddle.net/jpzg7w2k/1/

var dataAno = {
  datasets: [{
    data: [300, 150, 100, 500, 323, 145, 665, 143, 211, 100, 123, 400],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C",
      "#9400D3",
      "#4169E1",
      "#CD5C5C",
      "#FF6347",
      "#20B2AA",
      "#3CB371",
      "#FF8C00",
      "#DAA520",
      "#B0E0E6"
    ]
  }],
  labels: [
    "Janeiro",
    "Feveireiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro"
  ]
};

var canvasAno = document.getElementById("myChartAno");
var ctxAno = canvasAno.getContext("2d");
var myNewChartAno = new Chart(ctxAno, {
  type: 'doughnut',
  data: dataAno,
  options: {
    legend: {
      position: 'bottom',
      fullWidth: true
    },
    animation: {
      duration: 4000
    }
  }
});


var dataLimpa = {
  datasets: [{
    data: [0, 0, 0],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
};

var dataJan = {
  datasets: [{
    data: [30, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ],
};

var dataFev = {
  datasets: [{
    data: [150, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataMar = {
  datasets: [{
    data: [5, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataAbr = {
  datasets: [{
    data: [32, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataMai = {
  datasets: [{
    data: [654, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataJun = {
  datasets: [{
    data: [53, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataJul = {
  datasets: [{
    data: [21, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataAgo = {
  datasets: [{
    data: [423, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataSet = {
  datasets: [{
    data: [1300, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataOut = {
  datasets: [{
    data: [213, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataNov = {
  datasets: [{
    data: [765, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var dataDez = {
  datasets: [{
    data: [3100, 50, 100],
    backgroundColor: [
      "#F7464A",
      "#46BFBD",
      "#FDB45C"
    ]
  }],
  labels: [
    "Red",
    "Green",
    "Yellow"
  ]
};

var canvasMes = document.getElementById("myChartMes");
var ctxMes = canvasMes.getContext("2d");

var myNewChartMes = new Chart(ctxMes, {
  type: 'bar',
  data: dataDez,
  options: {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    },
  }
});



canvasAno.onclick = function(evt) {
  var activePoints = myNewChartAno.getElementsAtEvent(evt);
  if (activePoints[0]) {
    var chartData = activePoints[0]['_chart'].config.data;
    var idx = activePoints[0]['_index'];
    var mesclicado;
    var dataSelect;

    switch (idx) {
      case 0:
        mesclicado = 'Janeiro';
        dataSelect = dataJan;
        break;
      case 1:
        mesclicado = 'Fevereiro';
        dataSelect = dataFev;
        break;
      case 2:
        mesclicado = 'Março';
        dataSelect = dataMar;
        break;
      case 3:
        mesclicado = 'Abril';
        dataSelect = dataAbr;
        break;
      case 4:
        mesclicado = 'Maio';
        dataSelect = dataMai;
        break;
      case 5:
        mesclicado = 'Junho';
        dataSelect = dataJun;
        break;
      case 6:
        mesclicado = 'Julho';
        dataSelect = dataJul;
        break;
      case 7:
        mesclicado = 'Agosto';
        dataSelect = dataAgo;
        break;
      case 8:
        mesclicado = 'Setembro';
        dataSelect = dataSet;
        break;
      case 9:
        mesclicado = 'Outubro';
        dataSelect = dataOut;
        break;
      case 10:
        mesclicado = 'Novembro';
        dataSelect = dataNov;
        break;
      case 11:
        mesclicado = 'Dezembro';
        dataSelect = dataDez;
        break;
    }

    document.getElementById('mes').innerHTML = mesclicado;

    var config = $.extend(true, {}, myNewChartMes.config);
    var canvasMes = document.getElementById("myChartMes");
    var ctxMes = canvasMes.getContext("2d");    

    config.data = dataSelect; 

    if(myNewChartMes)
    {
        myNewChartMes.destroy();
    }

    myNewChartMes = new Chart(ctxMes, config);                             
  }
}