Plot resize doesn't work for CSS grid layout

[swiperii]

The Plot component doesn't resize properly when using CSS grid for page layout.
It will grow, but it never shrinks.

Example:
https://codepen.io/swiperii/pen/qMgdwO?editors=0010

[nicolaskruchten]

@antoinerg can you take a look at this one please?

[antoinerg]

This one should be fixed when plotly.js v1.42.0 is released! 🎉

[antoinerg]

Due to a recent commit plotly/plotly.js@af4a2ce, useResizeHandler will have to set plotly.js config to responsive: true in order to fix the current issue. By doing so, plotly.js would start handling responsiveness. Hopefully this transition goes smoothly. @nicolaskruchten Do you see any potential problems with such a change?

[himmelmaus]

I'm still having the same issue, using react-plotly.js@2.3.0 and pltly.js@1.48.3

[antoinerg]

@findoslice If you specify responsive: true in the config option it should work properly: https://codepen.io/antoinerg/pen/wLOygM?editors=0010

[antoinerg]

@findoslice Can you confirm the above fixes your issue?

[himmelmaus]

@antoinerg Unfortunately I no longer work for the company where this issue came up, however from memory it didn't at the time

[MasonPinZ]

@antoinerg I encountered the same issue and I also confirmed that your suggestion fixed my issue. Thanks a lot!

@findoslice If you specify responsive: true in the config option it should work properly: https://codepen.io/antoinerg/pen/wLOygM?editors=0010

[DonaldHokanson]

@antoinerg I also had the same issue using CSS Grid and I can confirm your suggestion works. I'm using React in an Electron app and my code looks like this:

<Plot useResizeHandler style={{ height: '100%', width: '100%' }} data={[ { x: signalTime, y: signalData, mode: 'lines', marker: { color: 'red' }, }, ]} layout={{ autosize: true, margin: { t: 50, l: 45, r: 45, b: 40 }, title: 'A Fancy Plot', xaxis: { title: 'Time in seconds' }, yaxis: { title: 'X Track Error' }, }} config={{ scrollZoom: true, responsive: true }} />