Lines 2+ in multiline HTML captions are misaligned in exports

[jimryan]

Expected behaviour

When exporting a chart, each line of multiline caption text should begin at the same x position.

Actual behaviour

Lines 2+ are completely left-aligned, ignoring chart spacing and any other factors that determine the position of the first line of caption text.

I believe this is caused by a bug in the TextBuilder.modifyDOM function. This line in particular grabs the x attribute value of the SVG (I think), and then sets the x attribute for all tspans (which replace br tags when generating SVG) to it. This has the result of resetting the text position to x=0, causing lines 2+ to be incorrectly positioned in multiline captions.

I think the solution is to use the x position of the parent text.highcharts-subtitle element.

Live demo with steps to reproduce

https://jsfiddle.net/5f18dywv/1/
Click the Export button to export the chart. Note how the "Bar" line is misaligned.

Here's the caption text node from the above demo:

<text x="10" text-anchor="start" class="highcharts-caption" data-z-index="4" style="color:#666666;fill:#666666;" y="367">Foo<tspan class="highcharts-br" dy="15" x="0">​</tspan>Bar</text>

As you can see, the tspan resets the x position from 10 to 0.

Product version

Highcharts 9.1.2

Affected browser(s)

All

Workaround

Because Highcharts copies all attributes from the br tag when generating the tspan tag, adding a dx attribute to all br tags that moves the tspan over to align with the first line will fix it. See the following example:

https://jsfiddle.net/2xu0s9de/

In that example, I've set dx to 10 (the chart left-spacing), which produces a <tspan x="0" dx="10" ...> element in the exported SVG, which perfectly aligns with the first line of text.

[khlieng]

Some other possible workarounds would be to either disable useHTML if you dont need more than the supported subset, or to enable exporting.allowHTML.

[jimryan]

@khlieng Thanks for the incredibly fast response! Yes I indeed was misunderstanding the purpose of the useHTML option and didn't actually need it, so disabling it completely solves the issue for my use-case.