JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.js"></script>
<div id="chart"></div>
<div id="chart2"></div>
<input id="btnExport" type="button" value="Export" />
JavaScript
$(function() {
$('#chart').highcharts({
chart: {
type: 'bar',
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: ["Jan", "Feb", "March"],
labels: {
style: {
color: '#000'
},
min: 0,
step: 1
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Temperature',
color: '#c0504d',
data: [10,20,25]
}]
});
$('#btnExport').click(function(){
graphExport();
});
});
function graphExport() {
var doc = new jsPDF();
if ($('#chart').length > 0) {
var chartSVG = $('#chart').highcharts().getSVG(),
chartImg = new Image();
chartImg.onload = function () {
var chartCanvas = document.createElement("canvas");
chartCanvas.width = 600;
chartCanvas.height = 400;
chartCanvas.getContext("2d").drawImage(chartImg, 0, 0, 600, 400);
var chartImgData = chartCanvas.toDataURL("image/jpeg");
doc.addImage(chartImgData, 'JPEG', 0, 0, 200, 100);
if ($('#chart2').highcharts().length > 0) {
var chart2SVG = $('#chart2').highcharts().getSVG(),
...