diff --git a/draftlogs/7503_fix.md b/draftlogs/7503_fix.md new file mode 100644 index 00000000000..b7f5d40bb50 --- /dev/null +++ b/draftlogs/7503_fix.md @@ -0,0 +1 @@ +Fix hover event not triggered on consecutive empty bins (count=0) with `hovermode:'x'` for histogram [[#7503](https://github.com/plotly/plotly.js/pull/7503)], with thanks to @Lexachoc for the contribution! diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 7917ce3a1e8..41ee1352f62 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -2283,7 +2283,8 @@ function hoverChanged(gd, evt, oldhoverdata) { if(oldPt.curveNumber !== newPt.curveNumber || String(oldPt.pointNumber) !== String(newPt.pointNumber) || - String(oldPt.pointNumbers) !== String(newPt.pointNumbers) + String(oldPt.pointNumbers) !== String(newPt.pointNumbers) || + oldPt.binNumber !== newPt.binNumber ) { return true; } diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 12316d30eb0..ba3211c458a 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -1188,7 +1188,7 @@ describe('hover info', function() { }); }) .then(done, done.fail); - }); + }); it('will show a category range if you ask nicely', function(done) { var gd = createGraphDiv(); @@ -1217,6 +1217,41 @@ describe('hover info', function() { }) .then(done, done.fail); }); + + it('will update when switching from one empty bin to another', done => { + const gd = createGraphDiv(); + + Plotly + .newPlot( + gd, + [{ + x: [ + 0.025,0.025,0.025,0.025,0.025, + 0.075,0.075,0.075,0.075,0.075, + 0.125,0.125,0.125,0.125,0.125,0.125, + 0.175,0.175,0.175,0.175, + 0.475,0.475,0.475 + ], + xbins: { start: 0, end: 0.5, size: 0.10 }, + type: 'histogram' + }], + { + hovermode: 'x', + width: 500, + height: 400, + margin: {l: 0, t: 0, r: 0, b: 0} + } + ) + .then(() => { + let hoverData; + gd.on('plotly_hover', e => { hoverData = e; }); + _hoverNatural(gd, 250, 200); + expect(hoverData.points[0].binNumber).toBe(2) + _hoverNatural(gd, 300, 200); + expect(hoverData.points[0].binNumber).toBe(3) + }) + .then(done, done.fail); + }); }); ['candlestick', 'ohlc'].forEach(function(type) {