Merge pull request #4160 from plotly/legend-horizontal-computed-dims-fix

Multiple legend positioning and sizing fixes

Author: etpinard

src/components/legend/anchor_utils.js

@@ -121,10 +121,13 @@ module.exports = {
         valType: 'number',
         min: -2,
         max: 3,
-        dflt: 1.02,
         role: 'style',
         editType: 'legend',
-        description: 'Sets the x position (in normalized coordinates) of the legend.'
+        description: [
+            'Sets the x position (in normalized coordinates) of the legend.',
+            'Defaults to *1.02* for vertical legends and',
+            'defaults to *0* for horizontal legends.'
+        ].join(' ')
     },
     xanchor: {
         valType: 'enumerated',
@@ -135,28 +138,37 @@ module.exports = {
         description: [
             'Sets the legend\'s horizontal position anchor.',
             'This anchor binds the `x` position to the *left*, *center*',
-            'or *right* of the legend.'
+            'or *right* of the legend.',
+            'Value *auto* anchors legends to the right for `x` values greater than or equal to 2/3,',
+            'anchors legends to the left for `x` values less than or equal to 1/3 and',
+            'anchors legends with respect to their center otherwise.'
         ].join(' ')
     },
     y: {
         valType: 'number',
         min: -2,
         max: 3,
-        dflt: 1,
         role: 'style',
         editType: 'legend',
-        description: 'Sets the y position (in normalized coordinates) of the legend.'
+        description: [
+            'Sets the y position (in normalized coordinates) of the legend.',
+            'Defaults to *1* for vertical legends,',
+            'defaults to *-0.1* for horizontal legends on graphs w/o range sliders and',
+            'defaults to *1.1* for horizontal legends on graph with one or multiple range sliders.'
+        ].join(' ')
     },
     yanchor: {
         valType: 'enumerated',
         values: ['auto', 'top', 'middle', 'bottom'],
-        dflt: 'auto',
         role: 'info',
         editType: 'legend',
         description: [
             'Sets the legend\'s vertical position anchor',
             'This anchor binds the `y` position to the *top*, *middle*',
-            'or *bottom* of the legend.'
+            'or *bottom* of the legend.',
+            'Value *auto* anchors legends at their bottom for `y` values less than or equal to 1/3,',
+            'anchors legends to at their top for `y` values greater than or equal to 2/3 and',
+            'anchors legends with respect to their middle otherwise.'
         ].join(' ')
     },
     uirevision: {

src/components/legend/attributes.js

@@ -13,5 +13,10 @@ module.exports = {
     scrollBarMinHeight: 20,
     scrollBarColor: '#808BA4',
     scrollBarMargin: 4,
-    textOffsetX: 40
+    scrollBarEnterAttrs: {rx: 20, ry: 3, width: 0, height: 0},
+
+    // number of px between legend symbol and legend text (always in x direction)
+    textGap: 40,
+    // number of px between each legend item (x and/or y direction)
+    itemGap: 5
 };

src/components/legend/constants.js

@@ -24,8 +24,6 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     var legendReallyHasATrace = false;
     var defaultOrder = 'normal';
 
-    var defaultX, defaultY, defaultXAnchor, defaultYAnchor;
-
     for(var i = 0; i < fullData.length; i++) {
         var trace = fullData[i];
 
@@ -82,20 +80,26 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     coerce('borderwidth');
     Lib.coerceFont(coerce, 'font', layoutOut.font);
 
-    coerce('orientation');
-    if(containerOut.orientation === 'h') {
-        var xaxis = layoutIn.xaxis;
-        if(Registry.getComponentMethod('rangeslider', 'isVisible')(xaxis)) {
-            defaultX = 0;
-            defaultXAnchor = 'left';
+    var orientation = coerce('orientation');
+    var defaultX, defaultY, defaultYAnchor;
+
+    if(orientation === 'h') {
+        defaultX = 0;
+
+        if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
             defaultY = 1.1;
             defaultYAnchor = 'bottom';
         } else {
-            defaultX = 0;
-            defaultXAnchor = 'left';
+            // maybe use y=1.1 / yanchor=bottom as above
+            //   to avoid https://github.com/plotly/plotly.js/issues/1199
+            //   in v2
             defaultY = -0.1;
             defaultYAnchor = 'top';
         }
+    } else {
+        defaultX = 1.02;
+        defaultY = 1;
+        defaultYAnchor = 'auto';
     }
 
     coerce('traceorder', defaultOrder);
@@ -107,7 +111,7 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     coerce('itemdoubleclick');
 
     coerce('x', defaultX);
-    coerce('xanchor', defaultXAnchor);
+    coerce('xanchor');
     coerce('y', defaultY);
     coerce('yanchor', defaultYAnchor);
     coerce('valign');