javascriptchartshighchartsreact-highchartshighcharts-gantt

How do I define initial start and end date for Highcharts Gantt?


I need to set my Gantt chart to load on a specific range (eg. from today until 1 month in the future).

I can set the default zoom but couldn't find a way to set both start and end dates on load.

My code:

Highcharts.ganttChart('container', {
  rangeSelector: {
    enabled: true,
    selected: 0
  },
  yAxis: {
    uniqueNames: true,
    categories: ['A', 'B', 'C'],
  },
  series: [{
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 0,
      x: Date.UTC(2022, 10, 18),
    }, {
      y: 0,
      x: Date.UTC(2022, 10, 25),
    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 1,
      x: Date.UTC(2022, 10, 26),
    }, {
      y: 1,
      x: Date.UTC(2022, 10, 30),

    }]
  }, {
    type: 'line',
    zoneAxis: 'x',
    data: [{
      y: 2,
      x: Date.UTC(2021, 10, 26),
    }, {
      y: 2,
      x: Date.UTC(2023, 10, 30),

    }]
  }]
});

A fiddle


Solution

  • To set specific initial range on xAxis you can use xAxis.events.setExtremes.

      chart: {
        events: {
          load() {
            let chart = this;
    
            chart.xAxis[0].setExtremes(Date.UTC(2021, 10, 8), Date.UTC(2022, 11, 10))
          }
        }
      },
    

    API: https://api.highcharts.com/gantt/xAxis.events.setExtremes

    Live demo: https://jsfiddle.net/BlackLabel/sf3w15d6/