Subtasks

author(s): Lars Cabrera

by maritavindedal

HTML

<script src="http://localhost:3031/gantt/highcharts-gantt.js"></script>

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

CSS

#container {
    max-width: 800px;
    margin: 1em auto;
}

JavaScript

console.clear();
var today = new Date(2023, 11, 18),
    day = 1000 * 60 * 60 * 24;

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

Highcharts.seriesTypes.xrange.prototype.alignDataLabel = function (point, dataLabel) {
	dataLabel.css({ width: `${point.shapeArgs.width}px` });

	return Highcharts.seriesTypes.column.prototype.alignDataLabel.apply(this, arguments);
}

// THE CHART
const chart = Highcharts.ganttChart('container', {
    chart: {
        type: 'gantt',
        width: 350
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                style: {
                	textOverflow: 'ellipsis'
                }
            },
        }
    },
    title: {
        text: 'Highcharts Gantt'
    },
    xAxis: {
        min: today.getTime() - (2 * day),
        max: today.getTime() + (32 * day)
    },
    series: [{

        name: 'Project 1',
        data: [{
            name: 'Requirements',
            id: 'requirements',
            parent: 'planning',
            start: today.getTime(),
            end: today.getTime() + (5 * day)
        }, {
            name: 'Develop',
            id: 'develop',
            start: today.getTime() + (5 * day),
            end: today.getTime() + (30 * day)
        }, {
            name: 'Create unit tests',
            id: 'unit_tests',
            dependency: 'requirements',
            parent: 'develop',
            start: today.getTime() + (5 * day),
            end: today.getTime() + (8 * day)
        }, {
            name: 'Implement',
            id: 'implement',
            dependency: 'unit_tests',
            parent: 'develop',
            start: today.getTime() + (8 * day),
            end: today.getTime() + (30 * day)
        }]
    }]
});

setTimeout(() => {

    console.log('--- @setTimeout ---')
    chart.setSize(600);
}, 1234);