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

Closed
lorgan3 opened this Issue Feb 28, 2017 · 1 comment

Comments

Projects
None yet
4 participants
@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

http://jsfiddle.net/6enah4d8/

  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: http://api.highcharts.com/highcharts/tooltip.crosshairs

Affected browser(s)

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

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Mar 31, 2017

Contributor

Workaround:

Use this wrapper:

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

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

Demo: http://jsfiddle.net/6enah4d8/2/

Contributor

KacperMadej commented Mar 31, 2017

Workaround:

Use this wrapper:

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

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

Demo: http://jsfiddle.net/6enah4d8/2/

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