Merge pull request #6954 from mbant/issue-6917

fix: do not ovelap hoverlabels for different tracetypes

Author: archmoj

draftlogs/6954_fix.md

@@ -0,0 +1 @@
+- fix for excessive hoverlabel removal and overlap for plots with both `scatter` and `bar` traces which reported in [#6917](https://github.com/plotly/plotly.js/issues/6917).

src/components/fx/hover.js

@@ -1824,8 +1824,7 @@ function hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, commonLabelBo
             var p1 = g1[0];
             topOverlap = p0.pos + p0.dp + p0.size - p1.pos - p1.dp + p1.size;
 
-            // Only group points that lie on the same axes
-            if(topOverlap > 0.01 && (p0.pmin === p1.pmin) && (p0.pmax === p1.pmax)) {
+            if(topOverlap > 0.01) {
                 // push the new point(s) added to this group out of the way
                 for(j = g1.length - 1; j >= 0; j--) g1[j].dp += topOverlap;
 

test/jasmine/tests/hover_label_test.js

@@ -1668,6 +1668,10 @@ describe('hover info', function() {
             return Math.max(0, overlap);
         }
 
+        function labelCount() {
+            return d3Select(gd).selectAll('g.hovertext').size();
+        }
+
         it('centered-aligned, should render labels inside boxes', function(done) {
             var trace1 = {
                 x: ['giraffes'],
@@ -1787,6 +1791,59 @@ describe('hover info', function() {
             })
             .then(done, done.fail);
         });
+
+        it('does not overlap lebels for different trace types', function(done) {
+            function trace(name, type, delta) {
+                return {
+                    name: name,
+                    type: type,
+                    y: [0 + delta, 1 + delta, 2 + delta],
+                    x: ['CAT 1', 'CAT 2', 'CAT 3'],
+                };
+            }
+
+            var scatterName = 'scatter_';
+            var barName = 'bar_';
+            var data = [];
+            var i;
+            for(i = 0; i < 3; i++) {
+                data.push(trace(barName + i, 'bar', 0.0));
+                data.push(trace(scatterName + i, 'scatter', 0.1));
+            }
+            var layout = {
+                width: 600,
+                height: 400,
+                hovermode: 'x',
+            };
+
+            Plotly.newPlot(gd, data, layout)
+                .then(function() {
+                    _hoverNatural(gd, 200, 200);
+                })
+                .then(function() {
+                    expect(labelCount()).toBe(6);
+                })
+                .then(function() {
+                    var nodes = [];
+                    for(i = 0; i < 3; i++) {
+                        nodes.push(hoverInfoNodes(barName + i).secondaryBox.getBoundingClientRect());
+                        nodes.push(hoverInfoNodes(scatterName + i).secondaryBox.getBoundingClientRect());
+                    }
+                    nodes.sort(function(a, b) { return a.top - b.top; });
+
+                    for(i = 0; i < 5; i++) {
+                        expect(
+                calcLineOverlap(
+                    nodes[i].top,
+                    nodes[i].bottom,
+                    nodes[i + 1].top,
+                    nodes[i + 1].bottom
+                )
+                ).toBeWithin(2, 1);
+                    }
+                })
+              .then(done, done.fail);
+        });
     });
 
     describe('constraints info graph viewport', function() {