How can I fix yAxis scrollbar issues in Highchart Ganttchart?

Question

Using Highchart Gantt chart, I have created timeline application. Here is the link to it Highchart Gantt Chart

I have requirement of showing unlimited rows and for that I have enabled scrollbar for yAxis. Scrollbar works fine when I add/remove rows using the Add/remove button provided. Chart dynamically adds and removes vertical scrollbar as expected.

But here is the problem, When I add few rows and and scroll down and then if I remove some rows, chart UI looks weird and it does not render chart as it does when I dont touch the scrollbar. Without scrolling down everything works as expected but when I drag scrollbar down and try to remove rows then chart does not render properly.

Please see below images

How I can I fix this issue?

Thanks in advance

Answer 1

This looks like a bug that would be best to report on the official library repository: https://github.com/highcharts/highcharts/issues/new/choose

As a workaround, you can use the axis.setExtremes() method in removeHandler() function:

const chart = this.chartRef.current.chart,
  max = newData2.length - 1,
  min = max - 3;

chart.yAxis[0].setExtremes(min, max);

Demo: https://stackblitz.com/edit/gantt-chart-set-extremes
API: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes