Add tooltip to legend in highcharts when hovering
Solution 1
Highcharts doesn't have built-in tooltip for item legend, but still you can create your own tooltip for that. It's simple to add custom events to legendItem (mouseover and mouseout for example) and show that tooltip.
See example how to add events to elements in Highcharts: http://jsfiddle.net/rAsRP/129/
events: {
load: function () {
var chart = this,
legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var item = legend.allItems[i].legendItem;
item.on('mouseover', function (e) {
//show custom tooltip here
console.log("mouseover" + i);
}).on('mouseout', function (e) {
//hide tooltip
console.log("mouseout" + i);
});
})(i);
}
}
}
Solution 2
There is another opportunity to get tooltips at hovering over the Highcharts legend. You just need to enable useHTML for the legend and redefine the labelFormatter function; this function should return the label text enclosed into the "span" tag. In this "span" tag one may include a class to apply jQuery-based tooltips (jQuery UI or Bootstrap for example). Also it is possible to transfer some data (for example, the index of a legend item) using the 'data-xxx' attribute:
labelFormatter: function () {
return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}
Tooltips can be formatted as you wish; hyperlinks are also possible. The fiddle is here.
Related videos on Youtube
bubbles
Updated on May 26, 2022Comments
-
bubbles over 1 year
Id like to let the user know that he can remove items from the legend by simply clicking on them. To some, this may be intuitive but others may not know that they can do that. I would like to let the users know when they over the legend item that then can click to remove it.
I am using the GWT-wrapper class for highcharts.
Thank you.
-
bubbles over 10 yearshow can I add this functionality to my Java Code? since im using GWT. i am currrently trying chart.setOption("/chart/events/load", "load: function()... ) but that does not seem to work
-
Paweł Fus over 10 yearsSorry, I'm not familiar with GWT adapter for Highcharts.