prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Scroll bar in full screen

Hi,

Please help me with how to enable the vertical scroll bar in full-screen mode. I tried using scrollableplotarea with a minimum height but that is shrinking the chart height in normal mode. I already have a scroll bar for normal mode. So how to add a scroll bar only for the full screen without affecting the layout of normal mode.

Regards,
Prithika
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Scroll bar in full screen

Hello prithikakotte,

Thanks for contacting us with your issue.

Have you tried setting fixed height for the chart? Using scrollablePlotArea might indeed in some cases cause the chart to shrink, but setting fixed height or widht, seems to do the trick for me.
Demo: https://jsfiddle.net/BlackLabel/qryb8tkh/
API reference: https://api.highcharts.com/highcharts/chart.height

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Scroll bar in full screen

Hi,

Chart height helped to expand the area of the chart.

But as you see in your demo example, if the min-height is more then we see empty rows and if the min-height is less then the rows with data are cut off. Is there an alternative way of enabling the scroll bar?

I was referring to this example, where just enabling scrollbar to yAxis, shows vertical scrollbar.

https://jsfiddle.net/BlackLabel/L78mkans/

But when I tried doing the same I don't see any scrollbar. Also, I do not see API has yAxis.scrollbar property to set. Please help me understand if I am missing something.

Regards,
Prithika
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Scroll bar in full screen

Hello prithikakotte,

Could you check this demo and tell me if it meet your requirements? It seems to be working fine both in window and full screen. I've changed slighly the approach adding scrollbar and using min and max values for yAxis.
Demo: https://jsfiddle.net/BlackLabel/n9hzLgs5/
API reference: https://api.highcharts.com/gantt/scrollbar

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Gantt”