Merge pull request #6711 from 28raining/center-legend

Adding horixontal alignment for horizontal legend title

Author: archmoj

src/components/legend/attributes.js

@@ -267,14 +267,15 @@ module.exports = {
         }),
         side: {
             valType: 'enumerated',
-            values: ['top', 'left', 'top left'],
+            values: ['top', 'left', 'top left', 'top center', 'top right'],
             editType: 'legend',
             description: [
                 'Determines the location of legend\'s title',
                 'with respect to the legend items.',
                 'Defaulted to *top* with `orientation` is *h*.',
                 'Defaulted to *left* with `orientation` is *v*.',
                 'The *top left* options could be used to expand',
+                'top center and top right are for horizontal alignment',
                 'legend area in both x and y sides.'
             ].join(' ')
         },

src/components/legend/draw.js

@@ -661,13 +661,18 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
         // approximation to height offset to center the font
         // to avoid getBoundingClientRect
         if(aTitle === MAIN_TITLE) {
+            var titleOffset = 0;
             if(legendObj.title.side === 'left') {
                 // add extra space between legend title and itmes
                 width += constants.itemGap * 2;
+            } else if(legendObj.title.side === 'top center') {
+                if(legendObj._width) titleOffset = 0.5 * (legendObj._width - 2 * bw - 2 * constants.titlePad - width);
+            } else if(legendObj.title.side === 'top right') {
+                if(legendObj._width) titleOffset = legendObj._width - 2 * bw - 2 * constants.titlePad - width;
             }
 
             svgTextUtils.positionText(textEl,
-                bw + constants.titlePad,
+                bw + constants.titlePad + titleOffset,
                 bw + lineHeight
             );
         } else { // legend item

test/image/baselines/legend_horizontal_autowrap.png

@@ -547,7 +547,8 @@
         "size": 11.9552
       },
       "y": -0.4,
-      "orientation": "h"
+      "orientation": "h",
+      "title": { "text": "Legend Title", "side": "top right" }
     },
     "hovermode": "closest",
     "width": 680,

test/image/baselines/legend_horizontal_one_row.png

@@ -21,6 +21,6 @@
     ],
     "layout": {
         "title": {"text": "Average Distribution per Month"},
-        "legend": { "orientation": "h" }
+        "legend": { "orientation": "h", "title": { "text": "Legend Title", "side": "top center" }}
     }
 }

test/image/baselines/legend_itemwidth_dashline.png

@@ -39,7 +39,8 @@
   ],
   "layout": {
     "legend": {
-      "itemwidth": 60
+      "itemwidth": 60,
+      "title": { "text": "Title", "side": "top center" }
     }
   }
 }

test/image/mocks/legend_horizontal_autowrap.json

@@ -2923,13 +2923,15 @@
      },
      "role": "object",
      "side": {
-      "description": "Determines the location of legend's title with respect to the legend items. Defaulted to *top* with `orientation` is *h*. Defaulted to *left* with `orientation` is *v*. The *top left* options could be used to expand legend area in both x and y sides.",
+      "description": "Determines the location of legend's title with respect to the legend items. Defaulted to *top* with `orientation` is *h*. Defaulted to *left* with `orientation` is *v*. The *top left* options could be used to expand top center and top right are for horizontal alignment legend area in both x and y sides.",
       "editType": "legend",
       "valType": "enumerated",
       "values": [
        "top",
        "left",
-       "top left"
+       "top left",
+       "top center",
+       "top right"
       ]
      },
      "text": {