Repository navigation
Add support for responsive charts #2969
Description
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:
Reacted by etpinard
Activity
etpinard commentedon Sep 4, 2018
Good call!
This would probably work best as new config option (i.e. I don't think this should be a layout attribute).
bpostlethwaite commentedon Sep 4, 2018
This could have interesting implications (I think positively so!) for Plotly's own embed and react-plotly.js
cc @nicolaskruchten
nicolaskruchten commentedon Sep 5, 2018
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.jsworld 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 commentedon Sep 5, 2018
We could even shoot for moving all the embedplot logic in plotly.js.
antoinerg commentedon Sep 5, 2018
ResizeObserveris 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 commentedon Sep 10, 2018
Closed by PR #2974
nicolaskruchten commentedon Sep 10, 2018
Let's make sure we get this in the documentation as well! :) /cc @cldougl what's the process for doing this?
cldougl commentedon Sep 10, 2018
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.