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

Adding horixontal alignment for horizontal legend title
plotly · Aug 22, 2023 · 46278f5 · 46278f5
2 parents 9a039bd + e2d0bae
commit 46278f5
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 7 deletions.
diff --git a/src/components/legend/attributes.js b/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(' ')
         },

diff --git a/src/components/legend/draw.js b/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

diff --git a/test/image/baselines/legend_horizontal_autowrap.png b/test/image/baselines/legend_horizontal_autowrap.png
diff --git a/test/image/baselines/legend_horizontal_one_row.png b/test/image/baselines/legend_horizontal_one_row.png
diff --git a/test/image/baselines/legend_itemwidth_dashline.png b/test/image/baselines/legend_itemwidth_dashline.png
diff --git a/test/image/mocks/legend_horizontal_autowrap.json b/test/image/mocks/legend_horizontal_autowrap.json
@@ -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,

diff --git a/test/image/mocks/legend_horizontal_one_row.json b/test/image/mocks/legend_horizontal_one_row.json
@@ -21,6 +21,6 @@
     ],
     "layout": {
         "title": {"text": "Average Distribution per Month"},
-        "legend": { "orientation": "h" }
+        "legend": { "orientation": "h", "title": { "text": "Legend Title", "side": "top center" }}
     }
 }
diff --git a/test/image/mocks/legend_itemwidth_dashline.json b/test/image/mocks/legend_itemwidth_dashline.json
@@ -39,7 +39,8 @@
   ],
   "layout": {
     "legend": {
-      "itemwidth": 60
+      "itemwidth": 60,
+      "title": { "text": "Title", "side": "top center" }
     }
   }
 }
diff --git a/test/plot-schema.json b/test/plot-schema.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": {