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="min-width: 310px; height: 400px; margin: 0 auto"></div>
<h2>
Expected result
</h2>
<img src="https://i.imgsafe.org/3e35d849b2.png" style="width: 610px; height: 300px; margin: 0 auto" />

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'columnrange',
      inverted: true
    },
    title: {
      text: 'Test'
    },
    subtitle: {
      text: 'Sample'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar'],
      visible: false
    },
    yAxis: {
      visible: false
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Series4',
      type: 'line',
      marker: {
        enabled: false
      },
      index: 1,
      data: [
        [0, 1.5],
        [1, 1.5],
        [2, 1.5]
      ],
    }, {
      name: 'Series1',
      data: [
        [0, 3],
        [0, 3],
        [0, 3]
      ],
      pointPlacement: -0.20,
      pointWidth: 50
    }, {
      name: 'Series2',
      data: [
        [3, 6],
        [3, 6],
        [3, 6]
      ],
      pointPlacement: 0,
      pointWidth: 1
    }, {
      name: 'Series3',
      data: [
        [6, 9],
        [6, 9],
        [6, 9]
      ],
      pointPlacement: 0.20,
      pointWidth: 50
    }]
  });
});