highcharts
Scroll Wobble in Highcharts/Stock
Description
in my app, we require rendering custom React components within Highcharts. To achieve this, we use react-portal to insert our custom components into Highcharts' parent component. However, we have encountered an issues with scroll
I'm trying to add a scroll using Highcharts/Stock. However, when I use the scroll feature, the scroll starts to wobble up and down. Expected Behavior
The scroll should work smoothly without causing any wobble. Actual Behavior
The scroll wobbles up and down when using the scroll. Video for Better Understanding
Video Link Reproduction in CodeSandbox
Hello Satyam7Jha,
Thanks for contacting us again!
It seems you're importing the Stock module without changing the constructorType parameter, and the Stock chart isn't fully implemented. I've updated your example by defining the proper constructor and disabling the unwanted functionalities from this module to keep the default column chart - the wobble effect seems to be fixed.
Alternatively, I'd like to encourage you to use the scrollablePlotArea property instead (as described here) to avoid importing the entire Stock module. I performed some tests using this property along with your configuration and the wobble effect didn't occur either.
Kind Regards!
Thanks for your help, @KamilKubik. Considering our requirement to render a large number of custom components, the stock scroll is a more efficient solution for our use case.