automatic margins for long labels

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');
@@ -2217,10 +2218,47 @@ axes.doTicks = function(gd, axid, skipTitle) {
             }
         }
 
+        function doAutoMargins() {
+            if(axLetter !== 'x' && axLetter !== 'y') { return; }
+            var pushKey = ax._name + '.automargin';
+            var sideLetter = ax.side[0];
+            var existingPush = fullLayout._pushmargin[pushKey];
+            var pushParams = {x: 0, y: 0, r: 0, l: 0, t: 0, b: 0};
+
+            if(!ax.automargin || ax.anchor === 'free' || !ax._anchorAxis) {
+                if(existingPush && !(
+                    existingPush.r.size === 0 && existingPush.l.size === 0 &&
+                    existingPush.b.size === 0 && existingPush.t.size === 0)) {
+                    Plots.autoMargin(gd, pushKey, pushParams);
+                }
+                return;
+            }
+
+            var axisDim;
+            if(axLetter === 'x') {
+                pushParams.y = ax._anchorAxis.domain[sideLetter === 't' ? 1 : 0];
+                axisDim = ax._boundingBox.height;
+            }
+            else {
+                pushParams.x = ax._anchorAxis.domain[sideLetter === 'r' ? 1 : 0];
+                axisDim = ax._boundingBox.width;
+            }
+            var axisTitleDim = (ax.title !== fullLayout._dfltTitle[axLetter] ?
+                ax.titlefont.size : 0);
+            var marginPush = axisTitleDim + axisDim;
+
+            if(!fullLayout._replotting ||
+                    !existingPush || existingPush[sideLetter].size < marginPush) {
+                pushParams[sideLetter] = marginPush;
+                Plots.autoMargin(gd, pushKey, pushParams);
+            }
+        }
+
         var done = Lib.syncOrAsync([
             allLabelsReady,
             fixLabelOverlaps,
-            calcBoundingBox
+            calcBoundingBox,
+            doAutoMargins
         ]);
         if(done && done.then) gd._promises.push(done);
         return done;

src/plots/cartesian/axis_defaults.js

@@ -88,5 +88,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,
 
     if(containerOut.showline || containerOut.ticks) coerce('mirror');
 
+    if(options.automargin) coerce('automargin');
+
     return containerOut;
 };

src/plots/cartesian/layout_attributes.js

@@ -344,6 +344,16 @@ module.exports = {
         editType: 'ticks',
         description: 'Determines whether or not the tick labels are drawn.'
     },
+    automargin: {
+        valType: 'boolean',
+        dflt: false,
+        role: 'style',
+        editType: 'ticks',
+        description: [
+            'Determines whether long tick labels automatically grow the figure',
+            'margins.'
+        ].join(' ')
+    },
     showspikes: {
         valType: 'boolean',
         dflt: false,

src/plots/cartesian/layout_defaults.js

@@ -138,6 +138,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
             data: fullData,
             bgColor: bgColor,
             calendar: layoutOut.calendar,
+            automargin: true,
             cheateronly: axLetter === 'x' && xaCheater[axName] && !xaNonCheater[axName]
         };
 

src/plots/polar/polar.js

@@ -286,7 +286,10 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
         position: 0,
 
         // dummy truthy value to make Axes.doTicks draw the grid
-        _counteraxis: true
+        _counteraxis: true,
+
+        // don't use automargins routine for labels
+        automargin: false
     });
 
     setScale(ax, radialLayout, fullLayout);
@@ -410,7 +413,10 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
         position: 0,
 
         // dummy truthy value to make Axes.doTicks draw the grid
-        _counteraxis: true
+        _counteraxis: true,
+
+        // don't use automargins routine for labels
+        automargin: false
     });
 
     // Set the angular range in degrees to make auto-tick computation cleaner,

src/plots/ternary/ternary.js

@@ -261,7 +261,8 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
         _pos: 0, // _this.xaxis.domain[0] * graphSize.w,
         _id: 'y',
         _length: w,
-        _gridpath: 'M0,0l' + h + ',-' + (w / 2)
+        _gridpath: 'M0,0l' + h + ',-' + (w / 2),
+        automargin: false // don't use automargins routine for labels
     });
     setConvert(aaxis, _this.graphDiv._fullLayout);
     aaxis.setScale();
@@ -280,7 +281,8 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
         _pos: 0, // (1 - yDomain0) * graphSize.h,
         _id: 'x',
         _length: w,
-        _gridpath: 'M0,0l-' + (w / 2) + ',-' + h
+        _gridpath: 'M0,0l-' + (w / 2) + ',-' + h,
+        automargin: false // don't use automargins routine for labels
     });
     setConvert(baxis, _this.graphDiv._fullLayout);
     baxis.setScale();
@@ -301,7 +303,8 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
         _pos: 0, // _this.xaxis.domain[1] * graphSize.w,
         _id: 'y',
         _length: w,
-        _gridpath: 'M0,0l-' + h + ',' + (w / 2)
+        _gridpath: 'M0,0l-' + h + ',' + (w / 2),
+        automargin: false // don't use automargins routine for labels
     });
     setConvert(caxis, _this.graphDiv._fullLayout);
     caxis.setScale();

test/image/mocks/long_axis_labels.json

@@ -0,0 +1,59 @@
+{
+    "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",
+                "loooooongloooooongloooooong 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": ["loooooooo"]
+        }
+    ],
+    "layout": {
+        "xaxis": {
+            "title": "X Axis Title",
+            "titlefont": { "size": 80 },
+            "automargin": true
+        },
+        "yaxis": {
+            "title": "Y Axis Title",
+            "titlefont": { "size": 40 },
+            "ticklen": 50,
+            "automargin": true
+        },
+        "yaxis2": {
+            "title": "Y2 Axis Title",
+            "overlaying": "y",
+            "side": "right",
+            "titlefont": { "size": 40 },
+            "automargin": true
+        }
+    }
+}

test/jasmine/tests/axes_test.js

@@ -2564,6 +2564,145 @@ describe('Test axes', function() {
             });
         });
     });
+
+    describe('automargin', function() {
+        var data = [{
+                x: [
+                    'short label 1', 'loooooong label 1',
+                    'short label 2', 'loooooong label 2',
+                    'short label 3', 'loooooong label 3',
+                    'short label 4', 'loooooongloooooongloooooong 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'
+                ]
+            }],
+            gd, initialSize, previousSize, savedBottom;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('should grow and shrink margins', function(done) {
+
+            Plotly.plot(gd, data)
+            .then(function() {
+                initialSize = Lib.extendDeep({}, gd._fullLayout._size);
+                expect(gd._fullLayout.xaxis._lastangle).toBe(30);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {'yaxis.automargin': true});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size.l).toBeGreaterThan(previousSize.l);
+                expect(size.r).toBe(previousSize.r);
+                expect(size.b).toBe(previousSize.b);
+                expect(size.t).toBe(previousSize.t);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {'xaxis.automargin': true});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size.l).toBe(previousSize.l);
+                expect(size.r).toBe(previousSize.r);
+                expect(size.b).toBeGreaterThan(previousSize.b);
+                expect(size.t).toBe(previousSize.t);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                savedBottom = previousSize.b;
+                return Plotly.relayout(gd, {'xaxis.tickangle': 45});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size.l).toBe(previousSize.l);
+                expect(size.r).toBe(previousSize.r);
+                expect(size.b).toBeGreaterThan(previousSize.b);
+                expect(size.t).toBe(previousSize.t);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {'xaxis.tickangle': 30});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size.l).toBe(previousSize.l);
+                expect(size.r).toBe(previousSize.r);
+                expect(size.b).toBe(savedBottom);
+                expect(size.t).toBe(previousSize.t);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {'yaxis.ticklen': 30});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size.l).toBeGreaterThan(previousSize.l);
+                expect(size.r).toBe(previousSize.r);
+                expect(size.b).toBe(previousSize.b);
+                expect(size.t).toBe(previousSize.t);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {'yaxis.titlefont.size': 30});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size).toEqual(previousSize);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {'yaxis.title': 'hello'});
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                expect(size.l).toBeGreaterThan(previousSize.l);
+                expect(size.r).toBe(previousSize.r);
+                expect(size.b).toBe(previousSize.b);
+                expect(size.t).toBe(previousSize.t);
+            })
+            .then(function() {
+                previousSize = Lib.extendDeep({}, gd._fullLayout._size);
+                return Plotly.relayout(gd, {
+                    'yaxis.side': 'right',
+                    'xaxis.side': 'top'
+                });
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                // left to right and bottom to top
+                expect(size.l).toBe(initialSize.r);
+                expect(size.r).toBe(previousSize.l);
+                expect(size.b).toBe(initialSize.b);
+                expect(size.t).toBe(previousSize.b);
+            })
+            .then(function() {
+                return Plotly.relayout(gd, {
+                    'xaxis.automargin': false,
+                    'yaxis.automargin': false
+                });
+            })
+            .then(function() {
+                var size = gd._fullLayout._size;
+                // back to the defaults
+                expect(size).toEqual(initialSize);
+            })
+            .catch(failTest)
+            .then(done);
+
+        });
+    });
 });
 
 function getZoomInButton(gd) {