I have my Highchart as below, Is there a way to show tooltip on legend hover, just like when we hover on a slice. https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
My tooltip code:
tooltip: {
positioner: function(x, y){
var center = this.chart.series[0].center;
console.log(this, arguments);
return { x: center[0] - x/2, y: center[1] + y/2 };
},
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage*100)/100 + ' %';
}
}
You have already added bootstrap in your code so use Bootstrap tooltip and add the below code in your chart onload function,
var legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var t=legend.allItems[i],
content= '<b>'+ t.name +'</b>: '+ Math.round(t.percentage*100)/100 + ' %';
jQuery($(t.legendItem.element)).tooltip({title:content,html:true});
})(i);
}