fix: do not ovelap hoverlabels for different tracetypes

Author: mbant

src/components/fx/hover.js

@@ -1757,7 +1757,7 @@ function hoverAvoidOverlaps(hoverLabels, rotateLabels, fullLayout, commonLabelBo
             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 && p0.crossAxKey === p1.crossAxKey) {
                 // 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 = [];
+            for(let 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(let 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(let 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() {