I'm trying to add text to my Legends using the build in tooltip (or custom ones, it does'nt have to be build in) but I can't get it to work. For example one of my legends is called 'Heat production' and when the user hovers over that legend I need a tooltip to appear with an explanation on what Heat production means. I have six legends that I need to attach tooltips to.
This answer was somewhat useful but when I go
item.text
... inside the for-loop in the 'mouseover' function, all the legends get the text of the last legend. This means that I am unable to identify the legend and add text to be displayed to it. Here is the code from the above answer with mine added in the console.log():
events: {
load: function () {
var chart = this,
legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
var item = legend.allItems[i].legendItem;
item.on('mouseover', function (e) {
//show custom tooltip here
console.log(item.text);
}).on('mouseout', function (e) {
//hide tooltip
console.log(item.text);
});
}
}
}
To sum up: How can I grab all the Legends in the for-loop and add a tooptip (containing a explanation from some hidden div) to it. I hope my problem formulation makes sense, but if it doesn't, just tell me and I will try to be more clear.
Many thanks in advance.
