scrollablePlotArea does not work as expected

Question

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. I dont want to see these when i am scrolling. Am i missing something or this is expected behavior?

Answer 1

Instead of using chart.scrollablePlotArea you should use yAxis.scrollbar:

yAxis: {
  max: 5,
  scrollbar: {
    enabled: true,
    showFull: false
  }
}

Demo: https://jsfiddle.net/BlackLabel/f4ym1d2c/
API: https://api.highcharts.com/highstock/yAxis.scrollbar