Customizing Highcharts legend behavior for two series

Question

Have found myself completely stuck while customizing the legend for a two series pie chart.

JSFiddle and code:

colors: ['#f00000', '#f8d10a', '#9edb70'],
legend: {
  layout: 'horizontal',
  verticalAlign: 'bottom'
},
plotOptions: {
  pie: {
    point: {
      events: {
        legendItemClick: function () {
          this.select();
          elm.tooltip.refresh(this);
          return false;
        },
        mouseOver: function () {
          this.select();
          elm.tooltip.refresh(this);
          return false;
        }
      }
    },
    showInLegend: true
  },
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.percentage}%'
    }
  }
},
series: [{
  type: 'pie',
  center: [450, 150],
  data: [
    ["Red", 2],
    ["Yellow", 5],
    ["Green", 3]
  ],
  size: '60%',
  innerSize: '40%'
}, {
  type: 'pie',
  linkedTo: ':previous',
  center: [150, 150],
  data: [
    ["Red", 1],
    ["Yellow", 2],
    ["Green", 7]
  ],
  size: '60%',
  innerSize: '40%'
}]

1) I need the current legend click behavior (slicing the data point) to execute on hover instead of a click.

2) I expected using "linkedTo: ':previous'" would also tie the second chart to the legend behavior, but only the first chart is effected. I.E. Clicking "red" would slice the red data point on both charts.

Thanks for any assistance.

Mark Mark · Accepted Answer · 2013-05-11T21:36:54

This seems like a roundabout way of doing this but it was the first thing that popped into my mind. I don't think HighCharts provides a hover event on the legend items, so I made one myself:

[after creating the chart]

$.each(Highcharts.charts[0].legend.allItems, function() {
    var groupElem = this.legendGroup.element;  // for each legend group
    $.data(groupElem, 'info', {'series':[this.series, this.series.linkedSeries[0]],'point':this.x}); // store some data about the group for use in the mouseover call back
    $(groupElem).mouseover(function(){
            $.data(this,'info').series[0].points[$.data(this,'info').point].select(true,false); // select the pie wedge
            $.data(this,'info').series[1].points[$.data(this,'info').point].select(true,true); // select the linked pie wedge pass (true, true) to no deselect other.
        }); 
});

Fiddle here.

Customizing Highcharts legend behavior for two series

1 Answers