Zone color on hover incorrect when markers are hidden

[obar]

Expected behaviour

When markers are hidden because of small distances between points (large points, zoomed-out axis), markers still show on hover. Hover colors should match what they would be if those markers were not hidden.

Actual behaviour

Marker colors don't match the correct zone, though line colors do

Live demo with steps to reproduce

http://jsfiddle.net/ncchm8v1/

Affected browser(s)

Happens in both Firefox and Chrome in Linux, Chrome in Windows

Note, I mentioned this in issue a comment on #4670 but thought it might be better to open a new issue rather than reopen that one, as I'm not sure if they're related

[jon-a-nygaard]

Internal note: This is also seen without the use of zones, example http://jsfiddle.net/ncchm8v1/2/

[pawelfus]

For a case without zones, simple solution is to set marker.states.hover.fillColor: http://jsfiddle.net/ncchm8v1/4/

For zones this is not so simple: color of the marker is calculated according to the zone.

Additional info: zones colors work fine, when markers are enabled: http://jsfiddle.net/ncchm8v1/5/ - that suggests issue with only one inherited marker ( Interaction.js -> setState: -> series.stateMarkerGraphic) - marker is recreated only when symbol changed. In all other cases, only position of the marker is updated (without colors etc.).

[jon-a-nygaard]

Can be fixed by updating attributes at Interaction L579-5781
The question is how costly it will be regarding performance, and/or if there might be any other reason for not updating attr in this case.

stateMarkerGraphic[move ? 'animate' : 'attr']({ // #1054
    x: plotX - radius,
    y: plotY - radius
})
.attr(pointAttr);

[markushausammann]

2016? :-) Bump!

[KacperMadej]

@markushausammann Looks like the problem is resolved, but issue not closed.
Working fine in Highcharts v7.0.0 and the fix was published in v5.0.0 (demo: http://jsfiddle.net/BlackLabel/6azexjnk/)
Closing as resolved.

[markushausammann]

We just had this problem now... but maybe we're not working with the latest version. I'll check. Thanks for the answer!

[aimfeld]

@KacperMadej This problem still occurs in styled mode in Highcharts v7.0.0. See here http://jsfiddle.net/6dhkry9o/ (note that when hovering over the green peak, the marker is shown in blue, not green.
I tried replacing highcharts-point with highcharts-point-hover, but I couldn't make it work. Only when markers are enabled, the highcharts-point-hover class has an effect: http://jsfiddle.net/tnhoma7r/

[KacperMadej]

Thank you for providing a demo for the problem in styled mode @aimfeld

Here's a workaround - set markers as very small instead of hiding them - demo: http://jsfiddle.net/BlackLabel/L4vg9qwn/

[aimfeld]

@KacperMadej Thanks for the workaround and quick help, it works 👍