Highcharts Gantt Demo

Highcharts Gantt example chart

HTML

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

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

CSS

.highcharts-tooltip>span {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid silver;
  border-radius: 3px;
  box-shadow: 1px 1px 2px #888;
  padding: 8px;
}

JavaScript

var today = new Date(),
  day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

// THE CHART
Highcharts.ganttChart('container', {
  title: {
    text: 'Gantt Chart Test'
  },
  xAxis: [{
    currentDateIndicator: true,
    min: today - 30 * day,
    max: today + 30 * day,
    labels: {
      format: '{value:%B}'
    },
    tickInterval: day * 30 // Month
  }],

  tooltip: {
    backgroundColor: null,
    borderWidth: 0,
    shadow: false,
    useHTML: true,
    style: {
      padding: 0
    }
  },

  series: [{
    name: 'Offices',
    data: [{
      taskName: 'New offices',
      id: 'new_offices',
      start: today - 2 * day,
      end: today + 14 * day,
      dataLabels: {
        useHTML: true,
        format: 'My custom label with link: <a href="http://www.google.com">Google</a>'
      }
    }, {
      taskName: 'Prepare office building',
      id: 'prepare_building',
      parent: 'new_offices',
      start: today - (2 * day),
      end: today + (6 * day),
      completed: {
        amount: 0.2
      }
    }, {
      taskName: 'Inspect building',
      id: 'inspect_building',
      dependency: 'prepare_building',
      parent: 'new_offices',
      start: today + 6 * day,
      end: today + 8 * day
    }, {
      taskName: 'Passed inspection',
      id: 'passed_inspection',
      dependency: 'inspect_building',
      parent: 'new_offices',
      start: today + 9.5 * day,
      milestone: true
    }, {
      taskName: 'Relocate',
      id: 'relocate',
      dependency: 'passed_inspection',
      parent: 'new_offices',
      start: today + 10 * day,
      end: today + 14 * day
    }, {
      taskName: 'Relocate staff',
      id: 'relocate_staff',
      parent: 'relocate',
      start: today + 10 * day,
      end: today + 11 * day
    }, {
      taskName: 'Relocate test facility',
      dependency: 'relocate_staff',
      parent:...