With navigation

author(s): Torstein Hønsi

by Black Label

HTML

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

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

CSS

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

JavaScript

Highcharts.ganttChart('container', {

  chart: {
    events: {
      load: function() {
				const chart = this,
							series = chart.series,
							min = series[series.length -1].processedXData[0],
							max = min + 60 * 60 * 24 * 175 * 1000; //half year
				
				chart.xAxis[0].setExtremes(min, max)
      }
    }
  },
  title: {
    text: 'Gantt Chart with Navigation'
  },

  yAxis: {
    uniqueNames: true
  },

  navigator: {
    enabled: true,
    liveRedraw: true,
    series: {
      type: 'gantt',
      pointPlacement: 0.5,
      pointPadding: 0.25
    },
    yAxis: {
      min: 0,
      max: 3,
      reversed: true,
      categories: []
    }
  },
  scrollbar: {
    enabled: true
  },
  rangeSelector: {
    enabled: true,
    selected: 2
  },

  series: [{
    name: 'Project 1',
    data: [{
      start: Date.UTC(2017, 11, 1),
      end: Date.UTC(2018, 1, 2),
      completed: 0.95,
      name: 'Prototyping'
    }, {
      start: Date.UTC(2018, 1, 2),
      end: Date.UTC(2018, 11, 5),
      completed: 0.5,
      name: 'Development'
    }, {
      start: Date.UTC(2018, 11, 8),
      end: Date.UTC(2018, 11, 9),
      completed: 0.15,
      name: 'Testing'
    }, {
      start: Date.UTC(2018, 11, 9),
      end: Date.UTC(2018, 11, 19),
      completed: {
        amount: 0.3,
        fill: '#fa0'
      },
      name: 'Development'
    }, {
      start: Date.UTC(2018, 11, 10),
      end: Date.UTC(2018, 11, 23),
      name: 'Testing'
    }, {
      start: Date.UTC(2018, 11, 25, 8),
      end: Date.UTC(2018, 11, 25, 16),
      name: 'Release'
    }]
  }]
});