CODEWITHSUNDEEP
htmlcssarrayshighcharts
Deepak Pookkote
Deepak Pookkote

Reputation: 967

Multi-line title is not working when we export to PNG using CanVG - Highcharts

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"

My example code is in this JSFiddle: http://jsfiddle.net/deepakpookkote/7jgc1nyq/5/

How can I solve this issue?

Upvotes: 4

Views: 243

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15223

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.

Upvotes: 2

Related Questions