Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lines 2+ in multiline HTML captions are misaligned in exports #16062

jimryan opened this issue Jul 17, 2021 · 2 comments · Fixed by #16063

Lines 2+ in multiline HTML captions are misaligned in exports #16062

jimryan opened this issue Jul 17, 2021 · 2 comments · Fixed by #16063


Copy link

jimryan commented Jul 17, 2021

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
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)



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:

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.

@circleci-mu circleci-mu added this to To do in Development-Flow Jul 17, 2021
@khlieng khlieng self-assigned this Jul 17, 2021
Copy link

khlieng commented Jul 17, 2021

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

Copy link

jimryan commented Jul 17, 2021

@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.

Development-Flow automation moved this from Review in progress to Done Aug 13, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Successfully merging a pull request may close this issue.

3 participants