highcharts2image

Render Highcharts/Highstock plots to image on client side without any hassle

Description

highcharts2image is standalone micro library written in pure JS (ES6) using Promises, runs in browser and requires no extra dependencies (actually it loads all necessary depedencies by itself). Just pass chart options to highcharts2image and it will resolve base64 encoded PNG image. This lib can be tweaked for working offline.

How it works

highcharts2image takes options and returns Promise object
highcharts2image creates 1px*1px hidden iframe right before enclosing body tag
adds window.onmessage listener
appends div container to iframe body with provided width and height
injects 3 scripts into created iframe and loads them sequentially (highcharts/highstock lib, exporting and offline-exporting JS libs)
renders chart based on provided options to div container
optionally runs callback with created chart object (very useful option!)
internally converts rendered svg chart to base64 encoded png image (thanks to exporting and offline-exporting JS libs)
sends image back to highcharts2image via window.postMessage()
removes attached window.onmessage listener
removes created iframe
resolves base64 encoded png image as value or rejects with error message

Installation

npm i highcharts2image

Usage

You can use pre-built (ES6 transpiled to ES5 with Babel) minified version from 'dist/highcharts2image.min.js'. Simply attach highcharts2image to the bottom of your page and call it like this:

<script src="../dist/highcharts2image.min.js"></script>
<script>
  // Any valid HighCharts plot options is ok
  // Please note: you don't have to specify
  // chart.renderTo option as it will be
  // processed internally
  const chartOptions = {
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', ... ]
    },
    series: [{
      data: [29.9, 71.5, 106.4, ... ]
    }]
  } 
  
  // highcharts2image options
  const options = {
    chartOptions,
    width: 800,
    height: 600
  }
  
  // call highCharts2Image and wait for result
  highCharts2Image(options)
    .then(result => {
      // 'result' is the base64 encoded png
      const img = document.createElement('img')
      img.src = result
      document.body.appendChild(img)
    })
    .catch(reason => {
      // Oops, we've got an error!
      // 'reason' is the string with useful information about error
      console.error(reason)
    })

  // or even simpler with async/await
  async function appendImg() {
    try {
      const img = document.createElement('img')
      img.src = await highCharts2Image(options)
      document.body.appendChild(img)
    } catch (ex) {
      console.error(ex)
    }
  }

  appendImg()
</script>

API