Gantt Chart with Progress Indicator

author(s): Lars Cabrera

by esantiagovieira

HTML

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

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

JavaScript

// THE CHART
let chart = Highcharts.ganttChart('container', {
  yAxis: {
    staticScale: 40
  },
  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']
    }]
  }]
})