JSFiddle - React, Tailwind, and code Playground

by sbochan

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
        },
        xAxis:{
            lineWidth:0,
            tickLength: 0,
            gridLineWidth:0,
            labels:{
                enabled:false
            },
            title:null
        },
        yAxis:{
            gridLineWidth:0,
            labels:{
                enabled:false
            },
            title:null
        },
        plotOptions:{
            series:{
                grouping:false
            }
        },

        series: [{
            data: [
                [-10, 5],
                [-8, 4],
                [-6, 3]
            ]
        },{
            data: [
                [5, 10],
                [4, 8],
                [3, 6]
            ]
        }]

    });

});