Hover prototype override
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
CSS
@import 'https://code.highcharts.com/css/highcharts.css';
#container {
height: 400px;
max-width: 800px;
margin: 0 auto;
}
JavaScript
(function(H) {
H.Legend.prototype.setItemEvents = function(item, legendItem, useHTML) {
var legend = this,
boxWrapper = legend.chart.renderer.boxWrapper,
activeClass = 'highcharts-legend-' + (item.series ? 'point' : 'series') + '-active',
hasLinkedSeries = function(item) {
return ((item.linkedSeries && item.linkedSeries.length) ? true : false);
},
setLinkedSeriesState = function(item, state) {
item.linkedSeries.forEach(function(elem) {
elem.setState(state)
})
};
// Set the events on the item group, or in case of useHTML, the item itself (#1249)
(useHTML ? legendItem : item.legendGroup).on('mouseover', function () {
if (item.visible) {
item.setState('hover');
// Add hover state to linked series
if (hasLinkedSeries(item)) {
setLinkedSeriesState(item, 'hover')
}
// A CSS class to dim or hide other than the hovered series
boxWrapper.addClass(activeClass);
/*= if (build.classic) { =*/
legendItem.css(legend.options.itemHoverStyle);
/*= } =*/
}
})
.on('mouseout', function () {
/*= if (build.classic) { =*/
legendItem.css(H.merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle));
/*= } =*/
// A CSS class to dim or hide other than the hovered series
boxWrapper.removeClass(activeClass);
// Remove hover state from linked series
if(hasLinkedSeries(item)) {
setLinkedSeriesState(item)
}
item.setState();
})
.on('click', function (event) {
var strLegendItemClick = 'legendItemClick',
fnLegendItemClick = function () {
if (item.setVisible) {
item.setVisible();
}
};
// Pass over the...