JSFiddle - React, Tailwind, and code Playground

by shorif2000

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="projects" style="height:700px"></div>

JavaScript

$(function () {
    $('#projects').highcharts({
        'chart': {
            'type': 'columnrange',
        },
            'exporting': {
            'enabled': true
        },

            'title': {
            text: 'Projects in progress, '
        },
        xAxis: {
            categories: ["Software Testing", "MC-MADAGASCAR", "MC - E Mediterranean Sea", "MC-OffShore SPAIN", "MC - Nordland 2D OffSh", "MultiClient Offsh Iceland", "MC Norway-Barents Sea", "Heritage Tanzania 2D L", "", "SPEC Luderitz Namibia", "MC Namibia 2D Marine", "MC - UK - 2D MARINE", "MC - Namibia", "TURKEY (2) 3D", "MC MADAGASCAR", "MC Namibia 2D Marine", "PERENCO TURKEY", "MC Italia 2D Marine", "MC Repro France", "Ltd 2D Marine", null, "Heritage Tanzania", "MultiClient South Africa", "Nordland Reporcessing-NPD", "Gambia River Flood Plain", "Test Reprocessing", "UK - MC - Test Line", "Offshore Guinea Bissau", "OffShore Madagascar MC", "Lime Petroleum Guinea Bissau", "Fastnet OffshWest Shetland"],
            min: 5
        },
            'yAxis': {
            'title': 'Date',
                'type': 'datetime',
                'dateTimeLabelFormats': {
                'month': '%b %Y'
            },
                'min': Date.UTC(2010, 00, 01)
        },

            'tooltip': {
            formatter: function () {
                return  this.series.name + ':</b> ' + Highcharts.dateFormat('%e %b, %Y', this.point.low) + ' - ' + Highcharts.dateFormat('%e %b, %Y', this.point.high) + '<br/>';
            }
        },
            'legend': {
            'enabled': true
        },
        credits: {
            enabled: false
        },
        scrollbar: {
            enabled: true
        },
            'series': [{
            'name': 'Forecast',
                'data': [[1262563200000, 86400000], [1263254400000, 1276383600000], [1268956800000, 1274310000000], [1312930800000, 86400000], [1318201200000, 1323561600000], [1321488000000, 86400000], [1321574400000, 1305759600000],...