Miguel Péres Miguel Péres - 2 months ago 44
AngularJS Question

Chart.js 2.x animation onComplete not responding

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;
}

Answer

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).

Comments