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>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

CSS

.highcharts-tooltip h3 {
  margin: 0.3em 0;
}

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'scatter',
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        formatter: function() {
          return null
        }
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          inside: false,
          y: -10,
          format: '{point.name}'
        }
      }
    },

    series: [{
      data: [{
        x: 1,
        y: 1,
        name: 'BE'
      }, {
        x: 2,
        y: 1,
        marker: {
          radius: 10
        },
        name: 'DE'
      }, {
        x: 3,
        y: 1,
        marker: {
          radius: 8
        },
        name: 'FI'
      }, {
        x: 4,
        y: 1,
        name: 'NL'
      }, {
        x: 5,
        y: 1,
        name: 'SE',
        marker: {
          radius: 10
        },
      }, {
        x: 6,
        y: 1,
        name: 'ES'
      }, {
        x: 7,
        y: 1,
        name: 'FR',
        marker: {
          radius: 10
        },
      }, {
        x: 8,
        y: 1,
        name: 'NO'
      }, {
        x: 9,
        y: 1,
        name: 'UK'
      }]
    }]

  });
});