Search code examples
highchartsreact-highchartshighcharts-gantt

scrollablePlotArea does not work as expected

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

enter image description here 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?

Solution

  • 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