Add support for responsive charts

[antoinerg]

In order for charts to look great on any devices/orientation, I suggest that we add the option to resize charts whenever the window's size changes.

For example, it is common for a user to switch his phone from landscape to portrait mode which results in the following unaesthetic/broken result:

[etpinard]

Good call!

This would probably work best as new config option (i.e. I don't think this should be a layout attribute).

[bpostlethwaite]

This could have interesting implications (I think positively so!) for Plotly's own embed and react-plotly.js

cc @nicolaskruchten

[nicolaskruchten]

This would be basically baking in https://plot.ly/javascript/responsive-fluid-layout/ via a config option? Seems helpful, indeed, but also kind of incomplete... Lots of people in the react-plotly.js world are hitting issues where even though the window doesn't change size, the containing element does (via a resize operation or a CSS reflow due to new elements appearing alongside or whatnot) and so they need to fire that resize call themselves anyway.

[etpinard]

basically baking in https://plot.ly/javascript/responsive-fluid-layout/ via a config option?

We could even shoot for moving all the embedplot logic in plotly.js.

[antoinerg]

even though the window doesn't change size, the containing element does (via a resize operation or a CSS reflow

ResizeObserver is a proposal to react to any events that resize a element. However, only Chrome implements it thus far (caniuse#ResizeOberserver) so we would need to resorts to a polyfill.

In the meantime, I will submit a PR doing what most (if not all) other plotting libraries claiming to be responsive do: simply react to window resize events.

[antoinerg]

Closed by PR #2974

[nicolaskruchten]

Let's make sure we get this in the documentation as well! :) /cc @cldougl what's the process for doing this?

[cldougl]

Yep- you can open an issue in the documentation repo: https://github.com/plotly/documentation/issues
If you have a link to a test or codepen example that exhibits the new feature that would be super helpful to include in the issue.