Search code examples
reactjschartswidgetresizable

Re-sizing Google chart in react rnd

I am a newbie to react and currently developing an application,

BACKGROUND:

I am trying to use a resizeable rnd component which has Geo map chart as its content.

PROBLEM:

Even though rnd component resizes works fine, the content inside the rnd component doesn't resize.

CODE:

https://codesandbox.io/embed/15lo3mw93?fontsize=14

Any suggestions or hints would be helpful.

Thanks in advance.

Solution

  • You need to update component's state when you do resize, it will trigger render and map should get proper sizes.

    <Rnd
    style={style}
    default={{
      x: 0,
      y: 0,
      width: "" + this.state.mappanelwidth + "",
      height: "" + this.state.mappanelheight + ""
    }}
    onResize={(e, direction, ref, delta, position) => {
      this.setState({
        mappanelheight: ref.offsetHeight,
        mappanelwidth: ref.offsetWidth
      });
    }}
  >