high charts - lost animation when pie chart sliced is programmatically set

Question

As you can see from this basic example, http://www.highcharts.com/demo/pie-basic when you select a pie, the selected pie got pulled out slowly with animation. and that is handled by this option.

pie: {
     allowPointSelect: true
}

However, I don't want mouse click to select Point. I have, say, a button outside of the pie chart, when I press the button, the first pie/Point should be selected.

I have the following

$scope.SAWChartConfig.series[0].data[0].selected = true;
$scope.SAWChartConfig.series[0].data[0].sliced = true;

programatically set the first point as selected when button clicked. It works fine, but it lost the animation (where it should slowly pull outward).

My questions are:

how can i add the animation back?
series[0].data contains a few data points, I would need to reset data[i].sliced to false for each of them after button is clicked. Is there a easy way to do it instead of loop through all items?

.controller('spendingPieChartCtrl', ['$scope', '$q', 'TransactionService', 'CategoryService','chartColors', function ($scope, $q, TransactionSvc, CategorySvc, chartColors) { if(typeof $scope.height === 'undefined') { $scope.height = 140; } $scope.SAWChartConfig = { options: { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie', margin: [0, 0, 0, 0], spacingTop: 0, spacingBottom: 0, spacingLeft: 0, spacingRight: 0, height: $scope.height }, plotOptions: { pie: { dataLabels: { enabled: false }, size: '100%', borderWidth: 0 }, series: { states: { hover: { enabled: false } } } }, title:{ text: null }, tooltip: { enabled: false } }, series: [{ data: [] }] };
$q.all([
    TransactionSvc.get(),
    CategorySvc.get()
]).then(function() {
    var spendingCategories = TransactionSvc.getTopCategories();
    //redraw the chart by updating series data
    $scope.SAWChartConfig.series = [{data: spendingCategories}];
});

$scope.$on('talkToOne', function( event, data ){
    $scope.SAWChartConfig.series[0].data[index].select();
    //$scope.SAWChartConfig.series[0].data[index].sliced = true;
});

I am using ng-hightcharts, and here is the directive call

Navas Basheer Navas Basheer · Accepted Answer · 2015-09-30T10:46:03

chart.series[0].data[index].select() will do the select/deselect of the slices without loosing animation.

See the working example here

By using above code your second problem will also get fixed, since the next select call will automatically deselect other selected slices in the chart.

high charts - lost animation when pie chart sliced is programmatically set

1 Answers