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>

JavaScript

// THE CHART
let chart = Highcharts.ganttChart('container', {
  chart: {
    height: 1 //Without first/default value function doesn't work
  },
  series: [{
    data: [{
      id: '1',
      name: 'Start prototype',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 25),
    }, {
      name: 'Test prototype',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29),
      parent: ['1']
    }, {
      name: 'Develop',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25),
      parent: ['1']

    }, {
      name: 'Run acceptance tests',
      start: Date.UTC(2014, 10, 23),
      end: Date.UTC(2014, 10, 26),
      parent: ['1']

    }, {
      name: 'Start prototype',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 25),
      parent: ['1']
    }, {
      name: 'Test prototype',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29),
      parent: ['1']
    }, {
      name: 'Develop',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25),
      parent: ['1']
    },{
      id: '2',
      name: 'Start prototype2',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 25),
    }, {
      name: 'Test prototype',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29),
      parent: ['2']
    }, {
      name: 'Develop',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25),
      parent: ['2']

    }, {
      name: 'Run acceptance tests',
      start: Date.UTC(2014, 10, 23),
      end: Date.UTC(2014, 10, 26),
      parent: ['2']

    }, {
      name: 'Start prototype',
      start: Date.UTC(2014, 10, 18),
      end: Date.UTC(2014, 10, 25),
      parent: ['2']
    }, {
      name: 'Test prototype',
      start: Date.UTC(2014, 10, 27),
      end: Date.UTC(2014, 10, 29),
      parent: ['2']
    }, {
      name: 'Develop',
      start: Date.UTC(2014, 10, 20),
      end: Date.UTC(2014, 10, 25),
      parent: ['2']
    }]
  }]
},...