CODEWITHSUNDEEP
highcharts
slohr
slohr

Reputation: 623

Is there a way to get superscripts to show up in highchart exports

I'm using the sup tag in various places on a Highcharts chart, however I noticed that the superscripts do not display at all when performing an export to any of the supported formats.

Here's a fiddle that shows the problem: http://jsfiddle.net/u7gqgybj/1/

It displays as expected when viewing the page, but when you export to say "PNG" the superscript goes away.

The word "true" in the title should be superscript.

In addition to I've tried a CSS approach and that also doesn't display correctly upon export

<span style="vertical-align:super;font-size:0.83em;">foo</span>

Any insight would be appreciated.

Upvotes: 2

Views: 755

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

The export module doesn't handle HTML very well. One possible solution is to use the exporting-with-html.src.js with allowHTML: true. It isn't available under code.highcharts.com, but is on their GitHub. From my understanding it uses foreignObject to do HTML in SVG.

You would replace your exporting.js with this:

<script src="https://rawgithub.com/highslide-software/7767462/raw/d7217cbf3e68d595f52f3af65b9e13fd967fde86/exporting-with-html.src.js"></script>

And add this to your chart:

exporting: {
    allowHTML: true
}

See this JSFiddle demonstration, which uses your original code.

You may also want to read this link with a brief discussion about its usage and pros/cons. Excerpt:

Actually, there is a feature called foreignObject in SVG, which allows using HTML inside SVGs...

For export to SVG it would sometimes be required not to use foreignObject, as there is limited support in clients.

Upvotes: 3

Related Questions