Highcharts Gantt Demo

Highcharts Gantt multiple tasks on same y-value without GridAxis

by Lars Cabrera

HTML

<script src="http://github.highcharts.com/gantt/highcharts-gantt.src.js"></script>

<div id="container"></div>

JavaScript

var today = new Date(),
    day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART
Highcharts.ganttChart('container', {
    title: {
        text: 'Gantt Chart Test'
    },
    xAxis: {
        currentDateIndicator: true,
        min: today - 7 * day,
        max: today + 18 * day
    },
    
    yAxis: {
    	type: 'category',
        categories: ['Task A', 'Task B'],
        reversed: true
    },

    series: [{
        name: 'Offices',
        data: [{
            taskName: 'Task A',
            id: 'a1',
            start: today - 6 * day,
            end: today - 3 * day,
            completed: 1
        }, {
			taskName: 'Task A',
            id: 'a2',
            start: today - 1 * day,
            end: today + 2 * day,
            completed: {
                amount: 0.6
            }
        }, {
            taskName: 'Task B',
            id: 'b1',
            dependency: 'a1',
            start: today + 1 * day,
            end: today + 4 * day
        }, {
            taskName: 'Task B',
            id: 'b2',
            start: today + 4 * day,
            milestone: true,
            color: 'rgb(48,105,160)'
        }]
    }]
});