JSFiddle - React, Tailwind, and code Playground

by dylanmac

HTML

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

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

CSS

.col-chart-label {
    border: 1px solid black;
}

JavaScript

var labels = [
	'AAA/Aaa',
	'AA+/Aa1',
	'AA/Aa2',
	'AA-/Aa3',
	'A+/A1',
	'A/A2',
	'A-/A3'
];
var theData = [
	{
		name: 'Company 1',
		data: [0.576,7.617,12.101,18.839,18.022,7.644,9.72]
	},
	{
		name: 'Company 2',
		data: [4.123,12.862,14.561,13.754,12.226,11.135,7.51]
	}
];


$(function () {
    $('#container').highcharts({
		chart: {
			type: 'bar'
		},
		legend: {
			align: 'center',
			layout: 'horizontal',
			verticalAlign: 'bottom'
		},
		plotOptions: {
			series: {
				dataLabels: {
					enabled: true,
					formatter: function() {
						var out = '<span class="col-chart-label">';
						out += 	this.y + ' / ' + this.y;
						out += '</span>'
						return out;
					},
					useHTML: true
				}
			}
		},
		series:  theData,
        tooltip: {
            enabled: false
        },
		xAxis: {
			categories: labels,
			labels: {
				formatter: false,
				overflow: 'justify',
				rotation: false
			},
			reversed: true
		}
    });
});