Heatmap is faded when hovering over color axis legend (styled version)

[RainerSchwarze]

When using the styled highcharts library to show a heatmap chart, hovering over the color axis fades the heatmap data points. This does not happen with the classic library.

Expected behaviour

Hovering over the color axis does not fade the heatmap points.

Actual behaviour

Hovering over the color axis fades the heatmap points.

Live demo with steps to reproduce

• http://jsfiddle.net/p87v7or8/ (adjusted the classic heatmap demo to use the styled lib)
• hover over color axis / legend
• notice how the data points are faded
• the classic (non-styled) version does not fade: https://www.highcharts.com/demo/heatmap

I assume the "hovered" legend item is to be highlighted. For that the class .highcharts-legend-series-active is set. In a multi line chart, the series gets marked with .highcharts-series-hover, which prevents the fade for that series. (See the rule in highcharts.scss.) In a heatmap the -hover class does not seem to be set.

Affected browser(s)

• tested in Chrome 62

[pawelfus]

Hi @RainerSchwarze

Thank you for reporting this issue. You are right, it looks like colorAxis inherits behaviour from the classic legend (http://jsfiddle.net/1y2kggdo/) where we highlight hovered series.

Interla note:
Additionally we can see in classes like: highcharts-legend-item highcharts-undefined-series highcharts-color-undefined for the legend item.

[RainerSchwarze]

Hi @pawelfus
thanks - do you have an idea how I could temporarily fix this? One would certainly be to remove the css rule which fades and then maybe increase the line width or change the color for the hovered series, so things still work with the other charts. I did not yet look into the details for the color axis, but could I prevent it from handling mouseover?

[pawelfus]

Hi @RainerSchwarze

I think we can overwrite the rule responsible for this issue for one particular chart: #container-id + rule: http://jsfiddle.net/p87v7or8/1/

#container .highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover), .highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover), .highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover), .highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {
  opacity: 1;
}

This way we won't change behaviour for other charts. Other option is to use bugged classes and remove events: http://jsfiddle.net/p87v7or8/2/

.highcharts-legend-item.highcharts-undefined-series.highcharts-color-undefined {
  pointer-events: none;
}