More than one HTML line break not working if chart.renderer.label is used for displaying a label in the chart

[ChartHeaven]

Example:

http://jsfiddle.net/pscjzhe4/212/

[A----]

Your issue is that if you do more than one line-break, it only displays one, right?

[A----]

Tried to use the latest canvg instead of the old canvas-tools, no dice: http://jsfiddle.net/pscjzhe4/213/

[ChartHeaven]

Got it working with a small trick! Just add two empty spaces between two br

http://jsfiddle.net/pscjzhe4/214/

[A----]

For reference, the issue is probably located somewhere between the SVG generation of HTML content and the canvg rendering part.

Here's the SVG text part without your fix:

<text x="8"  style="color:#ffffff;fill:#ffffff;" y="20"><tspan>Max observation</tspan><tspan x="8" dy="15">Next row</tspan>

With your fix:

<text x="8"  style="color:#ffffff;fill:#ffffff;" y="20"><tspan>Max observation</tspan><tspan x="8" dy="15">  </tspan><tspan x="8" dy="15">Next row</tspan></text>

Both rendered with canvg here: http://jsfiddle.net/8k94vfkz/1/

My guess is that canvg is correct, Highcharts isn't. In the first snippet, second tspan should have dy="30"is the line-height is expected to be 15.

The second snippet fixes things by introducing an empty tspan with its own dy attribute which means an Y-axis relative displacement. But relative to what? canvg adds it to the current position ( https://github.com/gabelerner/canvg/blob/master/canvg.js#L2159 ). Which seems to be what the specs say:

If a single is provided, this value represents the new relative X coordinate for the current text position for rendering the glyphs corresponding to the first character within this element or any of its descendants. The current text position is shifted along the x-axis of the current user coordinate system by before the first character's glyphs are rendered.
– http://www.w3.org/TR/SVG/text.html#TSpanElementDXAttribute