Adding tooltip to legend in highcharts - angularjs

Question

I am trying to add a tooltip to the legend in highcharts. I am using a pie chart. Using angular js framework.
The legend code is as below
legend: {
useHTML: true,
layout: 'vertical',
align: 'left',
itemMarginTop: 10,
itemMarginBottom: 15,
title: {
style: {
fontSize: "14px",
fontWeight: "600",
color: "#404040"
}
},
itemStyle: {
fontWeight: 'normal',
color: '#404040',
fontSize: '14px'
},
//x : 70,
//y: 110,
labelFormatter: function() {
return ` <md-icon>
<md-tooltip md-direction="top">Hello</md-tooltip>
<i class="material-icons help_icon">info_outline</i>
</md-icon>`
}
},
I do not get the expected results. it just displays the letter H and no icon. If i use a standalone icon like
<i class="material-icons help_icon">info_outline</i>
It just displays the icon. But I am unable to add any tooltip. I searched online and found a solution using the jquery UI plugin. Is there any other way without the plugin and using the angular material icons? Please suggest.
Ps: I have also tried with single quotes / double quotes instead of inverted ticks.

Answer 1

Unfortunately, tooltip in a legend is not supported. However, you can create it using Highcharts.SVGRenderer. Check code and demo posted below.
Code:
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
legend = chart.legend,
legendItems = legend.allItems,
group,
rectElem,
textElem,
box,
i;
group = chart.renderer.g('legend-tooltip').attr({
transform: 'translate(-9999, -9999)',
zIndex: 99
}).add();
textElem = chart.renderer.text().attr({
class: 'legend-tooltip-text',
zIndex: 7
}).add(group);
rectElem = chart.renderer.rect().attr({
'class': 'legend-tooltip',
'stroke-width': 1,
'stroke': '#c5c5c5',
'fill': 'rgba(245, 245, 245, 0.95)',
}).add(group);
for (i = 0; i < legendItems.length; i++) {
(function(i) {
var item = legend.allItems[i].legendItem.parentGroup;
item.on('mouseover', function(e) {
// Define legend-tooltip text
var str = chart.series[i].userOptions.fullName;
textElem.element.innerHTML = str;
// Adjust rect size to text
box = textElem.getBBox()
rectElem.attr({
x: box.x - 8,
y: box.y - 5,
width: box.width + 15,
height: box.height + 10
});
// Show tooltip
group.attr({
transform: `translate(${e.clientX + 7}, ${e.clientY + 7})`
})
}).on('mouseout', function(e) {
// Hide tooltip
group.attr({
transform: 'translate(-9999,-9999)'
})
});
})(i);
}
}
}
},
series: [{
data: [10, 12, 5],
fullName: 'Series 1 tooltip'
}, {
data: [6, 10, 7],
fullName: 'Series 2 tooltip'
}]
});
Demo:
https://jsfiddle.net/BlackLabel/3cbpe0mn/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
https://api.highcharts.com/class-reference/Highcharts.SVGElement#on