JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 360px; height: 400px; margin: 0 auto"></div>

JavaScript

let customLabel,
    labelInit = false;

Highcharts.chart('container', {
	chart: {
		type: 'bar',
		events: {
			render: function () {

				const chart = this,
              point = chart.series[0].data[1];

				// prevent multiple label creation if used in render event
				if (labelInit) customLabel.destroy();

				customLabel = chart.renderer.text('+25 %', point.shapeArgs.height, point.tooltipPos[1] + chart.series[0].itemWidth + 10)
					.add()
					.attr({
						zIndex: 3
					});
				labelInit = true;

			}
		}
	},
	title:{
		text: "GOLY"
	},
	plotOptions: {
		bar: {
			grouping: false
		}
	},
	xAxis: {
		type: "category",
		categories: ["2020", "2021"]
	},
	series: [{
        data: [200, 400],
		colorByPoint: true

    }]
});