how to change the slice color in donut chart on click of slice?

Question

can we change the slice color of donut chart when user click .I want to grey out all slice except selected one ..can we grey out all slices when user click /select any slice .. In other words

I have four colors blue ,black , green, orange ..When I click on blue it show blue rest are grey ..when I clcik on black it show black rest are grey .here is my code

http://jsfiddle.net/nyhmdtb8/5/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },

    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {

      symbolHeight: 1,
      symbolWidth: 1,
      symbolRadius: 0,
      useHTML: true,
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 100,
      layout: 'vertical',
      x: 0,
      y: 100,
      labelFormatter: function() {

        return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
            plotOptions: {
          pie: {

                  showInLegend: true,
                         dataLabels: {
                        format: '<b>{point.y}</b>',

                        style: {
                            fontWeight: 'bold',
                            color: 'white'
                        }
                    },
            point: {
                events: {
                    legendItemClick: function (e) {
                    return false;
                  },
                  click:function(e){
                  console.log(this.points)
                   console.log(e);
                    this.graphic.attr({
                fill: 'yellow'
            });
                  //return false;
                  }
                }
              },
                   startAngle: 0,
                  endAngle: 270,
            }
            },
    tooltip: {
      enabled: false,
      shadow: false
    },
    series: [{
      states: {
        hover: {
          enabled: false
        }
      },
      showInLegend: false,
      name: 'election result',
      enabled: true,
      dataLabels: {
        enabled: true
      },
      data: [
        ['A', 55],
        ['B', 65],

      ],
      size: '30%',
      innerSize: '70%',
    }, {
      states: {
        hover: {
          enabled: false
        }
      },
      name: 'Versions',
      data: [
        ['sdsd', 55],
        ['sdf', 65],
        ['sdf', 65],
        ['sdf', 132],

      ],
      size: '70%',
      innerSize: '80%',

    }]
  });
});

morganfree morganfree · Accepted Answer · 2017-01-13T15:55:48

You have to loop through the series and through the points and change its color with the Point.update(). If you use point.graphic.attr(fill: 'grey'), then the svg elements and js objects will not be in sync.

On load events, preserve the original color for the slices:

chart: {
  type: 'pie',
  events: {
    load: function () {
      this.series.forEach(series => {
        series.points.forEach(point => {
          point.options.origColor = point.color;
        });
      });
    }
  }
},

On click, change the color according to the clicked point.

click: function(e) {
          console.log(this)
          console.log(e);

          this.series.chart.series.forEach(series => {
            series.points.forEach(point => {
              point.update({
                color: this !== point ? 'grey' : point.options.origColor
              }, false, false);
            });
          })
          this.series.chart.redraw();
        }

And the last one, modify the legend formatter, if you want its color to be not changed

 labelFormatter: function() {

    return '<div style="padding:5px;width:55px;background-color:' + (this.options.origColor || this.color) + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
  }

example: http://jsfiddle.net/zwawuem9/

example with changing legend's color: http://jsfiddle.net/zwawuem9/1/

how to change the slice color in donut chart on click of slice?

1 Answers