Skip to content
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
Closed

Incorrect halo z-index in styled Highcharts #8276

proteamer opened this issue May 3, 2018 · 1 comment
Labels

Comments

@proteamer
Copy link

@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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.