From 4f0fd7cdc1311450216071f5ab1fb54b6105f471 Mon Sep 17 00:00:00 2001
From: jon-a-nygaard <jon.arild@highsoft.com>
Date: Thu, 20 Apr 2017 16:20:40 +0200
Subject: [PATCH] Fixed #6420, When multiple axes, show only one snapping
 crosshair at the same time.

---
 js/parts/Pointer.js                        | 22 +++++-----
 samples/unit-tests/axis/crosshairs/demo.js | 48 +++++++++++++++++++++-
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/js/parts/Pointer.js b/js/parts/Pointer.js
index 9ba490c63bc..e1325341f51 100644
--- a/js/parts/Pointer.js
+++ b/js/parts/Pointer.js
@@ -371,20 +371,18 @@ H.Pointer.prototype = {
 				}
 			});
 		}
-		
-		// Draw crosshairs (#4927, #5269 #5066, #5658)
+
+		// Issues related to crosshair #4927, #5269 #5066, #5658
 		each(chart.axes, function drawAxisCrosshair(axis) {
-			// Snap is true. For each hover point, loop over the axes and draw a
-			// crosshair if that point belongs to the axis.
-			// @todo Consider only one crosshair per axis.
-			if (pick(axis.crosshair.snap, true)) {
-				each(points, function (p) {
-					if (p.series[axis.coll] === axis) {
-						axis.drawCrosshair(e, p);
-					}
-				});
-			} else {
+			var snap = pick(axis.crosshair.snap, true);
+			if (!snap) {
 				axis.drawCrosshair(e);
+			// axis has snapping crosshairs, and hover point is belonging to axis
+			} else if (hoverPoint && hoverPoint.series[axis.coll] === axis) {
+				axis.drawCrosshair(e, hoverPoint);
+			// axis has snapping crosshairs, but hover point is not belonging to axis
+			} else {
+				axis.hideCrosshair();
 			}
 		});
 	},
diff --git a/samples/unit-tests/axis/crosshairs/demo.js b/samples/unit-tests/axis/crosshairs/demo.js
index bdb57832ee4..f74ef434da7 100644
--- a/samples/unit-tests/axis/crosshairs/demo.js
+++ b/samples/unit-tests/axis/crosshairs/demo.js
@@ -63,4 +63,50 @@ QUnit.test('snap', function (assert) {
     // );
 
     // TODO Test positioning of crosshairs.
-});
\ No newline at end of file
+});
+
+QUnit.test('Show only one snapping crosshair at the same time. #6420', function (assert) {
+    var chart = Highcharts.chart('container', {
+            xAxis: [{
+                crosshair: true
+            }, {
+                opposite: true,
+                crosshair: true
+            }],
+            series: [{
+                name: 'Installation',
+                data: [1, 2, 3],
+                xAxis: 0
+            }, {
+                name: 'Manufacturing',
+                data: [1, 2, 3].reverse(),
+                xAxis: 1
+            }]
+        }),
+        series1 = chart.series[0],
+        series2 = chart.series[1];
+
+    series1.points[0].onMouseOver();
+    assert.strictEqual(
+        series1.xAxis.cross.attr('visibility'),
+        'visible',
+        'Hover Series 1: crosshair on xAxis of Series 1 is visible'
+    );
+    assert.strictEqual(
+        !!series2.xAxis.cross,
+        false,
+        'Hover Series 1: crosshair on xAxis of Series 2 does not exist'
+    );
+
+    series2.points[2].onMouseOver();
+    assert.strictEqual(
+        series1.xAxis.cross.attr('visibility'),
+        'hidden',
+        'Hover Series 2: crosshair on xAxis of Series 1 is hidden'
+    );
+    assert.strictEqual(
+        series2.xAxis.cross.attr('visibility'),
+        'visible',
+        'Hover Series 2: crosshair on xAxis of Series 2 is visible'
+    );
+});