JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall',
plotBackgroundColor: '#FCFFC5'
},
legend: {
enabled: false
},
plotOptions: {
waterfall: {
dataLabels: {
enabled: true,
inside: false
},
borderWidth: 0 //Removing this will solve it
}
},
yAxis: [{
max: 9, //Removing this will solve it
minPadding: 0, //Removing this will solve it (?!)
endOnTick: false
}],
series: [{
data: [{
y: 5.8
}, {
y: -5.3
}, {
y: 4
}, {
y: -2.7
}, {
y: -6.9
}],
showInLegend: false
}]
});
});