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;
 }
 
 }
 
 function customFormatter(x,key){
 console.log("key"+key)
 if(x%2 == 0){
 return function(){return "<div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/><span style='color:black'>"+key+"</span>";}
 }else{
	return function(){return "<span style='color:black'>"+key+"</span><div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/>" };
 }
 
 }
 
  $('#container').highcharts({
    chart: {
      type: 'scatter',
    },
    xAxis: {
      visible: false
    },
    yAxis: {
      title: {
        text: ''
      },
      labels: {
        formatter: function() {
          return null
        }
      }
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          inside: false,
            formatter: function(){
            console.log("X"+this.x)
            console.log("this.x%2"+this.x%2)
          if(this.x%2 == 0){
          console.log("in if")
          return "<div style='position: relative;height:70px; border-left:solid thin #ff0000;margin-left:10px'><span style='position: absolute;bottom: 0;right: 0;'>hello</span></div>";
          }else{
          console.log("in else")
          return "<span style='color:black'>"+this.key+"</span><div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/>";
          }
          },
          useHTML:true
          
        }
      },scatter: {
                marker: {
                    radius: 5,
                    states: {
                        hover: {
                            enabled: false,
                            lineColor: "#ffb74d"
                        }
                    }
                },
                states: {
                    hover: {
                        marker: {
                            enabled: false
                        }
                    }
                },
     ...