JSFiddle - React, Tailwind, and code Playground

by Max Shu

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
$('#container').highcharts({
	chart: {
		type: 'bar',
		spacingRight: 100,
	},
	xAxis: {
		categories: [2014,2013,2012,2011,2010,2009,2008,2007,2006,2005,2004,2003,2002,2001,2000,1999,1998,1997,1996],
		labels: {
			formatter: function() {
				return this.value;
			},
		},
        tickLength: 0,
	},
	plotOptions: {
		series: {
            dataLabels: {
                enabled: true,
                formatter: function() {
                    return (this.y == 0) ? '<span style="color: ' + this.series.color + '">Не присуждался</span>' : '<span style="color: '+ this.series.color +'">'+ this.y + '</span>';
                },
                style: {
                    fontWeight: 'normal',
                    opacity: 1, /* solution */
                }
            },
            pointPadding: 0,
		},
        bar: {
            groupPadding: 0,
        }
	},
	series: [{
		name: 'Получили статус «ординарный профессор»',
		data: [12, 21, 0, 22, 9, 14, 4, 9, 8, 4, 1, 2, 0, 3, 0, 0, 1, 1, 3]

	}],
	tooltip: {
		headerFormat: '',
		pointFormat: '<span style="color:{series.color}">{series.name}: {point.y}</span><br/>{point.name}'
	},
})
});