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]
}]
});
$('#chart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name:...