JSFiddle - React, Tailwind, and code Playground
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: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
//categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
,
stackLabels: {
y: -10,
enabled: true,
style: {
fontWeight: 'bold',
color: 'black'
},
verticalAlign: 'top',
align: 'left',
formatter: function() {
switch(this.x){
case 0:
return "Totale prima serie: " + this.total;
case 1:
return "Totale seconda serie: " + this.total;
}
}
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
},
bar: {
pointWidth: 30,
//groupPadding:2,
//pointPadding:1,
}
},
series: []
});
var chartw = $('#container').highcharts();
chartw.addSeries({
name: "Lavoro",
data: [17530],
color: "#F2F3F4"
})
chartw.addSeries({
//name: "Riposo",
data: [17417],
color: "red"
})
chartw.addSeries({
//name: "Lavoro",
data: [15425],
color: "#F2F3F4"
})
chartw.addSeries({
// name: "Riposo",
data: [12245],
color: "red"
})
for (i=0; i < chartw.series.length; i++) {
chartw.series[i].addPoint([11215])
}
...