Chart.js 2.x animation onComplete not responding

Question

I'm trying to set a function for an animation callback of a chart. So far my options object looks like this:

$scope.chartOptions = {
        responsive: true,
        datasetFill: false,
        title: {
            display: true,
            text: "Title",
            fontSize: 14
        },
        tooltips: { mode: 'label' },
        animation: {
            onComplete: function(animation){
                $log.debug('onComplete');
            },
            onProgress: function(animation) {
                $log.debug('onProgress');
            }
        }
}

See, there I have animation onComplete and onProgress that don't work. However if I set the global Chart configuration it works properly.

Chart.defaults.global.animation.onProgress = function() { $log.debug('onprogress') };

It seems like it's a simple mistake, but I just can't see it! I'm referring to the animation callbacks correct? I don't won't to set it on globals, so I can have different behaviours for different charts.

Thank you!

EDIT: Also, using the global way I can't access the chart instance. Like:

onComplete: function(animation){
                 if(!this.savedImage) {
                     $scope.saveChartImage(this);
                     this.savedImage = true;
                 }

According to this example (https://github.com/chartjs/Chart.js/blob/master/samples/AnimationCallbacks/progress-bar.html) it looks like you're doing it right. How are you passing the `options` to the chart object? — J. Titus, Aug 31 '16 at 13:34

score 1 · Accepted Answer · edited May 23 '17 at 12:17

I solved the issue. I was passing $scope.chartOptions to a function to add attributes to it depending on some other parameters. I was doing this for several charts, so I cloned $scope.chartOptions and modified the cloned versions of it, to finally pass these clones to the charts' constructor.

The problem: In order to clone the object I was doing a shallow copy of the object, and as explained here, a shallow copy of a collection is a copy of the collection structure, not the elements. For this reason I was losing the onProgress and onComplete functions.

So I used angular.copy($scope.chartOptions).

Chart.js 2.x animation onComplete not responding

1 Answers1