With navigation

author(s): Torstein Hønsi

by YameenYasin

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', {

  title: {
    text: 'Gantt Chart with Navigation'
  },

  /*   xAxis: [{
      labels: {
        format: '{value}',
        formatter() {
          const unitName = this.tickPositionInfo.unitName;
          const format = unitName === 'week' ? '%b' : this.dateTimeLabelFormat;
    
          return Highcharts.dateFormat(format, this.value)
        }
      },
    }, {
      labels: {
        formatter() {
          return Highcharts.dateFormat(this.dateTimeLabelFormat + ' custom', this.value)
        }
      },
    }], */

  xAxis: [{
    dateTimeLabelFormats: {
      hour: {
        list: ['%H:%M', '%H']
      },
      day: {
        list: ['%A, %e. %B', '%a, %e. %b', '%E']
      },
      week: {
        list: ['Week %W', 'W%W']
      },
      month: {
        list: ['Custom %W', 'CU%W']
      }
    }
  }, {
    dateTimeLabelFormats: {
      hour: {
        list: ['%Y']
      },
      day: {
        list: ['%Y']
      },
      week: {
        list: ['%Y']
      },
      month: {
        list: ['%Y']
      }
    }
  }],

  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: 0
  },

  series: [{
    name: 'Project 1',
    data: [{
      start: Date.UTC(2017, 11, 1),
      end: Date.UTC(2100, 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,
    ...