JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
			chart: {
				type: 'bar',
				marginLeft: 100,
				marginRight: 100,
			},
			title: {
				text: 'Title'
			},
			xAxis: {
				categories: ['categoryOne','categoryTwo','categoryThree'],
			},
			yAxis: {
				min: 1,
				max: 5,
				tickInterval: 0.5,
			},
			series: [
				{
					name: 'populationOne',
					data: [3.4, 3.7, 3.9],
					color: '#002E4C',
				},
        {
					name: 'populationOneGlobal',
					data:  [[0, 2.5], [1, 3], [2, 2.9]],
					marker: {
						enabled: true,
						symbol: "triangle",
						fillColor: 'white',
						lineColor: 'black',
						lineWidth: 0.5,
					},
					type: "scatter",
					linkedTo:":previous",
					pointPlacement: 0.18
				},
				{
					name: 'populationTow',
					data: [3.5, 3.9, 4.0],
					color: '#570006',
				},
        {
					name: 'populationTwoGlobal',
					data:  [[0, 2.9], [1, 3.2], [2, 3.9]],
					marker: {
						enabled: true,
						symbol: "triangle",
						fillColor: 'yellow',
						lineColor: 'black',
						lineWidth: 0.5,
					},
					type: "scatter",
					linkedTo:":previous",
					pointPlacement: -0.17
				},
			],
		});