JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

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: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

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

        title: {
            text: ''
        },

        subtitle: {
            text: ''
        },

        xAxis: {
            
        },

        yAxis: {
        },

        tooltip: {
            valueSuffix: '°C'
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y + '°C';
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'S-Score',
            data: [
[3.3444,0.9277],
[1.3738,-0.5063],
[1.3448,-0.4508],
[2.8561,1.6048],
[-0.8863,-2.1135],
[1.4888,0.4713],
[0.9854,0.0884],
[-0.1081,-1.0019],
[0.717,-0.0956],
[-1.1538,-1.9445],
[1.4448,0.691],
[2.258,1.5538],
[0.9406,0.2365],
[-3.3568,-3.9331],
[1.5934,1.0309],
[-0.6695,-1.231],
[-0.1067,-0.6675],
[-0.3641,-0.8773],
[2.8071,2.3296],
[0.7991,0.3383],
         ]
        }]

    });

});