mprose7
Posts: 4
Joined: Wed Sep 15, 2021 3:50 pm

Horizontal scroll bar (mobile)

Highcharts gantt horizontal scrolling on pc display is ok, but we miss grips for scrolling left/right.

Scroll bar is not usseful on mobile touch screen display - desperate need grips for horizontal scrolling like images left/right.
Image
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Horizontal scroll bar (mobile)

Hello mprose7,

Thanks for contacting us with your question.

First of all I recommend checking these docs about native scrollbars for mobile, you can find there an example of a chart with horizontal scroll.

If you're still not convinced, and you prefer buttons to navigate instead of scroll, then you can find here related topic with described solution and demo: viewtopic.php?t=37574
Feel free to check the code and adjust it to your needs. Basically all you have to do is use SVGrenderer to draw arrow icons and add appropriate on click events.
Demo: https://jsfiddle.net/BlackLabel/ah9btm76/
API reference:https://api.highcharts.com/class-refere ... VGRenderer,
https://api.highcharts.com/class-refere ... Element#on

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
mprose7
Posts: 4
Joined: Wed Sep 15, 2021 3:50 pm

Re: Horizontal scroll bar (mobile)

Thanks for answer, i didn saw that option. Might be solution.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Horizontal scroll bar (mobile)

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
shpatil
Posts: 2
Joined: Tue Sep 21, 2021 5:39 pm

Re: Horizontal scroll bar (mobile)

@HI Team,

when scrollableplotarea enable then opacity not working in fullscreeen mode for x axis

for reference
https://jsfiddle.net/j583rp4v/1/
Attachments
HCHART.png
HCHART.png (84.72 KiB) Viewed 4210 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Horizontal scroll bar (mobile)

Hello shpatil,

Welcome to our forum and thanks for contacting us with your question!

It's not that the opacity is not working in full screen, looking at your shared image, it seems like all your bars are displayed above the axis, and simply there is nothing more to be displayed below it. Please check this demo, for me it looks like opacity works fine:
https://jsfiddle.net/BlackLabel/5hvapd13/

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
shpatil
Posts: 2
Joined: Tue Sep 21, 2021 5:39 pm

Re: scrollablePlotArea opacity not work if ther is no scrollbar

Hi team,

Thanks for response,

in my case i don't want to increase the height because height calculated based in categories length. so i don't want to add more height

1) default view with height opacity work fine ( minHeight: 800,)
beforefullscreen.png
beforefullscreen.png (36.43 KiB) Viewed 4122 times

2) once you increase height and do fullscreen view scrollbar appears and and it work fine. as you suggested like below ( minHeight: 1000,)
afterfullscreen_butdata have scroll.png
afterfullscreen_butdata have scroll.png (69.23 KiB) Viewed 4122 times
3) and if sate default height ( minHeight: 800,) and do fullscreen that bars are displayed above the axis, come again
afterfullscreen.png
afterfullscreen.png (72.71 KiB) Viewed 4122 times


so all your bars are displayed above the axis, how to make it below without increasing that height like 800 to 1000 or heigher

scrollablePlotArea: {
minHeight: 5000,
opacity: 1
},
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Horizontal scroll bar (mobile)

Hello shpatil,

Sorry to say, but something like that is not possible. The minHeight or minWidth options is actually what makes chart scrollable in fullscreen. Otherwise, the chart always shrink or expand to fit the container dimensions. Settings like pointWidht, groupPadding, pointPadding wont help in this case. More informations about it you can find in the API:
Since v7.1.2, a scrollable plot area can be defined for either horizontal or vertical scrolling, depending on whether the minWidth or minHeight option is set.
API reference: https://api.highcharts.com/highcharts/c ... lePlotArea

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Gantt”