[Chartjs]-How to Highlight clicked Doughnut section or portion in chart.js?

by

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.

Leave a comment