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 <; i++){
        var point =[i];
        if (point == this){
            // set back to old color
            point.update({color: series.chart.options.colors[]});
            // make it gray
            point.update({color: '#CCCCCC'});
     return false;

Updated fiddle here.


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

point: {
   events: {
       click: function () {
           if (event.point.sliced) {
               $.each(, function (i, e) {
                   if (!e.sliced) {
                           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 Query

More Query from same tag