JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-wid
JavaScript
Highcharts.chart('container', {
colors: ['#B1B0CE', 'rgb(0,128,128)', '#13065B'],
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: [{
offset: -280,
tickWidth: 0,
lineWidth: 0,
categories: ['Value1', 'Value2', 'Value3'],
labels: {
x: 5,
useHTML: true,
style:{
backgroundColor: 'red',
color: 'white'
},
formatter: function () {
const axis = this.axis;
const points = axis.series.map(series => series.options.data[axis.categories.indexOf(this.value)]);
return points[2] - (points[0] + points[1]);
}
}
}, {
linkedTo: 0,
categories: ['Value1', 'Value2', 'Value3']
}],
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Values'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
labels: {
items: [{
useHTML: true,
backgroundColor:'red',
style: {
left: '60px',
top: '20px',
width: '250px',
fontSize: '10px',
backgroundColor: 'red'
}
}]
},
series: [{
name: '1',
data: [43, 33, 24],
stack: 'female'
}, {
name: '2',
data: [-15, 29, 30],
stack: 'female'
}, {
name: '3',
data: [-100, 120, 89],
stack: 'male'
}]
});