CODEWITHSUNDEEP
javascriptjqueryhtmlchartshighcharts
venba
venba

Reputation: 37

Multiple chart export in HighChart is not same as the one displayed on the screen

I have multiple charts (Trellis model) using HighCharts which share the same Y axis (i.e category axis).. but when I try to export the chart, the X axis(Series) is not coming exactly as I see on the screen. Please take a look at this JSFiddle sample and let me know. Your help is appreciated. I would like the exported output to match what is on the screen. But this is not coming in export. Even the title in the exported file is not matching the ones on the screen. If I save the individual chart as an SVG file, I see all the values in X axis, i.e 0M, 1M, 2M..etc, but when I look in the UI for all the 3 charts combined, it is smartly displaying the values a 2.5M, 5M, 7.5M etc. What should I do to make this happen?i.e to export to match the UI.

JSFiddle File for the issue

--

Upvotes: 0

Views: 691

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

It's caused by not setting strict width for the chart, so default values 600x400 are used, as described in docs.

Solution: Simply set that widths for each chart when using getSVG() method:

    var container = $(chart.container);
    var svg = chart.getSVG({
        chart: {
            width: container.width()
        }
    });

Demo: http://jsfiddle.net/tg8f9fgo/5/ or http://jsfiddle.net/tg8f9fgo/4/

Upvotes: 1

Related Questions