JSFiddle - React, Tailwind, and code Playground
by Rajan Paneru
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$(container).highcharts({
chart: {
type: 'column',
marginTop: 70,
marginRight: 100,
marginLeft: 70
//width: 1000
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
//categories: displayData,
labels: {
rotation: -90
}
},
yAxis: {
min: 0,
ceiling: 100,
title: {
text: ''
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
states: {
hover: {
//brightness: -0.5,
color: 'rgba(68, 188, 93, 1)',
}
}
}
},
series: [{
//name: '% of ' + thirdSeriesName,
data: [1, 2, 3], //thirdSeriesData,
color: 'rgba(68, 188, 93, 1)',
borderRadiusTopLeft: 3,
borderRadiusTopRight: 3,
states: {
hover: {
color: 'rgba(68, 188, 93, .1)'
}
}
}, {
//name: '% of ' + secondSeriesName,
data: [2, 2, 2], //secondSeriesData,
color: 'rgba(253, 170, 60, 1)',
borderRadiusTopLeft: 3,
borderRadiusTopRight: 3,
states: {
hover: {
color: 'rgba(253, 170, 60, .1)'
}
}
}],
navigation: {
buttonOptions: {
height: 40,
width: 48,
symbolSize:...