diff --git a/draftlogs/6923_fix.md b/draftlogs/6923_fix.md new file mode 100644 index 00000000000..2dc85b084b7 --- /dev/null +++ b/draftlogs/6923_fix.md @@ -0,0 +1 @@ + - Fix centering multi-line headers for treemap traces [[#6923](https://github.com/plotly/plotly.js/pull/6923)] diff --git a/src/traces/treemap/draw_descendants.js b/src/traces/treemap/draw_descendants.js index 32c20344a62..dc37f2e0ceb 100644 --- a/src/traces/treemap/draw_descendants.js +++ b/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); diff --git a/test/image/baselines/zz-treemap_multi-line_headers.png b/test/image/baselines/zz-treemap_multi-line_headers.png new file mode 100644 index 00000000000..58afe6c819f Binary files /dev/null and b/test/image/baselines/zz-treemap_multi-line_headers.png differ diff --git a/test/image/mocks/zz-treemap_multi-line_headers.json b/test/image/mocks/zz-treemap_multi-line_headers.json new file mode 100644 index 00000000000..7119fff7852 --- /dev/null +++ b/test/image/mocks/zz-treemap_multi-line_headers.json @@ -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 + } +}