JSFiddle - React, Tailwind, and code Playground

by erick

HTML

<script src="https://gabelerner.github.io/canvg/canvg.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="http://code.highcharts.com/modules/variable-pie.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container1" style="height: 200px; width: 50%; float: left;"></div>

<button id="export">Export all</button>
<img id="chart" style="width: 600px;" />

JavaScript

/**
 * Create a global getSVG method that takes an array of charts as an argument
 */
Highcharts.getSVG = function(charts) {
  var svgArr = [],
    left = 0,
    height = 0;

  $.each(charts, function(i, chart) {
    var svg = chart.getSVG();
    svg = svg.replace('<svg', '<g transform="translate(' + left + ',0)" ');
    svg = svg.replace('</svg>', '</g>');

    left += 600;
    height = Math.max(height, chart.chartHeight);

    svgArr.push(svg);
  });

  return '<svg height="' + height + '" width="' + left + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

/**
 * 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) {
  // URL to Highcharts export server
  var exportUrl = 'http://export.highcharts.com/';

  // Ajax request
  $.ajax({
    type: 'post',
    url: exportUrl,
    data: {
      svg: Highcharts.getSVG(charts),
      type: 'image/png',
      async: true
    },
    success: function(data) {
      // Update "src" attribute with received image URL
      $('#chart').attr('src', exportUrl + data);
    }
  });

};

var chart1 = new Highcharts.Chart({

  chart: {
    renderTo: 'container1',
    type: 'variablepie'
  },

  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, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

});

$('#export').click(function() {
  Highcharts.exportCharts([chart1]);
});