Highcharts Demo

author(s): Øystein Moseng

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

<div style="width: 600px; margin: 0 auto">
  <div id="container"></div>

  <button class="export" data-scale="1">Scale = 1</button>
  <button class="export" data-scale="2">Scale = 2</button>
</div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

const chart = Highcharts.chart('container', {
  exporting: {
    fallbackToExportServer: false,
    scale: 3
  },

  title: {
    text: 'Offline export'
  },

  subtitle: {
    text: 'Click the button to download as PNG, JPEG, SVG or PDF'
  },

  chart: {
    type: 'area'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 126.0, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});


document.querySelectorAll('button.export').forEach(button =>
  button.addEventListener('click', e =>
    chart.exportChart({
      type: 'application/pdf',
      scale: e.target.dataset.scale,
      fallbackToExportServer: true,
    })
  )
);