JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function() {

  $('#container').highcharts({

    chart: {
      type: 'columnrange',
      inverted: false
    },

    plotOptions: {
      columnrange: {
        grouping: false,
        pointPadding: -0.20
      }
    },


    legend: {
      enabled: true
    },

    series: [{
      name: 'Minimo',
      color: 'green',
      data: [
        [10, 2000, 2999],
        [20, 5000, 6000],
        [30, 3000, 4000],
        [40, 8000, 9000],
        [50, 3500, 4000]
      ],
      dataLabels: {
        enabled: false,
        borderRadius: 2,
        inside: true,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        format: '{point.y}',
        //color: 'rgba(0,0,0)'
      }
    }, {
      name: 'Medio',
      color: 'yellow',
      data: [
        [10, 3000, 3999],
        [20, 6001, 7000],
        [30, 4001, 5000],
        [40, 9001, 9500],
        [50, 4001, 4500]
      ],
      dataLabels: {
        enabled: false,
        borderRadius: 2,
        inside: true,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        format: '{point.y}',
        //color: 'rgba(0,0,0)'
      }
    }, {
      name: 'Maximo',
      color: 'blue',
      data: [
        [10, 4000, 5000],
        [20, 7001, 8000],
        [30, 5001, 6000],
        [40, 9501, 10000],
        [50, 4501, 5000]
      ],
      dataLabels: {
        enabled: false,
        borderRadius: 2,
        inside: true,
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        format: '{point.y}',
        //color: 'rgba(0,0,0)'
      }
    }]

  });

});