From e5b6f0c6980803352898c157cdac62bc2f537e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89tienne=20T=C3=A9treault-Pinard?= <etienne@plot.ly>
Date: Tue, 16 Apr 2019 21:32:04 -0400
Subject: [PATCH] fix hoverlabel.align for centered labels

---
 src/components/fx/hover.js             |  8 ++++--
 test/jasmine/tests/hover_label_test.js | 39 ++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js
index 541f5abf4c2..e312690a176 100644
--- a/src/components/fx/hover.js
+++ b/src/components/fx/hover.js
@@ -1264,10 +1264,14 @@ function alignHoverText(hoverLabels, rotateLabels) {
         if(textAlign !== 'auto') {
             if(textAlign === 'left' && anchor !== 'start') {
                 tx.attr('text-anchor', 'start');
-                posX = -d.bx - HOVERTEXTPAD;
+                posX = anchor === 'middle' ?
+                    -d.bx / 2 - d.tx2width / 2 + HOVERTEXTPAD :
+                    -d.bx - HOVERTEXTPAD;
             } else if(textAlign === 'right' && anchor !== 'end') {
                 tx.attr('text-anchor', 'end');
-                posX = d.bx + HOVERTEXTPAD;
+                posX = anchor === 'middle' ?
+                    d.bx / 2 - d.tx2width / 2 - HOVERTEXTPAD :
+                    d.bx + HOVERTEXTPAD;
             }
         }
 
diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js
index 747bb06f5f1..b6d35d9387d 100644
--- a/test/jasmine/tests/hover_label_test.js
+++ b/test/jasmine/tests/hover_label_test.js
@@ -2082,6 +2082,45 @@ describe('hover info', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should honor *hoverlabel.align (centered label case)', function(done) {
+        var gd = createGraphDiv();
+
+        function _assert(msg, exp) {
+            var tx = d3.select('g.hovertext').select('text.nums');
+            expect(tx.attr('text-anchor')).toBe(exp.textAnchor, 'text anchor|' + msg);
+            expect(Number(tx.attr('x'))).toBeWithin(exp.posX, 3, 'x position|' + msg);
+            delete gd._hoverdata;
+        }
+
+        Plotly.plot(gd, [{
+            x: ['giraffes'],
+            y: [5],
+            name: 'LA Zoo',
+            type: 'bar',
+            text: ['Way tooooo long hover info!'],
+            hoverinfo: 'all'
+        }], {
+            margin: {l: 0, t: 0, b: 0, r: 0},
+            hovermode: 'closest',
+            width: 400,
+            height: 400
+        })
+        .then(function() { _hoverNatural(gd, 200, 200); })
+        .then(function() { _assert('base', {textAnchor: 'middle', posX: -24.3}); })
+        .then(function() {
+            return Plotly.relayout(gd, 'hoverlabel.align', 'left');
+        })
+        .then(function() { _hoverNatural(gd, 200, 200); })
+        .then(function() { _assert('align:left', {textAnchor: 'start', posX: -105.7}); })
+        .then(function() {
+            return Plotly.restyle(gd, 'hoverlabel.align', 'right');
+        })
+        .then(function() { _hoverNatural(gd, 200, 200); })
+        .then(function() { _assert('align:right', {textAnchor: 'end', posX: 57}); })
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('hover info on stacked subplots', function() {