first cut at automatic margins for long labels

Author: nicolaskruchten

src/plots/cartesian/axes.js

@@ -11,6 +11,7 @@
 
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
+var Plots = require('../../plots/plots');
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
@@ -2100,10 +2101,23 @@ axes.doTicks = function(gd, axid, skipTitle) {
             }
         }
 
+        function doAutoMargins() {
+            var marginPush = ax.titlefont.size + 15 +
+                (axLetter === 'x' ? ax._boundingBox.height : ax._boundingBox.width);
+
+            if(!ax._marginPush || ax._marginPush < marginPush) {
+                ax._marginPush = marginPush;
+                var pushParams = {x: 0, y: 0, r: 0, l: 0, t: 0, b: 0};
+                pushParams[ax.side[0]] = marginPush;
+                Plots.autoMargin(gd, ax._name, pushParams);
+            }
+        }
+
         var done = Lib.syncOrAsync([
             allLabelsReady,
             fixLabelOverlaps,
-            calcBoundingBox
+            calcBoundingBox,
+            doAutoMargins
         ]);
         if(done && done.then) gd._promises.push(done);
         return done;

test/image/mocks/long_axis_labels.json

@@ -0,0 +1,37 @@
+{
+    "data": [{
+        "type": "scatter",
+        "name": "loooooong x",
+        "x": [
+            "short label 1", "loooooong label 1",
+            "short label 2", "loooooong label 2",
+            "short label 3", "loooooong label 3",
+            "short label 4", "loooooong label 4",
+            "short label 5", "loooooong label 5"
+        ],
+        "y": [
+            "short label 1", "loooooong label 1",
+            "short label 2", "loooooong label 2",
+            "short label 3", "loooooong label 3",
+            "short label 4", "loooooong label 4",
+            "short label 5", "loooooong label 5"
+          ]
+    },
+    {
+        "yaxis": "y2",
+        "type": "scatter",
+        "name": "loooooong y",
+        "x":["looooooooooooonger"],
+        "y":["loooooonger"]
+    }
+  ],
+    "layout": {
+      "xaxis": {"title": "X Axis Title", "titlefont": {"size": 80}},
+      "yaxis": {"title": "Y Axis Title", "titlefont": {"size": 40}},
+      "yaxis2": {
+        "title": "Y2 Axis Title",
+        "overlaying": "y",
+        "side": "right"
+      }
+      }
+}