Hi there,
Currently I am using some Plotly JS graphs with responsive layout like here, embedded in a React web app. From time to time I have to hide the page where all graphs reside. Problem is, if the window gets resized during this time, Plotly will throw an error and all plots get ugly resized to a minimum (probably some default minimum size) after the page is visible again.
There is a page hidden event, by which I set Plotly graphs inactive, e.g. they wont be rerendered via Plotly.react. However, I do not know how to stop the resize event.
What I would really like is some simple configuration setter or window listener handle method to temporarily disable {responsive: true} if the page is hidden and later on reactivate it. Does Plotly currently offer such a possibility?
PS: These graphs are costly to mount, so I would really like to not remount them from scratch.
Greetings
ford
You can try calling Plotly.react(gd, gd.data, gd.layout, {responsive: false}) where gd is your graph <div>.
That said, I’m a little confused by your report as we do try to not force a resize on hidden graph divs:
Would you mind sharing a reproducible example to help us debug?
Sure.
https://codesandbox.io/s/9qy1p1k8jy
Wait 3 seconds, until the graph hides, then resize the window.
There seems to be some routine which already catches this, as the error is:
Error: Resize must be passed a displayed plot div element.
But it still throws.
@etienne,
did you already have a chance to look at the sample? From what you say, I interpret that behavior as an error. Ignoring the resize event/ not propagating an error in case of a hidden container indeed would solve my problem. Should I open a github issue for reference?
One further question: You said, the responsive config can be altered by Plotly.react invocation again. Is that method safe to be called for a hidden container?
Greetings,
ford