Progress indicator

author(s): Lars Cabrera

by Black Label

HTML

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

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

CSS

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

JavaScript

(function(H) {
  var colors = ['red', 'blue'];

  H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item) {
    item.color = colors[item.index];
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    item.color = null;
  });
}(Highcharts));

Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart with Progress Indicators'
  },
  xAxis: {
    min: Date.UTC(2014, 10, 17),
    max: Date.UTC(2014, 10, 30)
  },
  legend: {
    enabled: true
  },
  series: [{
      name: 'Project 1',
      data: [{
        name: 'Start prototype',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 25),
        completed: 0.25
      }, {
        name: 'Test prototype',
        start: Date.UTC(2014, 10, 27),
        end: Date.UTC(2014, 10, 29)
      }, {
        name: 'Develop',
        start: Date.UTC(2014, 10, 20),
        end: Date.UTC(2014, 10, 25),
        completed: {
          amount: 0.12,
          fill: '#fa0'
        }
      }, {
        name: 'Run acceptance tests',
        start: Date.UTC(2014, 10, 23),
        end: Date.UTC(2014, 10, 26)
      }]
    },
    {
      name: 'Project 2',
      data: [{
        name: 'Start prototype2',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 25),
        completed: 0.25
      }, {
        name: 'Test prototype2',
        start: Date.UTC(2014, 10, 27),
        end: Date.UTC(2014, 10, 29)
      }]
    }
  ]
});