prakash.das
Posts: 7
Joined: Wed Nov 30, 2022 7:15 am

i want scroll on x axis just like y axis not the internal scroll

this.chart = Highcharts.ganttChart('container', {
chart: {
backgroundColor: '#2c2c2c',
scrollablePlotArea: {
minHeight: this.resourceArray.length * 133,
opacity: 1
}
},
scrollbar: {
enabled: true
},
plotOptions: {
gantt: {
pointWidth: 20
// pointPadding: 0,
},
series: {
turboThreshold: 0,
animation: false, // Do not animate dependency connectors
dragDrop: {
draggableX: true,
draggableY: true,
dragMinY: -0.4,
dragMaxY: this.resourceArray.length,
dragPrecisionX: 0.01, // Snap to eight hours,
liveRedraw: false
},
dataLabels: {
enabled: true,
useHTML: true,
formatter: this.getCustomDataLabels,
align: 'center',
style: {
cursor: 'default',
pointerEvents: 'none'
}
},
allowPointSelect: true,
point: {
events: {
drop: this.handleDropEvent,
click: this.handleClickEvent,
drag: this.handleDragEvent
}
}
}
},
yAxis: {
categories: this.resourceName,
min: 0,
max: this.resourceArray.length - 1,
// scrollbar: {
// enabled: true,
// showFull: false
// }
labels: {
style: {
color: 'rgb(224,224,227)'
}
},
className: 'yAxiss',
staticScale: 130
},
xAxis: [
{
min: this.getGanttMinTime,
max: this.getGanttMaxTime,
currentDateIndicator: true,
dateTimeLabelFormats: {
day: '%e.%b.%Y',
hour: '%e.%b.%Y'
},
// scrollbar: {
// enabled: true
// },
labels: {
style: {
color: 'rgb(224,224,227)'
}
},
className: 'xAxiss',
// tickPixelInterval: 40,
grid: {
cellHeight: 60
}
},
{
min: this.getGanttMinTime,
max: this.getGanttMaxTime,
dateTimeLabelFormats: {
week: 'W %W',
day: 'W %W'
},
// scrollbar: {
// enabled: true
// },
labels: {
style: {
color: 'rgb(224,224,227)'
}
},
className: 'xAxiss'
}
],
navigator: {
enabled: false,
liveRedraw: true,
series: {
type: 'gantt',
pointPlacement: 0.5,
pointPadding: 0.25
} as any
} as any,
tooltip: {
headerFormat: '',
pointFormatter: this.customPointFormatter
},

series: this.series as any
})
Attachments
Screenshot 2022-12-02 133038.png
Screenshot 2022-12-02 133038.png (139.09 KiB) Viewed 723 times
wrfwegwer.png
wrfwegwer.png (27.45 KiB) Viewed 723 times
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: i want scroll on x axis just like y axis not the internal scroll

Hi,

Thanks for contacting us!

I think that the best and simplest solution to your problem will be to enable the navigator with a scrollbar.
Demo: https://jsfiddle.net/gh/get/library/pur ... navigation
API: https://api.highcharts.com/gantt/navigator.enabled

​If you have further inquiries, you may reach out to me at any time.
Regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Gantt”