Merge pull request #3510 from plotly/fix-automargin-push-offset

Fix axis automargin push offset

Author: etpinard

src/plots/cartesian/axes.js

@@ -1940,27 +1940,53 @@ axes.drawOne = function(gd, ax, opts) {
     var hasRangeSlider = Registry.getComponentMethod('rangeslider', 'isVisible')(ax);
 
     function doAutoMargins() {
-        var push, rangeSliderPush;
+        var s = ax.side.charAt(0);
+        var push;
+        var rangeSliderPush;
 
         if(hasRangeSlider) {
             rangeSliderPush = Registry.getComponentMethod('rangeslider', 'autoMarginOpts')(gd, ax);
         }
         Plots.autoMargin(gd, rangeSliderAutoMarginID(ax), rangeSliderPush);
 
-        var s = ax.side.charAt(0);
         if(ax.automargin && (!hasRangeSlider || s !== 'b')) {
             push = {x: 0, y: 0, r: 0, l: 0, t: 0, b: 0};
 
-            if(axLetter === 'x') {
-                push.y = (ax.anchor === 'free' ? ax.position :
-                    ax._anchorAxis.domain[s === 't' ? 1 : 0]);
-                push[s] += ax._boundingBox.height;
-            } else {
-                push.x = (ax.anchor === 'free' ? ax.position :
-                    ax._anchorAxis.domain[s === 'r' ? 1 : 0]);
-                push[s] += ax._boundingBox.width;
+            var bbox = ax._boundingBox;
+            var counterAx = mainPlotinfo[counterLetter + 'axis'];
+            var anchorAxDomainIndex;
+            var offset;
+
+            switch(axLetter + s) {
+                case 'xb':
+                    anchorAxDomainIndex = 0;
+                    offset = bbox.top - counterAx._length - counterAx._offset;
+                    push[s] = bbox.height;
+                    break;
+                case 'xt':
+                    anchorAxDomainIndex = 1;
+                    offset = counterAx._offset - bbox.bottom;
+                    push[s] = bbox.height;
+                    break;
+                case 'yl':
+                    anchorAxDomainIndex = 0;
+                    offset = counterAx._offset - bbox.right;
+                    push[s] = bbox.width;
+                    break;
+                case 'yr':
+                    anchorAxDomainIndex = 1;
+                    offset = bbox.left - counterAx._length - counterAx._offset;
+                    push[s] = bbox.width;
+                    break;
             }
 
+            push[counterLetter] = ax.anchor === 'free' ?
+                ax.position :
+                ax._anchorAxis.domain[anchorAxDomainIndex];
+
+            if(push[s] > 0) {
+                push[s] += offset;
+            }
             if(ax.title.text !== fullLayout._dfltTitle[axLetter]) {
                 push[s] += ax.title.font.size;
             }

test/image/baselines/axis_automargin_zero_margins.png

@@ -0,0 +1,35 @@
+{
+  "data": [
+    {
+      "x": [ "12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM" ],
+      "y": [ 59.44, 68.75, 87.5, 100.5, 95.56, 92.8, 85.25, 77.4, 76.4, 73.94, 74.56, 81.06 ]
+    },
+    {
+      "x": [ "12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM" ],
+      "y": [ 59.44, 68.75, 87.5, 100.5, 95.56, 92.8, 85.25, 77.4, 76.4, 73.94, 74.56, 81.06 ],
+      "xaxis": "x2",
+      "yaxis": "y2"
+    }
+  ],
+  "layout": {
+    "margin": {"l": 0, "r": 0, "t": 0, "b": 0},
+    "grid": {"rows": 1, "columns": 2, "pattern": "independent"},
+    "xaxis": {
+      "automargin": true
+    },
+    "yaxis": {
+      "automargin": true
+    },
+    "xaxis2": {
+      "automargin": true,
+      "side": "top"
+    },
+    "yaxis2": {
+      "automargin": true,
+      "side": "right"
+    },
+    "showlegend": false,
+    "width": 700,
+    "height": 450
+  }
+}

test/image/baselines/legend_large_margin.png

@@ -3150,7 +3150,7 @@ describe('Test axes', function() {
             })
             .then(function() {
                 var size = gd._fullLayout._size;
-                expect(size.l).toBe(previousSize.l);
+                expect(size.l).toBeWithin(previousSize.l, 1.1);
                 expect(size.r).toBe(previousSize.r);
                 expect(size.b).toBe(previousSize.b);
                 expect(size.t).toBe(previousSize.t);
@@ -3187,7 +3187,7 @@ describe('Test axes', function() {
                 expect(size.l).toBe(initialSize.r);
                 expect(size.r).toBe(previousSize.l);
                 expect(size.b).toBe(initialSize.b);
-                expect(size.t).toBe(previousSize.b);
+                expect(size.t).toBeWithin(previousSize.b, 1.1);
 
                 return Plotly.relayout(gd, {
                     'xaxis.automargin': false,