Highcharts: Creating gantt chart having stacked rows

Question

I am creating a gantt chart using Highcharts for a process that has three phase Request, Submission and Approval. It has two stacks for Planned and Actual. I used the highcharts stacked bars to represent the data plotted like this jsFiddle of Gantt
Instead of data as

           series: [{
            name: 'Requested',
            data: [1,3,4,5,6],
            stack: 'Planned'
        }, {
            name: 'Requested',
            data: [2,4,5,7,8],
            stack: 'Actual'
        }, {
            name: 'Submitted',
            data: [2,3,2,3,4],
            stack: 'Planned'
        }, {
            name: 'Submitted',
            data: [3,5,2,3,4],
            stack: 'Actual'
        }, {
            name: 'Approved',
            data: [6,3,2,3,4],
            stack: 'Planned'
        }, {
            name: 'Approved',
            data: [2,4,2,3,4],
            stack: 'Actual'
        }]

I want the data as dates here I have the first,second and third dates respectively for Requested,Submission and Approval.

 series: [{
            name: 'Part1',
            data: [Date.UTC(2013,01,12),Date.UTC(2013,01,23),Date.UTC(2013,02,05)],
            stack: 'Planned'
        }, {
            name: 'Part1',
            data: [Date.UTC(2013,01,15),Date.UTC(2013,01,29),Date.UTC(2013,02,05)],
            stack: 'Actual'
        },]

I need the series name on y-axis to be taken from the data in series

 xAxis: {
               categories: ['Part1', 'Part2', 'Part3', 'Part4', 'Part5']             
            },

and 1. the start should be from the data[0] instead hence it will contain two bars and three points. 2. I need difference of dates in the bar so hence I can show the time for each activity.

I tried a with time in milliseconds jsfiddle but couldn't come to anything substantial

Answer 1

You can use "low" and "y" properties in the data so an X offset is rendered and therefore you can have the "Gantt effect" you need:

Please check this example:

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container',
    type: 'bar'
},

title: {
    text: 'Gantt module development plan'  
},

subtitle: {
    text: 'Using fake data'
},

xAxis: {
    categories: ['Planning', 'Development', 'Testing', 'Documentation']
},

yAxis: {
    type: 'datetime',
    min: Date.UTC(2012, 0, 1)
},

        tooltip: {
            formatter: function() {
                 console.log(this.point);
                var point = this.point;
                return '<b>'+ point.category +'</b><br/>'+
                    Highcharts.dateFormat('%b %e, %Y', point.low) + ' - ' +
                    Highcharts.dateFormat('%b %e, %Y', point.y);
            } 
        },

series: [{
    data: [{
        low: Date.UTC(2011, 11, 20),
        y: Date.UTC(2012, 0, 15)
    }, {
        low: Date.UTC(2012, 0, 10),
        y: Date.UTC(2012, 4, 28)
    }, {
        low: Date.UTC(2012, 3, 15),
        y: Date.UTC(2012, 4, 28)
    }, {
        low: Date.UTC(2012, 4, 15),
        y: Date.UTC(2012, 4, 28)
    }]
}]

});

Cheers

Fran