Chart.js update in angular

Question

I try to update my Chart.js chart dynamicly in angular, but the update methode dosen't show effect. Here is my code:

//init chart

$scope.init = function () {
        var req = {
            method: 'POST',
            url: '...'
        };

        $http(req).then(function(res) {
            $scope.state.chart = new Chart(document.getElementById("mychart").getContext('2d'), {
                type: 'bar',
                data: {
                    labels: res.data.months,
                    datasets: [{
                        label: 'All',
                        data: res.data.sums
                    }]
                }
            });
        });
};

// update chart

$scope.categoryChange = function () {
        var req = {
            method: 'POST',
            url: '...'
        };

        $http(req).then(function(res) {
            $scope.state.chart.data.labels = res.data.months;
            $scope.state.chart.data.datasets.label = $scope.state.category;
            $scope.state.chart.data.datasets.data = res.data.sums;

            $scope.state.chart.update();
        });
 };

Has someone an idear why it is not working?

Answer 1

I'm using Ionic, but you should try to do something like this:

// Only Change 3 values
let data = [
  Math.round(Math.random() * 100),
  59,
  80,
  Math.random() * 100,
  56,
  Math.random() * 100,
  40
];
let clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = data;
this.barChartData = clone;
/**
 * (My guess), for Angular to recognize the change in the dataset
 * it has to change the dataset variable directly,
 * so one way around it, is to clone the data, change it and then
 * assign it;
 */