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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js
"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function () {
_.each(this.series[0].points, (point, key) => {
if (!_.isUndefined(this.series[0].points[key + 1])) {
this.renderer.text("X",
point.clientX + point.pointWidth, //x
point.plotY) // y
.add();
}
})
},
}
},
title: {
text: '',
},
plotOptions: {
series: {
dataLabels: {
enabled: false,
format: '<b>{point.name}</b> ({point.y:,.0f})',
},
}
},
legend: {
enabled: false
},
xAxis: {
categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5']
},
series: [{
type: 'column',
name: 'Marks',
data: [83, 72, 71, 63, 74]
}]
});
})