Gantt Chart with Progress Indicator

author(s): Lars Cabrera

by YameenYasin

HTML

<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

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

CSS

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

JavaScript

Highcharts.ganttChart('container', {
    series: [{
        data: [{
            name: 'one',
            id:1,
            start: Date.UTC(2014, 10, 18),
            end: Date.UTC(2014, 10, 25)
        }, {
            name: 'two',
            parent: 1,
            start: Date.UTC(2014, 10, 27),
            end: Date.UTC(2014, 10, 29)
        }, {
            name: 'three',
            start: Date.UTC(2014, 10, 20),
            end: Date.UTC(2014, 10, 25)
        }, {
            name: 'four',
            start: Date.UTC(2014, 10, 23),
            end: Date.UTC(2014, 10, 26)
        }]
    }],
    yAxis: {
        labels: {
            useHTML: true,
            formatter: function() {
                var seriesPoints = this.chart.series[0].points,
                    points,
                    result = '<a class="left"><strong>',
                    pos = this.pos;

                if (seriesPoints) {
                    points = seriesPoints.filter(function(p) {
                        return p.y === pos;
                    });

                    points.forEach(function(p) {
                        result += p.name + '<br/>'
                    });

                    result += '</strong><i>Job Type</i></a>'

                    return result
                }
            }
        }
    }
});