JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

.col-chart-label {
    background-color: #ffffff;
    border: 1px solid black;
    padding: 2px;
}

JavaScript

var i=0;
$(function () {
    $('#container').highcharts({
		chart: {
			type: 'bar'
		},
		legend: {
			align: 'center',
			layout: 'horizontal',
			verticalAlign: 'bottom'
		},
		plotOptions: {
			series: {
				dataLabels: {
					enabled: true,
					formatter: function() {
            var out = 	this.y + ', ' + (i);
            i=i+1;
						return out;
					},
					useHTML: true
				}
			}
		},
		series:  [
	{
		name: 'Company 1',
		data: [0.576,7.617,12.101,18.839,18.022,7.644,9.72]
	},
	
],
        tooltip: {
            enabled: false
        },
		xAxis: {
			categories:  [
	'AAA/Aaa',
	'AA+/Aa1',
	'AA/Aa2',
	'AA-/Aa3',
	'A+/A1',
	'A/A2',
	'A-/A3'
],
			labels: {
				formatter: false,
				overflow: 'justify',
				rotation: false
			},
			reversed: true
		}
    });
});