React-plotly responsive chart not working

plotly.js
1

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>
2

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

3

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

3 Likes
4

Got it to work - thank you!

5

THANK YOU, NUCITA!

I’ve been beating my head on the wall for 48 hours and all I gained was a bigger office (open space, no walls!).

Documentation for Plotly is neither handy nor great, but this was really not well explained.