Exported image with multiple chart is trimmed

[morganfree]

Actual behaviour

When exporting multiple charts and on the container div is set width < 600, the charts on the image get trimmed.

Live demo with steps to reproduce

1. Enterhttp://jsfiddle.net/n0b5xdjy/
2. Click 'export to PNG'

The problem is with the getSVG() method. E.g. for the container with 400px width, getSVG() returns

<svg height="400" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family:&quot;lucida grande&quot;, &quot;lucida sans unicode&quot;, arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" viewBox="0 0 600 200" height="200">

<svg> inherits width 400, but the following <g> gets width 600

The problem appears in the demo from the official website http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/exporting/multiple-charts/

[TorsteinHonsi]

@oysteinmoseng Also check the same in http://utils.highcharts.local/samples/#view/highcharts/exporting/multiple-charts-offline

[oysteinmoseng]

The issue was with computing the width/height of the compiled SVG. It was using the width/height of the charts rather than the exported SVG of the charts. Chose to fix with a regex to make it independent of future coding changes, but it would also be possible to e.g. hook Chart.getChartHTML and read the dimensions of the exported chart from there.

@morganfree Working example in jsFiddle: http://jsfiddle.net/bn2p0Lh9/ All changes are in Highcharts.getSVG only.