Exported image with multiple chart is trimmed #6045

morganfree opened this Issue Nov 28, 2016 · 2 comments


None yet

3 participants


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/

@oysteinmoseng oysteinmoseng self-assigned this Nov 29, 2016
@TorsteinHonsi TorsteinHonsi added the Bug label Dec 1, 2016
@oysteinmoseng oysteinmoseng added this to the 5.0.6 milestone Dec 3, 2016
oysteinmoseng commented Dec 3, 2016 edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment