Highcharts automatic resize using drag/resize react-rnd library

Question

I want to create a component where the size of the chart automatically adjusts with resize events of the container holding the graph. It would be great if someone can help me with an example. Here si the link to the library. react-rnd library

E.x somehting like this but using highcharts codebox react-rnd with googlecharts

const Highchart = () => {
 
return (

<rnd>
<div>
<HightchartsReact highcharts={Highcharts} constructorType={'chart'} options={option} /> 
</div>
</rnd>
)
}

This question would help you. https://stackoverflow.com/questions/8809852/highcharts-how-to-have-a-chart-with-dynamic-height — AbhishekGowda28, Jun 10 '21 at 11:43
Highchart by default adjust to the container. Set width property under chart option to 100%, so it takes the size of the container. — AbhishekGowda28, Jun 10 '21 at 11:45
The problem I run into is that I need to resize bowser for the affects to appear. Any idea why ? — Ibra, Jun 10 '21 at 19:17
In that case query for body tag, take clientWidth and update this value with the chart width — AbhishekGowda28, Jun 11 '21 at 04:35

score 1 · Accepted Answer · answered Jun 11 '21 at 08:49

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

Waw!! Amazing answer. I'll post a functional component edition. You're awesome :) — Ibra, Jun 11 '21 at 14:08

Highcharts automatic resize using drag/resize react-rnd library

1 Answers1