New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect halo z-index in styled Highcharts #8276

Closed
proteamer opened this Issue May 3, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@proteamer

proteamer commented May 3, 2018

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:

screen shot 2018-05-03 at 17 00 14

Actual behaviour

Marker halo overlaps the point marker:
screen shot 2018-05-03 at 17 13 28

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

This comment has been minimized.

Contributor

pawelfus commented May 4, 2018

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:

/*= 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));
/*= } =*/

@pawelfus pawelfus added the Bug label May 4, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment