With navigation

author(s): Torstein Hønsi

by YameenYasin

HTML

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

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

CSS

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

JavaScript

Highcharts.ganttChart('container', {
  yAxis: {
    uniqueNames: true
  },

  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: true
  },

  rangeSelector: {
    enabled: true,
    labelStyle: {
      display: "none",
    },
    buttonTheme: {
      width: null,
    },
    buttons: [{
      text: 'Custom',
      events: {
        click: () => {
          this.Highcharts.charts[0].xAxis[0].setExtremes(Date.UTC(2018, 1, 2), Date.UTC(2018, 3, 5))
          return false
        }
      }
    }],
    inputEnabled: false,
  },
  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'
    }]
  }]
});