Fix #7152: Hover label showing data points of other category than the hovered one

draftlogs/7960_fix.md

@@ -0,0 +1 @@
+- Ensure that hoverlabels on category axes with hovermode "x", "y", "x unified" and "y unified" never include data points from other categories than the hovered one [[#7960](https://github.com/plotly/plotly.js/pull/7960)]

src/components/fx/hover.js

@@ -878,6 +878,21 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {
         for (k = hoverData.length - 1; k > initLen - 1; k--) {
             insert(hoverData[k]);
         }
+
+        // on category axes only keep points that fall in the hovered category
+        var winAx = winningPoint[axLetter + 'a'];
+        if (winAx && (winAx.type === 'category' || winAx.type === 'multicategory')) {
+            var winCat = winningPoint[axLetter + 'LabelVal'];
+            finalPoints = finalPoints.filter(function (point) {
+                var pointAx = point[axLetter + 'a'];
+                if (!pointAx || (pointAx.type !== 'category' && pointAx.type !== 'multicategory')) {
+                    // rare case of data point on overlaying axis
+                    return true;
+                }
+                return point[axLetter + 'LabelVal'] === winCat;
+            });
+        }
+
         hoverData = finalPoints;
         sortHoverData();
     }

src/components/fx/layout_attributes.js

@@ -137,7 +137,10 @@ module.exports = {
             'This is only a real distance for hovering on point-like objects,',
             'like scatter points. For area-like objects (bars, scatter fills, etc)',
             'hovering is on inside the area and off outside, but these objects',
-            'will not supersede hover on point-like objects in case of conflict.'
+            'will not supersede hover on point-like objects in case of conflict.',
+            'For hovermodes *x*, *y*, *x unified* and *y unified*',
+            'on a category axis, only points that fall in the hovered category',
+            'are shown in the hover label, regardless of this distance.'
         ].join(' ')
     },
     spikedistance: {

test/jasmine/tests/hover_label_test.js

@@ -7436,6 +7436,38 @@ describe('hovermode: (x|y)unified', function () {
             })
             .then(done, done.fail);
     });
+
+    it('hover label should only show values of hovered category', function (done) {
+        Plotly.newPlot(gd, {
+            data: [
+                {   name: 'bar',
+                    x: ['A', 'B'],
+                    y: [1, 2],
+                    type: 'bar'
+                },
+                {
+                    name: 'scatter',
+                    x: ['A', 'B'],
+                    y: [10, null],
+                    type: 'scatter'
+                }
+            ],
+            layout: {
+                width: 400,
+                hovermode: 'x unified',
+                hoverdistance: 110
+            }
+        })
+        .then(function () {
+            _hover(gd, { xval: 1.1 });
+            assertLabel({ title: 'B', items: ['bar : 2'] });
+        })
+        .then(function () {
+            _hover(gd, { xval: 0 });
+            assertLabel({ title: 'A', items: ['bar : 1', 'scatter : 10'] });
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('hover on traces with (x|y)hoverformat', function () {

test/plot-schema.json

@@ -2825,7 +2825,7 @@
         "valType": "boolean"
       },
       "hoverdistance": {
-        "description": "Sets the default distance (in pixels) to look for data to add hover labels (-1 means no cutoff, 0 means no looking for data). This is only a real distance for hovering on point-like objects, like scatter points. For area-like objects (bars, scatter fills, etc) hovering is on inside the area and off outside, but these objects will not supersede hover on point-like objects in case of conflict.",
+        "description": "Sets the default distance (in pixels) to look for data to add hover labels (-1 means no cutoff, 0 means no looking for data). This is only a real distance for hovering on point-like objects, like scatter points. For area-like objects (bars, scatter fills, etc) hovering is on inside the area and off outside, but these objects will not supersede hover on point-like objects in case of conflict. For hovermodes *x*, *y*, *x unified* and *y unified* on a category axis, only points that fall in the hovered category are shown in the hover label, regardless of this distance.",
         "dflt": 20,
         "editType": "none",
         "min": -1,