Plotly graph resize in react-grid-layout

plotly.js
1

I am having an issue getting my plotly graphs to resize properly within a react-grid-layout grid component. Currently, the graphs will resize their width to the width of the grid component only when the window is resized - not when the grid element resizes. I need to trigger a rerender of the graph when the grid element resizes.

Also currently only the width of the plotly graph element changes, the height is not variable. Below is the code for my chart and for my react-grid-layout

const Histogram = (props) => {

  return(   
    <div id='myID' style={{height: '100%', width: '100%'}}> 
      <Plot
      useResizeHandler = {true}
      ChartComponent = {Histogram}
      callback={(chart) => this.setChart(chart)}
      style={{width: '100%', height: '100%'}}
      config={{responsive: true}}
      data={[
        {
          x: d1,
          type: 'histogram',
          marker: {
            colour: 'red',
            opacity: 0.5
          },
        },
        {
          x: d2,
          type: 'histogram',
          marker: {
            colour: 'blue',
            opacity: 0.5
          }
        }
      ]}
      layout={{   
        autosize:true,
        margin: {
          l: 50,
          r: 50,
          b: 100,
          t: 100,
          pad: 4
        },
        title: 'Histogram Title',
          barmode: 'stack',
          bargap: 0.05,
          bargroup: 2,
          xaxis: {
            title: 'X Axis Title'
          },
          yaxis: {
            title: 'Frequency',
            automargin:true
          }}}
      style= {{
        display: 'flex',
        alignItems: 'center',
      }}
      config= {{
      responsive: true 
      }}  
      />
    </div>   
  )
};

And the react grid code

const Dash = (props) => {
  const { value, addItem } = props
  const ref = useRef()

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
        <ReactGridLayout
          className="layout"
          onLayoutChange={(e) => console.log(props.layout)}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
          resizeHandles={['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne']}       
      >        
        {_.map(value, (item, i) => (
          <div id = 'gridID' ref={ref} key={i} data-grid={props.layout[i]}  onClick={() => props.updateLayout(props.layout[i])}>
            <DashItem  key={i} >
              {item}
            </DashItem>
          </div>
        ))}
        </ReactGridLayout>
    </div>
  );
}
2

I have the same exact use-case. I just posted here on StackOverflow. The solution I found for this is to use react-virtualized-auto-sizer and wrap your <Plot /> component with <AutoSizer>

The below snippet should be the minimum configuration you need to get it working. I hope it works out for you:

import { useMemo } from "react";

import Plot from "react-plotly.js";
import AutoSizer from "react-virtualized-auto-sizer";

// Assuming PlotlyComponent is a child of `ReactGridLayout`
function PlotlyComponent() {
  const layout = useMemo(() => ({
    autosize: true, // this is important
    // ...other plot layout fields
  }), [])

  return (
    <AutoSizer>
      {({ height, width }) => (
        <Plot
          layout={layout}
          config={{ autosizable: true }}
          style={{ width, height: height - 38 }}
          data={[...]}
        />
      )}
    <AutoSizer/>
  )
}