Incorrect halo z-index in styled Highcharts

[proteamer]

Hi, I'm not sure that it is bug or not but I сould not setup Highcharts in styled mode to get expected behaviour:

Expected behaviour

Marker halo appears behind the point marker:

Actual behaviour

Marker halo overlaps the point marker:

Live demo with steps to reproduce

The issue is only reproduced in styled mode: https://jsfiddle.net/unlimit/mekcvgxx/

Product version

Styled highcharts v6.1.0

Affected browser(s)

Google Chrome v66, Safari v11.1, etc.

[pawelfus]

Hi @proteamer

Thank you for reporting this bug. I think you are right, it's wrong zIndex which is applied only in classic version, but should be available in both classic and and styled modes.

Workaround:
Demo: https://jsfiddle.net/BlackLabel/mekcvgxx/5/
Snippet:

  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function() {
            if (this.series.halo) {
              this.series.halo.attr({
                // Apply zIndex manually
                zIndex: -1
              });
            }
          }
        }
      }
    }
  },

Internal note:
Related lines:

highcharts/js/parts/Interaction.js

Lines 828 to 834 in 4cb1efc

	/*= if (build.classic) { =*/
	halo.attr(extend({
	'fill': point.color || series.color,
	'fill-opacity': haloOptions.opacity,
	'zIndex': -1 // #4929, IE8 added halo above everything
	}, haloOptions.attributes));
	/*= } =*/