diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 3df5fd605ae..e928a8f868c 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -452,7 +452,7 @@ function _hover(gd, evt, subplot, noHoverEvent) { var hoverLabels = createHoverText(hoverData, labelOpts, gd); - hoverAvoidOverlaps(hoverData, rotateLabels ? 'xa' : 'ya'); + hoverAvoidOverlaps(hoverData, rotateLabels ? 'xa' : 'ya', fullLayout); alignHoverText(hoverLabels, rotateLabels); @@ -791,7 +791,7 @@ function createHoverText(hoverData, opts, gd) { // know what happens if the group spans all the way from one edge to // the other, though it hardly matters - there's just too much // information then. -function hoverAvoidOverlaps(hoverData, ax) { +function hoverAvoidOverlaps(hoverData, ax, fullLayout) { var nummoves = 0, // make groups of touching points @@ -804,8 +804,8 @@ function hoverAvoidOverlaps(hoverData, ax) { pos: d.pos, posref: d.posref, size: d.by * (axis._id.charAt(0) === 'x' ? YFACTOR : 1) / 2, - pmin: axis._offset, - pmax: axis._offset + axis._length + pmin: 0, + pmax: (axis._id.charAt(0) === 'x' ? fullLayout.width : fullLayout.height) }]; }) .sort(function(a, b) { return a[0].posref - b[0].posref; }), diff --git a/test/jasmine/tests/box_test.js b/test/jasmine/tests/box_test.js index 0c56796937f..d6e0a128c34 100644 --- a/test/jasmine/tests/box_test.js +++ b/test/jasmine/tests/box_test.js @@ -223,11 +223,11 @@ describe('Test box hover:', function() { return fig; }, nums: [ - 'q1: 0.3', 'median: 0.45', 'q3: 0.6', 'max: 1', 'median: 0.55', 'min: 0.2', + 'q1: 0.3', 'median: 0.45', 'q3: 0.6', 'max: 1', 'median: 0.55', 'min: 0', 'min: 0.2', 'q3: 0.6', 'max: 0.7', 'median: 0.45', 'min: 0.1', 'q3: 0.6', 'max: 0.9' ], name: [ - '', 'kale', '', '', 'radishes', '', + '', 'kale', '', '', 'radishes', '', '', '', '', 'carrots', '', '', '' ], axis: 'day 1' diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index f91b6656ad6..dcae95e16a0 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -966,6 +966,44 @@ describe('hover info', function() { .then(done); }); }); + + describe('overflowing hover labels', function() { + var trace = {y: [1, 2, 3], text: ['', 'a
b
c', '']}; + var data = [trace, trace, trace, trace, trace, trace, trace]; + var layout = { + width: 600, height: 600, showlegend: false, + margin: {l: 100, r: 100, t: 100, b: 100}, + hovermode: 'x' + }; + + var gd; + + beforeEach(function(done) { + gd = createGraphDiv(); + Plotly.plot(gd, data, layout).then(done); + }); + + function labelCount() { + return d3.select(gd).selectAll('g.hovertext').size(); + } + + it('shows as many labels as will fit on the div, not on the subplot', function(done) { + _hoverNatural(gd, 200, 200); + + expect(labelCount()).toBe(7); + + Plotly.relayout(gd, {'yaxis.domain': [0.48, 0.52]}) + .then(function() { + _hoverNatural(gd, 150, 200); + _hoverNatural(gd, 200, 200); + + expect(labelCount()).toBe(7); + }) + .catch(fail) + .then(done); + }); + + }); }); describe('hover info on stacked subplots', function() { diff --git a/test/jasmine/tests/violin_test.js b/test/jasmine/tests/violin_test.js index 0e57bb51318..e4b588d6693 100644 --- a/test/jasmine/tests/violin_test.js +++ b/test/jasmine/tests/violin_test.js @@ -296,13 +296,12 @@ describe('Test violin hover:', function() { }, nums: [ 'q3: 0.6', 'median: 0.45', 'q3: 0.6', 'max: 1', 'y: 0.9266848, kde: 0.383', - 'median: 0.55', 'max: 0.7', 'y: 0.9266848, kde: 0.182', - 'median: 0.45', 'q3: 0.6', 'max: 0.9', 'y: 0.9266848, kde: 0.435', - 'q3: 0.6', 'max: 0.9' + 'median: 0.55', 'min: 0', 'q1: 0.3', 'min: 0.2', 'max: 0.7', 'y: 0.9266848, kde: 0.182', + 'median: 0.45', 'min: 0.1', 'q3: 0.6', 'max: 0.9', 'y: 0.9266848, kde: 0.435' ], name: [ - '', 'kale', '', '', '', 'radishes', '', - '', 'carrots', '', '', '' + '', 'kale', '', '', '', 'radishes', '', '', '', '', + '', 'carrots', '', '', '', '' ], axis: 'day 1' }, {