JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

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

<div style="display: table; table-layout: fixed; width: 100%;">
  <div style="display: table-row">
    <div style="display: table-cell">
      <div id="container1" style="height: 400px"></div>
    </div>
    <div style="display: table-cell">
      <div id="container2" style="height: 400px"></div>
    </div>
  </div>
  <div style="display: table-row">
    <div style="display: table-cell">
      <div id="container3" style="height: 400px"></div>
    </div>
    <div style="display: table-cell">
      <div id="container4" style="height: 400px"></div>    
    </div>
  </div>  
</div>

<button id="export">Export all</button>

JavaScript

/**
 * Create a global getSVG method that takes an array of charts as an argument. The SVG is returned as an argument in the callback.
 */
Highcharts.getSVG = function(charts, options, callback) {
    var svgArr = [],
    		top = 0,
        width = 0,
        i,
        svgResult = function (svgres) {
            var svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</g>');
            top += charts[i].chartHeight;
            width = Math.max(width, charts[i].chartWidth);
            svgArr.push(svg);
            if (svgArr.length === charts.length) {
              console.log("Total", width)
              callback('<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
            }
        };
		for (i = 0; i < charts.length; ++i) {
				charts[i].getSVGForLocalExport(options, {}, function () { 
        	console.log("Failed to get SVG");
       	}, svgResult);
		}
};

/**
 * Create a global exportCharts method that takes an array of charts as an argument,
 * and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {
		// Merge the options
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);    
		
    var imageType = options && options.type || 'image/png';
  
		// Get SVG asynchronously and then download the resulting SVG
    Highcharts.getSVG(charts, options, function (svg) {
      Highcharts.downloadSVGLocal(svg,
        (options.filename || 'chart')  + '.' + (imageType === 'image/svg+xml' ? 'svg' : imageType.split('/')[1]),
        imageType,
        options.scale || 2,
        function () {
          console.log("Failed to export on client side");
        });
    });
};

    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1'
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20...