Highcharts reflow is not updating Highcharts container width

Question

So, as you can see I'm trying to reflow Highcharts in order to keep the right width according to it's parent container, in order to do that I'm listening to the sidebar state and calling reflow whenever the state is changed.

useEffect(() => {
   Highcharts.charts[0].reflow();
}, [collapseSideBar]);

This is my Highcharts component:

<div className="text-black-50 col-span-2 row-span-2 bg-white rounded-lg shadow-xl h-100 w-100">
    <HighchartsReact highcharts={Highcharts} options={a11Options} />
</div>

Answer 1

You might try postpone the execution of the reflow method after the sidebar animation ends. Or, if more convenient, try set a timeout as follows:

useEffect(() => {
   setTimeout(function() {
      Highcharts.charts[0].reflow();
   }, 300);
}, [collapseSideBar]);

Remember to change the 300 value to the animation time delta.

This happens due to width from elements in DOM updates after the animation runs, for performance reasons. During the animation, there is probably some transform CSS rules in the making.