JSFiddle - React, Tailwind, and code Playground

by mhctoledo

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

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

<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script> 
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script> 

<div id="container1" style="height: 200px"></div>
<div id="container2" style="height: 200px"></div>

<button id="create-image-from-svg">Create image from svg</button>

JavaScript

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

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

        top += chart.chartHeight;
        width = Math.max(width, chart.chartWidth);

        svgArr.push(svg);
    });

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

var chart1 = new Highcharts.Chart({

    chart: {
        renderTo: 'container1'
    },

    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]}]

});

var chart2 = new Highcharts.Chart({

    chart: {
        renderTo: 'container2',
        type: 'column'
    },

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

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

});

$('#create-image-from-svg').click(function() {
     var charts = new Array()
     $(".highcharts-container").each(function () {
     	charts.push($(this).parent().highcharts())
     });
     window.onbeforeunload = null;
     var svg = Highcharts.getSVG(charts);
    var mycanvas = document.createElement('canvas');
    canvg(mycanvas, svg)
    $("body").append("<image src='" + mycanvas.toDataURL("image/png") + "'/>");
});