JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height:300px"></div>
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
JavaScript
Highcharts.setOptions({
colors: [ '#FF9655','#64E572','#DDDF00','#50B432','#058DC7', '#24CBE5', '#FFF263', '#6AF9C4', '#ED561B']
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
series: {
colorByPoint: true
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4]
}, {
name: 'Jane',
data: [2, 2, 3]
}, {
name: 'Joe',
data: [3, 4, 4]
}]
});