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

Crosshairs act weird with multiple axis #6420

lorgan3 opened this issue Feb 28, 2017 · 1 comment

Crosshairs act weird with multiple axis #6420

lorgan3 opened this issue Feb 28, 2017 · 1 comment


Copy link

@lorgan3 lorgan3 commented Feb 28, 2017

Expected behaviour

Only one crosshair is visible at a time and it follows the cursor.

Actual behaviour

By first hovering over 1 series and then hovering over the second series you get 2 crosshairs and 1 doesn't move.

Live demo with steps to reproduce

  1. Move the cursor in the chart from the top so you start hovering over the blue line.
  2. Move the cursor further down so you're hovering over the black line.
  3. Now move the cursor horizontally to a different point on the x-axis, you will see 2 crosshairs and only one responds to mouse movement.

I also tried using this option which gave the same result:

Affected browser(s)

Doesn't seem to be browser related but tested on Chrome 57.0.2987.74 beta (64-bit)

Copy link

@KacperMadej KacperMadej commented Mar 31, 2017


Use this wrapper:

(function(H) {
  H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed) {
    // proceed
    proceed.apply(this, [], 1));

    var axis = this;
    if (axis.isXAxis) {
      H.each(axis.chart.xAxis, function(ax) {
        if (ax !== axis) {
          ax.hideCrosshair(); // leave only one xAxis crosshair


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

Successfully merging a pull request may close this issue.

None yet
4 participants