Merge pull request #5586 from plotly/fix5402-inside-ticks-on-overlaid-axes

Take into account inside labels of overlaid axes in autorange padding

Author: archmoj

src/plots/cartesian/autorange.js

@@ -217,7 +217,7 @@ function makePadFn(fullLayout, ax, max) {
 
     var zero = 0;
     if(!isLinked(fullLayout, ax._id)) {
-        zero = padInsideLabelsOnAnchorAxis(ax, max);
+        zero = padInsideLabelsOnAnchorAxis(fullLayout, ax, max);
     }
     extrappad = Math.max(zero, extrappad);
 
@@ -236,45 +236,54 @@ function makePadFn(fullLayout, ax, max) {
 
 var TEXTPAD = 3;
 
-function padInsideLabelsOnAnchorAxis(ax, max) {
+function padInsideLabelsOnAnchorAxis(fullLayout, ax, max) {
     var pad = 0;
-    var anchorAxis = ax._anchorAxis || {};
-    if((anchorAxis.ticklabelposition || '').indexOf('inside') !== -1) {
-        // increase padding to make more room for inside tick labels of the counter axis
-        if((
-            !max && (
-                anchorAxis.side === 'left' ||
-                anchorAxis.side === 'bottom'
-            )
-        ) || (
-            max && (
-                anchorAxis.side === 'top' ||
-                anchorAxis.side === 'right'
-            )
-        )) {
-            var isX = ax._id.charAt(0) === 'x';
-
-            if(anchorAxis._vals) {
-                var rad = Lib.deg2rad(anchorAxis._tickAngles[anchorAxis._id + 'tick'] || 0);
-                var cosA = Math.abs(Math.cos(rad));
-                var sinA = Math.abs(Math.sin(rad));
-
-                // use bounding boxes
-                anchorAxis._vals.forEach(function(t) {
-                    if(t.bb) {
-                        var w = 2 * TEXTPAD + t.bb.width;
-                        var h = 2 * TEXTPAD + t.bb.height;
-
-                        pad = Math.max(pad, isX ?
-                            Math.max(w * cosA, h * sinA) :
-                            Math.max(h * cosA, w * sinA)
-                        );
+
+    var isX = ax._id.charAt(0) === 'x';
+
+    for(var subplot in fullLayout._plots) {
+        var plotinfo = fullLayout._plots[subplot];
+
+        if(ax._id !== plotinfo.xaxis._id && ax._id !== plotinfo.yaxis._id) continue;
+
+        var anchorAxis = (isX ? plotinfo.yaxis : plotinfo.xaxis) || {};
+
+        if((anchorAxis.ticklabelposition || '').indexOf('inside') !== -1) {
+            // increase padding to make more room for inside tick labels of the counter axis
+            if((
+                !max && (
+                    anchorAxis.side === 'left' ||
+                    anchorAxis.side === 'bottom'
+                )
+            ) || (
+                max && (
+                    anchorAxis.side === 'top' ||
+                    anchorAxis.side === 'right'
+                )
+            )) {
+                if(anchorAxis._vals) {
+                    var rad = Lib.deg2rad(anchorAxis._tickAngles[anchorAxis._id + 'tick'] || 0);
+                    var cosA = Math.abs(Math.cos(rad));
+                    var sinA = Math.abs(Math.sin(rad));
+
+                    // use bounding boxes
+                    for(var i = 0; i < anchorAxis._vals.length; i++) {
+                        var t = anchorAxis._vals[i];
+                        if(t.bb) {
+                            var w = 2 * TEXTPAD + t.bb.width;
+                            var h = 2 * TEXTPAD + t.bb.height;
+
+                            pad = Math.max(pad, isX ?
+                                Math.max(w * cosA, h * sinA) :
+                                Math.max(h * cosA, w * sinA)
+                            );
+                        }
                     }
-                });
-            }
+                }
 
-            if(anchorAxis.ticks === 'inside' && anchorAxis.ticklabelposition === 'inside') {
-                pad += anchorAxis.ticklen || 0;
+                if(anchorAxis.ticks === 'inside' && anchorAxis.ticklabelposition === 'inside') {
+                    pad += anchorAxis.ticklen || 0;
+                }
             }
         }
     }

test/image/baselines/ticklabelposition-overlay.png

@@ -0,0 +1,61 @@
+{
+    "data": [
+        {
+            "y": [0, 100],
+            "yaxis": "y"
+        },
+        {
+            "y": [100, 0],
+            "yaxis": "y2"
+        },
+        {
+            "x": [0, 100],
+            "xaxis": "x2",
+            "yaxis": "y3"
+        },
+        {
+            "x": [100, 0],
+            "xaxis": "x3",
+            "yaxis": "y3"
+        }
+    ],
+    "layout": {
+        "width": 300,
+        "height": 400,
+        "margin": {
+            "t": 40,
+            "b": 40,
+            "l": 40,
+            "r": 40
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "yaxis": {
+            "domain" : [0, 0.45],
+            "anchor": "x",
+            "ticklabelposition": "inside",
+            "side": "left"
+        },
+        "yaxis2": {
+            "overlaying": "y",
+            "anchor": "x",
+            "ticklabelposition": "inside",
+            "side": "right"
+        },
+        "yaxis3": {
+            "anchor": "x3",
+            "domain" : [0.55, 1]
+        },
+        "xaxis2": {
+            "overlaying": "x3",
+            "anchor": "y3",
+            "ticklabelposition": "inside",
+            "side": "bottom"
+        },
+        "xaxis3": {
+            "anchor": "y3",
+            "ticklabelposition": "inside",
+            "side": "top"
+        }
+    }
+}

test/image/mocks/ticklabelposition-overlay.json

@@ -973,6 +973,7 @@ var list = [
     'ticklabelposition-b',
     'ticklabelposition-c',
     'ticklabelposition-d',
+    'ticklabelposition-overlay',
     'tickson_boundaries',
     'titles-avoid-labels',
     'trace_metatext',
@@ -2062,6 +2063,7 @@ figs['ticklabelposition-a'] = require('@mocks/ticklabelposition-a');
 figs['ticklabelposition-b'] = require('@mocks/ticklabelposition-b');
 figs['ticklabelposition-c'] = require('@mocks/ticklabelposition-c');
 figs['ticklabelposition-d'] = require('@mocks/ticklabelposition-d');
+figs['ticklabelposition-overlay'] = require('@mocks/ticklabelposition-overlay');
 figs['tickson_boundaries'] = require('@mocks/tickson_boundaries');
 // figs['titles-avoid-labels'] = require('@mocks/titles-avoid-labels');
 // figs['trace_metatext'] = require('@mocks/trace_metatext');