JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://code.highcharts.com/master/highcharts.src.js"></script>
<div id="container" style="height: 300px"></div>
JavaScript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
marginLeft: 50
},
xAxis: {
labels: {
enabled: false
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function(){
if (this.y > 80)
return this.y;
}
},
stacking: true
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},
{
data: [106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 33, 12],
color: '#ffffff',
dataLabels: {
enabled: false
}},
{
data: [71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 10]}]
}, function(chart) {
function posDataLab(chart) {
$.each(chart.series[0].data, function(i, point) {
point.dataLabel.attr('x', chart.plotWidth - 50);
});
$.each(chart.series[2].data, function(i, point) {
point.dataLabel.attr('x', -40);
});
}
posDataLab(chart);
});