JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 310px; height: 100px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
lineWidth: 2, // STEP TWO
tickWidth: 0, // STEP ONE
labels: {
enabled: true
}
},
yAxis: {
labels: {
enabled: false
},
gridLineWidth: 0,
title: null, // STEP THREE
"startOnTick": true
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ':</b> ' + this.y + '<br/>' + this.percentage.toFixed(2) + '%';
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Fail',
color: 'red',
data: [5]
}, {
name: 'Success',
color: 'green',
data: [2]
}]
});
});