Progress indicator

author(s): Lars Cabrera

by YameenYasin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>

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

JavaScript

Highcharts.ganttChart('container', {
  title: {
    text: 'Example of custom legend'
  },
	yAxis: {
		categories: ["Person1", "Person 2", "Person3", "Person 4"]
	},
  xAxis: [{
    tickInterval: 24 * 3600 * 1000,
    min: moment().startOf('week').valueOf(),
    max: moment().endOf('week').valueOf(),
  }, ],
  legend: {
    enabled: true
  },
  series: [{
    name: 'Active',
    data: [{
      name: 'Person 1',
      start: moment().startOf('week').valueOf(),
      end: moment().startOf('week').add(1, 'days').valueOf(),
      color: 'green',
			y: 0
    }, {
      name: 'Person 3',
      start: moment().startOf('week').add(1, 'days').valueOf(),
      end: moment().endOf('year').valueOf(),
      color: 'green',
			y: 2
    }]
  }, {
    name: 'Inactive',
    data: [{
      name: 'Person 2',
      start: moment().startOf('week').add(2, 'days').valueOf(),
      end: moment().endOf('month').subtract(2, 'days').valueOf(),
      color: 'red',
			y: 1
    }, {
      name: 'Person 4',
      start: moment().startOf('week').add(2, 'days').valueOf(),
      end: moment().startOf('week').add(3, 'days').valueOf(),
      color: 'red',
			y: 3
    }]
  }],
});