React-plotly responsive chart not working

Hello,

I am new to react-plotly. I am working to create responsive charts that change size dynamically based on the resolution of the parent container.

Below is an abbreviated version on the plotting script. Its a duel axis scatter plot. My question is why does the chart not change width as the parent div changes width? The height of the parent div is constant. I have tried a variety of different integrations of the layout parameters:

  • responsive: true,
  • useResizeHandler: true.
  • autosize: true,
  • width: β€˜100%’,
  • height: β€˜100%’

Does anyone on here have experience with this issue?

Thanks!

<div>
<Row>
<Plot
    data={}
    layout={{
        responsive: true,
        useResizeHandler: true,
        autosize: true,
        width: '100%',
        height: '100%'
}}
/>
</Row>
</div>

I am having the same issue. I cannot get the ploty graph to be responsive in react. Does anyone have a solution?

<Plot
data={data}
layout={layout}
useResizeHandler={true}
style={{width: β€œ100%”, height: β€œ100%”}}
/>
This working for me…

2 Likes

Got it to work - thank you!