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>
<script src="https://rawgithub.com/highslide-software/crossing-specific-value/master/crossing-specific-value.js"></script>

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

JavaScript

$(function () {

    Highcharts.chart('container', {
        title: {
          text: 'Butterfly Chart Example'
        },
        
        subtitle: {
            text: '<a href="http://stackoverflow.com">stackoverflow.com</a>'
        },

        chart: {
            type: 'columnrange',
            inverted: true,
            marginTop: 100
        },
        
        legend: {
          verticalAlign: 'top',
          y: 60,
          x: -25,
          itemDistance: 50
        },

        xAxis: {
            categories: ['G7', 'A8', 'V9', 'V4', 'V3', 'V1', 'V5'],
            crossing: 118,
            lineWidth: 0,
            tickLength: 0,
        },
        
        yAxis: {
          gridLineWidth: 0,
          tickInterval: 50,
          min: 0,
          max: 250,
          lineWidth: 1,
          title: {
            text: null
          }
        },
        
        plotOptions: {
          series: {
            grouping: false
          }
        },

        series: [{
            name: 'South',
            color: 'blue',
            data: [
              [55, 100],
              [60, 100],
              [65, 100],
              [55, 100],
              [75, 100],
              [52, 100],
              [60, 100]
            ]
        }, {
          name: 'North',
          color: 'orange',
          data: [
            [120, 170],
            [120, 150],
            [120, 175],
            [120, 130],
            [120, 125],
            [120, 148],
            [120, 145]
          ]
        }]

    });

});