Interactive gantt

author(s): Øystein Moseng

by esantiagovieira

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/draggable-points.js"></script>

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

JavaScript

Highcharts.ganttChart('container', {
  xAxis: {
    min: 0,
    max: 10
  },
  yAxis: {
    uniqueNames: true,
    max: 3
  },
  series: [{
    data: [{
      name: 'First',
      start: 2,
      end: 4,
      zIndex: 10
    }, {
      name: 'First',
      start: 3,
      end: 3,
      milestone: true,
      color: 'red'
    }, {
      name: 'Second',
      start: 2,
      end: 5,
    }, {
      name: 'Second',
      start: 4,
      end: 4,
      milestone: true,
      color: 'orange'
    }]
  }, {
    data: [{
      name: 'First',
      start: 2,
      end: 4,
      zIndex: 10
    }, {
      name: 'First',
      start: 2.5,
      end: 2.5,
      milestone: true,
      color: 'orange'
    }]
  }]

});