diff --git a/draftlogs/6954_fix.md b/draftlogs/6954_fix.md new file mode 100644 index 00000000000..8e8f167df05 --- /dev/null +++ b/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). \ No newline at end of file diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 6a772089a30..b3032744510 100644 --- a/src/components/fx/hover.js +++ b/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; diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 417127fcb63..a9af59100c0 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/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() {