search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.95k stars 1.86k forks source link

Add support for responsive charts #2969

Closed antoinerg closed 6 years ago

antoinerg commented 6 years ago

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:

before

etpinard commented 6 years ago

Good call!

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

bpostlethwaite commented 6 years ago

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

cc @nicolaskruchten

nicolaskruchten commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Closed by PR https://github.com/plotly/plotly.js/pull/2974

nicolaskruchten commented 6 years ago

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

cldougl commented 6 years ago

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.