Plotly.js: Plotly.downloadImage seems to not always respect layout setting

[Braintelligence]

As mentioned here https://github.com/plotly/plotly.js/issues/2098#issuecomment-337622647 Plotly.downloadImage should accept a layout object and it does normally.
When you define your layouts like I did in the following fiddle, it never respects a given layout object but rather chooses the layout object used for drawing the plot. (You can switch plotLayout and downLayout in the given fiddle around to test this.)

https://jsfiddle.net/7co1nf0v/

So how can I achieve keeping this namespace but also being able to pass a different layout for the downloadImage than for the plot drawing? Please point me towards any mistakes I may have made, I'm not totally firm with JavaScript yet. 😹

[Braintelligence]

So I found a workaround by myself by not using the already drawn graph but rather provide the data and layout anew, as seen in this fiddle:

https://jsfiddle.net/28on9Lce/

I still don't understand why my original fiddle worked as long as I didn't provide everything in a namespace; my JS-fu is not strong enough to know what's up with that...

If anyone can point me towards how I could reuse the given graph and just "overload" it with another layout, so I don't need to redraw everything in the background, that would be awesome.

[alexcjohnson]

(BTW, this kind of question is a better fit for community.plot.ly - github issues should be for bug reports or feature requests)

That's the intended behavior. We could certainly do a better job of describing this in the docs... but you can't put data or layout into the second argument, they need to be in the first argument (either directly, as you have it in your second fiddle, or already attached to a div).

Plotly.downloadImage is a wrapper around Plotly.toImage, which is described more in the source

If anyone can point me towards how I could reuse the given graph and just "overload" it with another layout, so I don't need to redraw everything in the background

No matter what you do, we're going to redraw the plot in the background when you ask for an image of it, since the image options can change how it is drawn. But the way you do it in your second fiddle is the correct way to do it, there are no unnecessary redraws there.

[antoinerg]

Hello @Braintelligence and thank you for reporting this!

From my understanding, Plotly.downloadImage will only honor a layout object if it is provided in the first argument. In your first fiddle, the layout object is provided in the second argument which is why it doesn't work. Your second fiddle does work because the layout is provided in the first argument!

[Braintelligence]

Thank you very much for clarifying. I have a better grasp of what's going on now! :)
Sorry for creating an issue rather than a community post, I thought this maybe had the potential for a bug report, but now I know better.

Is there some way to send a PR for the docs? Maybe I could extend them, if I find the time.

[etpinard]

Is there some way to send a PR for the docs? Maybe I could extend them, if I find the time.

How's how: https://github.com/plotly/documentation/blob/source/Contributing.md

Thanks!

[Braintelligence]

No matter what you do, we're going to redraw the plot in the background when you ask for an image of it,

@alexcjohnson Sorry for extending this further, but I got a question that is directly tied to this portion of your answer. If I call Plotly.downloadImage and the plot is always redrawn in the background, is there any way of keeping the zoomed state of a plot?
For example, if I've bound a button to Plotly.downloadImage, where I provide specific data and layout objects, can I somehow pass the current zoomed/scaled state of the "live" plot?
Thank you very much!

EDIT: Nevermind, I found it out by myself 😸. For anyone else wondering:
You can use originalLayout.xaxis.range (and ranges of other axes) and assign it to your downloadLayout 😺.