eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Freeze or fixed x axis in gantt highchart on scroll in angular

Hi

How can i fix axis header while scrolling across y axis in gantt highchart in angular?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Freeze or fixed x axis in gantt highchart on scroll in angular

Hello,

Is that what you were looking for?
https://jsfiddle.net/BlackLabel/kszmnux0/

Feel free to implement that in your final code,
Best regards!
Kamil Musiałowski
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Freeze or fixed x axis in gantt highchart on scroll in angular

Hi kamil
not exactly it suits my requirement it is giving fixed header but

scrollablePlotArea: {
minHeight: 600
},
marginRight: 30

here we are setting minHeight: 600 or any number but it would not be generic one. As i am getting data from API i cannot be sure how many data items are there in series.data so i give say minHeight: 1000 and there are 10 records then its fine but if more or less than 10 like 5 then there will be huge gap.

I am trying minHeight: 120 * x but again it not meeting exact requirements

Thanks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Freeze or fixed x axis in gantt highchart on scroll in angular

Yes, you are right - this setting gives you a fixed minHeight. Just like a CSS property with the same name.

I would suggest updating the scrollablePlotArea.minWidth with your custom logic (which is completely fine!) in chart.events.render. Just figure out the value that you want to achieve, grab the necessary data i.e amount of data points, and you are good to go!

Best regards!
Kamil Musiałowski
Highcharts Developer
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Freeze or fixed x axis in gantt highchart on scroll in angular

You're welcome!

Good luck with your project!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Gantt”