score:2

Accepted answer

Instead of attacking the SVG directly with this.graphic.attr, you'd be better off using the API to update the slice. Point.update works well for this:

legendItemClick: function () {
    var series = this.series;
    for (var i=0; i < series.data.length; i++){
        var point = series.data[i];
        if (point == this){
            // set back to old color
            point.update({color: series.chart.options.colors[this.id]});
        }else{
            // make it gray
            point.update({color: '#CCCCCC'});
        }
     }
     return false;
 }

Updated fiddle here.

score:0

Well, I can get you 50% of the way there:

point: {
   events: {
       click: function () {
           if (event.point.sliced) {
               $.each(this.series.data, function (i, e) {
                   if (!e.sliced) {
                       this.graphic.attr({
                           fill: '#CCCCCC'
                       });
                   }
               });
           }
        }
    }

This still breaks when you re-click the slice to slot it back in - the colors of the other slices are still grey until you click on them. Will need to look more into this.


Related Articles