Show tootip and select pie slice on legend click of pie chart in HighCharts

2
votes

hi friends i want to show tooltip with legend on mousehover and click event of pie chart as same as when we hover pie slices and i want to show the pie selected (pie slice slide out like on pie point select )

this is default chart where i have disabled legend click for pie

  http://jsfiddle.net/LQS48/1/

can any one tell me how to do it

somthing like this as you see here 

http://livecoding.io/3433043 ( which is done with custom buttons i want to achive this with highcharts legends

any help will be appreciated .. :)

Update - Soltuion I founf with the help of steve and sebastian integrated here below in fiddle

http://jsfiddle.net/8T7Ew/1/

Final Update - Fixed a bug in this Soltuion I found with the help of steve and sebastian and highcharts support team integrated here below in fiddle and working flawlessly now .

well i hope this becomes a highcharts feature though ,

  Final working Solution for me :: http://jsfiddle.net/8T7Ew/3/
2
phpjavascriptjqueryfunctionhighcharts

2 Answers

2
votes

For click event on the legend, you can add:

   this.select();
   chart.tooltip.refresh(this);

to your legendItemClick function. http://jsfiddle.net/8T7Ew/.

For mouseover, there was a discussion on the highcharts forum http://highslide.com/forum/viewtopic.php?f=9&t=7094. The second page suggested this: http://jsfiddle.net/hfrntt/ArmRM/11661/

1
votes

Take look at example which introduced how display tooltip when you hover on legend http://jsfiddle.net/ArmRM/14892/

$('.highcharts-legend span, .highcharts-legend tspan').each(function(index, element) {
$(element).hover(function() {
    chart.tooltip.refresh(chart.series[0].data[index]);
},function() {
    chart.tooltip.hide();
})

});