Merge pull request #7872 from vizansh/fix-bar-label-overlap

fix(bar): prevent outside text labels from overlapping tilted axis ticks

Author: emilykl

draftlogs/7872_fix.md

@@ -0,0 +1 @@
+- Prevent outside bar text for zero-length bars from overlapping axis tick labels [[#7872](https://github.com/plotly/plotly.js/pull/7872)], with thanks to @vizansh for the contribution!

src/traces/bar/plot.js

@@ -554,6 +554,7 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, r, overhead, op
     // get trace attributes
     var trace = cd[0].trace;
     var isHorizontal = trace.orientation === 'h';
+    var zeroBarDir = getZeroBarDir(cd, isHorizontal, xa, ya);
 
     var text = getText(fullLayout, cd, i, xa, ya);
 
@@ -707,7 +708,8 @@ function appendBarText(gd, plotinfo, bar, cd, i, x0, x1, y0, y1, r, overhead, op
         transform = toMoveOutsideBar(x0, x1, y0, y1, textBB, {
             isHorizontal: isHorizontal,
             constrained: constrained,
-            angle: angle
+            angle: angle,
+            zeroBarDir: zeroBarDir
         });
     } else {
         constrained = trace.constraintext === 'both' || trace.constraintext === 'inside';
@@ -957,7 +959,12 @@ function toMoveOutsideBar(x0, x1, y0, y1, textBB, opts) {
     var anchorX = 0;
     var anchorY = 0;
 
-    var dir = isHorizontal ? dirSign(x1, x0) : dirSign(y0, y1);
+    var dir;
+    if ((isHorizontal ? x0 === x1 : y0 === y1) && opts.zeroBarDir) {
+        dir = opts.zeroBarDir;
+    } else {
+        dir = isHorizontal ? dirSign(x1, x0) : dirSign(y0, y1);
+    }
     if (isHorizontal) {
         targetX = x1 - dir * textpad;
         anchorX = dir * extrapad;
@@ -999,6 +1006,38 @@ function getTextPosition(trace, index) {
     return helpers.coerceEnumerated(attributeTextPosition, value);
 }
 
+function getZeroBarDir(cd, isHorizontal, xa, ya) {
+    var hasPositive = false;
+    var hasNegative = false;
+
+    for (var i = 0; i < cd.length; i++) {
+        var s = cd[i].s;
+
+        if (s > 0) {
+            hasPositive = true;
+        } else if (s < 0) {
+            hasNegative = true;
+        }
+
+        if (hasPositive && hasNegative) {
+            return 0;
+        }
+    }
+
+    var axis = isHorizontal ? xa : ya;
+    var positiveDir = -dirSign(axis.range[0], axis.range[1]);
+
+    if (!hasNegative) {
+        return positiveDir;
+    }
+
+    if (!hasPositive) {
+        return -positiveDir;
+    }
+
+    return 0;
+}
+
 function calcTexttemplate(fullLayout, cd, index, xa, ya) {
     var trace = cd[0].trace;
     var texttemplate = Lib.castOption(trace, index, 'texttemplate');

test/jasmine/tests/bar_test.js

@@ -1411,6 +1411,34 @@ describe('A bar plot', function() {
         .then(done, done.fail);
     });
 
+    it('should keep zero-value outside labels on the same side as negative bars', function(done) {
+        var data = [{
+            y: [-10, 0, -30],
+            type: 'bar',
+            text: ['a', 'zero', 'c'],
+            textposition: 'outside'
+        }];
+
+        Plotly.newPlot(gd, data).then(function() {
+            var traceNodes = getAllTraceNodes(gd);
+            var barNodes = getAllBarNodes(traceNodes[0]);
+            var foundTextNodes;
+
+            for(var i = 0; i < barNodes.length; i++) {
+                var barNode = barNodes[i];
+                var pathNode = barNode.querySelector('path');
+                var textNode = barNode.querySelector('text');
+                if(textNode) {
+                    foundTextNodes = true;
+                    assertTextIsBelowPath(textNode, pathNode);
+                }
+            }
+
+            expect(foundTextNodes).toBe(true);
+        })
+        .then(done, done.fail);
+    });
+
     it('should show bar texts (horizontal case)', function(done) {
         var data = [{
             x: [10, -20, 30],