JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.3/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="roadmap-training"></div>

JavaScript

$(function () {

    $('#roadmap-training').highcharts({
        chart: {
            type: 'columnrange',
            inverted: true,
            zoomType: 'y'
        },
        yAxis: {
            type: 'datetime',
            min: new Date(2014, 0, 1).getTime(),
            max: new Date(2014, 11, 31).getTime(),
        },
        plotOptions: {
            series: {
                //stacking: "normal"
            },
        },
        tooltip: {
            positioner: function () {
                return {
                    x: 10,
                    y: 35
                };
            },
        },
        series: [{
            data: [{
                x: 1,
                high: new Date(2014, 1, 1).getTime() + 864000000,
                low: new Date(2014, 1, 1).getTime(),
            }, {
                x: 1,
                high: new Date(2014, 8, 1).getTime() + 12960000000,
                low: new Date(2014, 8, 1).getTime(),
            }]
        }/*,

        {
            data: [{
                y: new Date(2014, 1, 1).getTime(),
                //color: 'rgba(0,0,0,0)'
            }, {
                y: new Date(2014, 8, 1).getTime(),
                //color: 'rgba(0,0,0,0)'
            }]
        }*/
                ]
    });

});