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() {
  function getPoint(x) {
    console.log("x" + x)
    if (x % 2 == 0) {
      return 100;
    } else {
      retrun - 100;
    }

  }

  var drawLabels = function(chart) {
    $('.cLabels').remove();
    var series = chart.series,
      renderer = chart.renderer,
      plotTop = chart.plotTop,
      plotLeft = chart.plotLeft;
    Highcharts.each(series, function(s) {
      Highcharts.each(s.data, function(p) {
        renderer.path(['M', p.plotX + plotLeft, p.plotY + plotTop, 'L', p.plotX + plotLeft, p.plotY + plotTop - 30]).attr({
          stroke: 'black',
          'stroke-width': 1
        }).addClass('cLabels').add();
        renderer.label(p.name, p.plotX + plotLeft, p.plotY + plotTop - 50).attr({
          'text-anchor': 'middle',
          padding: 0
        }).addClass('cLabels').add();
      });
    });
  }

  $('#container').highcharts({
    chart: {
      type: 'scatter',
      events: {
        load: function() {
          drawLabels(this);
        },
        redraw: function() {
          drawLabels(this);
        }
      }
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        formatter: function() {
          return null
        }
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: false,
        }
      },
      scatter: {
        marker: {
          radius: 5,
          states: {
            hover: {
              enabled: false,
              lineColor: "#ffb74d"
            }
          }
        },
        states: {
          hover: {
            marker: {
              enabled: false
            }
          }
        },
        tooltip: {
          headerFormat: '<b>{series.name}</b><br>',
          pointFormat: '{point.x} cm, {point.y} kg'
        }
      }
    },

    series: [{
      data: [{
        x: 1,
        y: 1,
        dataLabels: {
          y: -80

        },
        marker: {
          radius: 3
       ...