CODEWITHSUNDEEP
javascriptreactjshighcharts
Pedro Luiz Santos
Pedro Luiz Santos

Reputation: 75

Highcharts reflow is not updating Highcharts container width

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>

Upvotes: 3

Views: 2282

Answers (1)

theWhK
theWhK

Reputation: 56

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.

Upvotes: 4

Related Questions