CODEWITHSUNDEEP
javascripthighcharts
jsoderba
jsoderba

Reputation: 58

Using connecting legends for two Highcharts pie charts

I have several pie chart series with the same names but different values. I want to be able to toggle wedges with the same name in all series on and off by clicking in the legend.

The documentation and several other questions suggest using series.linkedTo to connect the series, but I can't get it to work.

This is what I've tried building on a Highcharts example:

series: [{
        center: ['25%', '50%'],
    showInLegend: true,
    id: 'aaa',
    data: [
        ['Firefox',   44.2],
        ['IE7',       26.6],
        ['IE6',       20],
        ['Chrome',    3.1],
        ['Other',    5.4]
    ]
},
{
        id: 'bbb',
        linkedTo: 'aaa',
        center: ['75%', '50%'],
    data: [
        ['Firefox',   12.52],
        ['IE7',       12.83],
        ['IE6',       0],
        ['Chrome',    59.42],
        ['Other',    5.4]
    ]
}]

Here's the fiddle with full (non-working) code: http://jsfiddle.net/JanSoderback/psL0zy2g/22/

Upvotes: 2

Views: 562

Answers (1)

ewolden
ewolden

Reputation: 5803

Using linkedTo does not work, because it is not the series that you want to hide/show (as with 2 lines series) but each point of the series.

What you can do however, is change what clicking on the legend will do, like this:

plotOptions: {
  pie: {
    point: {
      events: {
        legendItemClick: function() {
          for (var i = 0; i < chart.series.length; i++) {
            if (chart.series[i].points[this.index].visible == true) {
              chart.series[i].points[this.index].setVisible(false, false);
            } else {
              chart.series[i].points[this.index].setVisible(true, false);
            }
          }
          chart.redraw();
          return false; //needed to stop the normal click from interferring
        }
      }
    }
  }
...
},

Note that this example will only work if both pies contain an identical number of points, sorted in the same order. If that is not the case, you can expand on this.

Working example: http://jsfiddle.net/ewolden/psL0zy2g/63/

API on event.legendItemClick: https://api.highcharts.com/highcharts/series.pie.events.legendItemClick

Upvotes: 2

Related Questions