3

I'm using angularjs and angular-charts which uses chart.js but, i'm stucked on one thing that how to highlight a clicked section of doughnut so that user know that he/she selected that portion of doughnut

Sumit Khanduri
  • 3,619
  • 7
  • 30
  • 40

1 Answers1

0

The best way to do this is to change the color of the section clicked.

In your markup:

<canvas ...chart-colors="$scope.colors" chart-click="$scope.clickFn"...> </canvas>

In your controller: 

$scope.clickFn = function(points, event) {
    if (!points || !points.length || !points.length > 0) { return; }

    var indexClicked = points[0]._index;
    $scope.colors[indexClicked] = '#9a9a9a' //your clicked color code
}

This way, the next time your scope digest occurs, the chart will be re-drawn with your clicked portion with your new highlighted color.

You can do other things with this too, like color everything NOT clicked, disable the animation so it isn't bouncy on color change, etc. But the above will solve your problem.

Mattkwish
  • 753
  • 7
  • 16