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
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/