JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {

	var options = {
	    chart: {
	        type: 'scatter',
			height: 700
	    },
        plotOptions: {
            series: {
                dataLabels: {
                    allowOverlap: false
                }
            }
        },
	    series: [
			{
			        data: [
{ marker: { enabled: true }, x: 1, y: 18
, dataLabels: { enabled: true, formatter: function () { return '1.0.0.1197'; 			 } } 
}, 
{ marker: { enabled: true }, x: 1, y: 16
, dataLabels: { enabled: true, formatter: function () { return '1.0.0.1212'; 			 } } 
}, 
{ marker: { enabled: true }, x: 1, y: 15
, dataLabels: { enabled: true, formatter: function () { return '1.0.0.1213'; 			 } } 
}, 
{ marker: { enabled: true }, x: 1, y: 0
, dataLabels: { enabled: true, formatter: function () { return '1.0.0.1197'; 			 } } 
}
			]
	    }
		]
	};
	
	$('#container').highcharts(options);
});