1

suppose I have 4 slices having 20%, 30%, 30% and 20%. If I make 4th slice(20%) inactive, the other slices should adjust themselves and occupy 100 %. how to do this in highcharts? Thank you.

Hem
  • 71
  • 1
  • 3
  • 12

3 Answers3

3

I don't think it's possible to alter this behavior. Instead you need to remove the point all together for the other slices to add up to 100. Here is an example that shows the difference between legend-toggle and point remove: jsfiddle

eolsson
  • 12,567
  • 3
  • 41
  • 43
2

I think this should be the standard behavior :)

opts.plotOptions.pie.point.events.legendItemClick = function() {
    if (this.visible) {
        this['y_old'] = this.y;
        this.update(0);
    }
    else {
        this.update(this.y_old);
    }
};

now when you click on a legend item the pie chart slice will disappear

If you want to show the percentage (100% without the now missing slice) you have to define your tooltip (or legend) as:

opts.tooltip.formatter = function() {
    var s = '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + '%';

    return s;
};
david
  • 344
  • 2
  • 5
1

This feature is now available out of the box as plotOptions.pie.ignoreHiddenPoint

 series: [{
    ignoreHiddenPoint: true,
    type: 'pie',
    ...
  }]

Auto Redraw/Recalculate Pie on Legend | Highchart & Highstock @ jsFiddle

Jugal Thakkar
  • 13,432
  • 4
  • 61
  • 79