Merge pull request #6923 from plotly/fix6922-treemap-centered-multiline-headers

Fix centering multi-line headers for `treemap` traces

Author: archmoj

draftlogs/6923_fix.md

@@ -0,0 +1 @@
+ - Fix centering multi-line headers for treemap traces [[#6923](https://github.com/plotly/plotly.js/pull/6923)]

src/traces/treemap/draw_descendants.js

@@ -184,9 +184,13 @@ module.exports = function drawDescendants(gd, cd, entry, slices, opts) {
 
         var font = Lib.ensureUniformFontSize(gd, helpers.determineTextFont(trace, pt, fullLayout.font));
 
-        sliceText.text(pt._text || ' ') // use one space character instead of a blank string to avoid jumps during transition
+
+        var text = pt._text || ' '; // use one space character instead of a blank string to avoid jumps during transition
+        var singleLineHeader = isHeader && text.indexOf('<br>') === -1;
+
+        sliceText.text(text)
             .classed('slicetext', true)
-            .attr('text-anchor', hasRight ? 'end' : (hasLeft || isHeader) ? 'start' : 'middle')
+            .attr('text-anchor', hasRight ? 'end' : (hasLeft || singleLineHeader) ? 'start' : 'middle')
             .call(Drawing.font, font)
             .call(svgTextUtils.convertToTspans, gd);
 

test/image/baselines/zz-treemap_multi-line_headers.png

@@ -0,0 +1,41 @@
+{
+    "data": [
+        {
+            "labels": [
+                "parent2",
+                "parent1<br>Long text on second line",
+                "item2",
+                "item1"
+            ],
+            "name": "",
+            "parents": [
+                "",
+                "",
+                "parent2",
+                "parent1<br>Long text on second line"
+            ],
+            "values": [
+                0,
+                0,
+                200,
+                500
+            ],
+            "type": "treemap",
+            "textposition": "middle center",
+            "texttemplate": "<b>%{label}</b>",
+            "textfont": {
+                "size": 20
+            }
+        }
+    ],
+    "layout": {
+        "margin": {
+            "t": 50,
+            "b": 10,
+            "l": 10,
+            "r": 10
+        },
+        "height": 200,
+        "width": 500
+    }
+}