score:1

Accepted answer

You need to call chart.reflow method in onResizeStop event callback function.

return (
  <Rnd
    ...
    onResizeStop={(e, direction, ref, delta, position) => {
      const chart = this.chartComponent.current?.chart;
      if (chart) {
        chart.reflow();
      }
      ...
    }}
  >
    ...
  </Rnd>
);

From Highcharts API:

reflow( [e])

Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.

Live demo: https://codesandbox.io/s/cranky-hoover-cz-czw5k?file=/src/index.js

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow


Related Articles