0

I show a highstock chart in a container. My application is wrapped with a dashboard-layout where I can toggle the sidebar on and off.

By default the sidebar is open. When I open or close the sidebar I call a window.resize event and trigger a resize of the chart. This works perfectly when I close the sidebar, but when I open again the chartWidth is larger than the containerWidth.

I also checked with a simple MUI Box component, that the container resized properly on opening and closing of the sidebar. Only the chart doesn't.

Here is my onClick() event for the opening and closing of the sidebar:

onClick={() =>
  {
    toggleIsOpened(!isOpened);
    var isResized = window.dispatchEvent(new Event('resize'));
    console.log("isResized:",isResized);
    for (var i = 0; i < Highcharts.charts.length; i++) {
      if (Highcharts.charts[i] !== undefined) {
        Highcharts.charts[i].reflow();
      }
    }
  }
}

I already tried to update the chartWidth manually but this doesn't work either.

Highcharts.charts[i].setSize(
  Highcharts.charts[i].containerWidth,
  false
);

Any ideas?

Thanks!

Update:

I found a workaround according to this solution

Problem is Component didn't get mount when you dispatch that Window Resize Event.

: React trigger resize but don't actually resize the screen

setTimeout(
  ()=>{window.dispatchEvent(new Event('resize'));},
   50
);

But I don't like this approach as there is a artificial delay in the response. Any other ideas?

smaica
  • 723
  • 2
  • 11
  • 26
  • Hi @smaica, Could you reproduce the problem in some online code editor? You can start from: https://codesandbox.io/s/highcharts-react-demo-forked-yi81d?file=/demo.jsx – ppotaczek Oct 24 '22 at 11:47

1 Answers1

0

You can use chart.reflow() in useEffect to reflow the chart to fit the width of the container div.

<HighchartsReact ref={chartRef} />

 const chart = chartRef.current?.chart;
 chart.reflow();
sajjad mousavi
  • 89
  • 5
  • Thanks, sajjad. As you can see in my code example I already used the `reflow` method after I called the resize event. Didn't work. – smaica Oct 25 '22 at 13:59