Multi-Line Title is not working when we export to PNG using CanVG - Highcharts

user_7509514 0
Viewed 131

I'm working on a creating a highchart example, and I want to export the chart into PNG format. When downloading the PNG image, it displays differently than it does on the chart.

I have tried various approaches to add the title lines, but none of them are working for me.

Below see different attempts for adding the title lines

> 1. "text":"<p>Header Line Text</p><p>Line 2</p>Line 3"
> 2. "text":"<span style="display:block">Header Line Text</span><span style="display:block">Next Line</span>Line 3"
> 3. "text":"Header Line Text<br>Line 2<br>Line 3"

Please find my example code in this JSFiddle http://jsfiddle.net/deepakpookkote/7jgc1nyq/5/

Please help me out to solve this issue or recomment an approach.

highcharts css arrays html
1 Answers

Remove parameter "useHTML":true (or set "useHTML":false) from "title":{}. Also, remove the <p> tags, resulting in this format using the <br> tag:

"text": "Header Line Text<br>Line 2<br>Line 3"

Full:

"title":{
      "style":{
         "fontFamily":[
            "Arial Narrow"
         ],
         "fontSize":"12pt",
         "margin-left":"100px",
         "wordWrap":"break-word",
         "text-align":"center"
      },
      "align":"center",
      "text":"Header Line Text<br>Line 2<br>Line 3",
      "margin":10
   }

On output at DOM, each line (Header Line Text, Line 2, Line 3) will be wrapped in a <tspan> tag.

Also, the specified styles in the parameters are applied to the parent <text> tag.

user_135734440
Related