scrollablePlotArea does not work as expected

[manshi44]

Hi Community!

I am creating react-typescript app and I am using Gantt chart.
I tried to use scrollablePlotArea to achieve this result here https://jsfiddle.net/BlackLabel/s013uqa5/
But in my case this scrollbar does not behave similar to the above example.
Here is my code https://codepen.io/manshi44/pen/zYMZYXO?editors=0010



Please see the highlighted part of the image https://ibb.co/sj0tnW7. I dont want to see these when i am scrolling.
Am i missing something or this is expected behavior?

[jedrzej.r]

Hi!

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

In Gantt charts, when the content is longer than the actual viewport, there are two reccomended ways in which you can achieve scrolling without compromising visible data:

• Default scrollbar: https://jsfiddle.net/BlackLabel/j6m0d7zq/
• Scrollable plotArea: https://jsfiddle.net/BlackLabel/69hkzc13/

When using scrollablePlotArea, you can set opacity to 1 in order to hide unseen content. As for the x-axis on top of the chart, it is intentional so that when there is a lot of data, users don't loose track of x-axis headers at the moment.

API:
https://api.highcharts.com/gantt/chart. ... ea.opacity

Let me know if you have any more questions.
Best regards!