markhutch
Posts: 24
Joined: Fri Dec 22, 2017 2:46 am

file output does not match JSFiddle

I have an area chart that uses javascript function defs to achieve particular effects.

In JSFiddle the chart is correctly formatted.

However, when I click the export/download button and save to either PNG,JPG, PDF or SVG, none of them are correct.

https://jsfiddle.net/markh/x2vdpt78

Any ideas as to why the screen rendering should be perfect in JSFiddle but not rendered in the output files?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: file output does not match JSFiddle

Hi, markhutch!

It's enough to set exporting height and width to same as our chart's container:

Code: Select all

exporting: {
    sourceHeight: 510,
    sourceWidth: 760
  },
jsFiddle: https://jsfiddle.net/BlackLabel/fnLs8dej/

DOCS: https://www.highcharts.com/docs/export- ... e-overview

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
markhutch
Posts: 24
Joined: Fri Dec 22, 2017 2:46 am

Re: file output does not match JSFiddle

I wish it was only the size that was wrong. As far as I know that's OK.

Its the content of the graphics. Below is a screenshot of the JSFiddle rendered image and an example of the output using the 'download *' button from JSFiddle image (top right 'export' button)
Screen Shot 2018-10-24 at 08.18.14.jpg
Screen Shot 2018-10-24 at 08.18.14.jpg (59.54 KiB) Viewed 1201 times
The second image is an example output.
chart.jpeg
chart.jpeg (50.34 KiB) Viewed 1201 times
There are several differences:
1. The x-axis numbers are rotated in the export, not in the screenshot
2. "Equity Funds" is pushed to the left of the area in the export
3. Font sizes, generally, are larger in the export
4. There is no sign of the "MM RetireSmart...", "Years to Retirement" or "Years Past Retirement" text, or the right-arrow at the end of the horizontal line.
5. The white vertical line (at "0"-xaxis) is not present in the export
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: file output does not match JSFiddle

Have you tested jsFiddle from my last message? With options I gave you, everything exports just fine.
Rafal Sebestjanski,
Highcharts Team Lead
markhutch
Posts: 24
Joined: Fri Dec 22, 2017 2:46 am

Re: file output does not match JSFiddle

Hi RafalS. I did try it and it DID improve things. (see attached).

The only remaining issue is that the white vertical line (aligned with 0 on the xAxis) is missing.

All the other text now appears correctly.

If I (you) can get that bit working then everything would be perfect!

Screenshot of JSFiddle showing vertical white line
Screen Shot 2018-10-24 at 08.18.14.jpg
Screen Shot 2018-10-24 at 08.18.14.jpg (59.54 KiB) Viewed 1188 times
Latest output using your 'exporting' updates to JSON:
chart.jpeg
chart.jpeg (72.6 KiB) Viewed 1188 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: file output does not match JSFiddle

Set xAxis.plotLines.zIndex to a higher value and everything should be good ;)

https://jsfiddle.net/BlackLabel/e9Lqfro0/
Rafal Sebestjanski,
Highcharts Team Lead
markhutch
Posts: 24
Joined: Fri Dec 22, 2017 2:46 am

Re: file output does not match JSFiddle

Totally awesome. You rock!!! Have a great weekend. Thank you very much R :D

Return to “Highcharts Usage”