react-plotly.js Plot resize doesn't work for CSS grid layout

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

Sep 20 '18 09:09 swiperii

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

Sep 20 '18 12:09 nicolaskruchten

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

Oct 05 '18 20:10 antoinerg

Due to a recent commit https://github.com/plotly/plotly.js/pull/3090/commits/af4a2cefe10de4eb855f31c9503cb87e68458a90, 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?

Oct 10 '18 17:10 antoinerg

I'm still having the same issue, using [email protected] and [email protected]

Jul 08 '19 18:07 himmelmaus

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

Jul 11 '19 15:07 antoinerg

@findoslice Can you confirm the above fixes your issue?

Aug 08 '19 14:08 antoinerg

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

Aug 08 '19 15:08 himmelmaus

@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

Oct 25 '22 07:10 MasonPinZ

@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 }} />

Jan 10 '24 17:01 DonaldHokanson