Highcharts reflow is not updating Highcharts container width

user_10531207 0
Viewed 431

Highcharts container is not updating it's width

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>
reactjs highcharts javascript
1 Answers

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.

user_33444370
Related