JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<a id="dd" href="#">My Download</a>
<div id="container" style="min-width: 400px; height: 400px; margin: 20px auto"></div>
JavaScript
function getGraphSVG(options) {
var svg;
if (window.charts) {
window.charts.each(function(pair) {
if (pair.value) {
svg = pair.value.getSVG(options);
throw $break;
}
});
}
return svg;
}
function download() {
if (window.getGraphSVG) {
console.log(window.getGraphSVG({
chart: {
width: 990
}
}));
}
}
document.observe('dom:loaded', function() {
window.charts.set('1182_0_0', new Highcharts.Chart({
exporting: {
enabled: true
},
"chart": {
"zoomType": "x",
"marginRight": 200,
"height": 500,
"defaultSeriesType": "areaspline",
"marginLeft": 100,
"marginTop": 25,
"renderTo": "container"
},
"legend": {
"enabled": true,
"align": "right",
"layout": "vertical",
"verticalAlign": "top",
"x": -10,
"y": 30
},
"plotOptions": {
"area": {
"borderWidth": 0
},
"areaspline": {
"stacking": "normal",
"borderWidth": 0
},
"line": {
"borderWidth": 0
},
"pie": {
"borderWidth": 0
},
"series": {
"borderWidth": 0
},
"spline": {
"borderWidth": 0
},
"column": {
"borderWidth": 0
},
"bar": {
"borderWidth": 0
}
},
"series": [{
"data": [{
"y": 8.0},
{
"y": 13.0},
{
"y": 6.0},
{
"y": 3.0},
{
"y": 0.0},
{
"y": 3.0},
...