JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function() {

  // Define a custom symbol path
  Highcharts.SVGRenderer.prototype.symbols.xsign = function(x, y, w, h) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
  }

  var markerUp = {
      symbol: 'xsign'
    },
    markerDown = {
      symbol: 'circle',
      fillColor: 'transparent'
    };

  Highcharts.chart('container', {
    xAxis: {
      tickInterval: 1,
      gridLineWidth: 1,
      type: 'category'
    },
    series: [{
      type: 'scatter',
      marker: {
        lineColor: null,
        lineWidth: 2
      },
      data: [{
        x: 0,
        y: 2,
        marker: markerUp
      }, {
        x: 0,
        y: 3,
        marker: markerUp
      }, {
        x: 1,
        y: 2,
        marker: markerDown
      }, {
        x: 1,
        y: 1,
        marker: markerDown
      }, {
        x: 2,
        y: 2,
        marker: markerUp
      }, {
        x: 2,
        y: 3,
        marker: markerUp
      }, {
        x: 2,
        y: 4,
        marker: markerUp
      }, {
        x: 2,
        y: 5,
        marker: markerUp
      }, {
        x: 3,
        y: 4,
        marker: markerDown
      }, {
        x: 3,
        y: 3,
        marker: markerDown
      }]
    }]
  });
});