Edit in JSFiddle

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },
        title: {
            text: 'Gnome Business Model'
        },
        xAxis: {
            categories: ['Steps']
        },
        yAxis: {
            type: 'datetime',
            title: {
                text: 'Date'
            }
        },
        plotOptions: {
            columnrange: {
                grouping: false
            }
        },
        legend: {
            enabled: true
        },
        series: [{
            name: 'Step 1: Collect Underpants',
            data: [{

                low: Date.UTC(2014, 01, 01, 0, 0, 0),
                high: Date.UTC(2014, 01, 15, 0, 0, 0)
            }]
        }, {
            name: 'Step2: ?',
            data: [{
                low: Date.UTC(2014, 01, 15, 0, 0, 0),
                high: Date.UTC(2014, 01, 27, 0, 0, 0)
            }]
        }, {
            name: 'Step 3: Profit',
            data: [{
                low: Date.UTC(2014, 01, 27, 0, 0, 0),
                high: Date.UTC(2014, 01, 31, 0, 0, 0)
            }]
        }]

    });

});