The Image downloaded using the "download as png" button is distorted

[FelixBenning]

import numpy as np
np.random.seed(123)

import plotly.express as px
import plotly.subplots as subplots
from keras.datasets import mnist
# from keras.datasets import fashion_mnist as mnist

(X_train, y_train), (X_test, y_test) = mnist.load_data()


fig = subplots.make_subplots(rows=2, cols=5)

for n, image in enumerate(X_train[:10]):
 fig.add_trace(px.imshow(255-image).data[0], row=int(n/5)+1, col=n%5+1)


layout = px.imshow(X_train[0], color_continuous_scale='gray').layout
fig.layout.coloraxis = layout.coloraxis
fig.update_xaxes(**layout.xaxis.to_plotly_json())
fig.update_yaxes(**layout.yaxis.to_plotly_json())
fig.show()

this results in this (screenshot):

download as png results in this:

Tangential: It is also way too complicated to generated a small preview selection of pictures. If there is an easier method please answer this stack overflow question

[nicolaskruchten]

This will get easier once we merge plotly/plotly.py#2746 :)

To get the "download plot" dimensions to match the figure dimension, you'll need to set some config options as detailed here: https://plotly.com/python/configuration-options/#customizing-download-plot-button-options

[nicolaskruchten]

@alexcjohnson this is one of the things I would consider changing immediately and not waiting for a v2 ... Is there really any case where the current behaviour is better than the one where we force width/height to match?

[FelixBenning]

I am not so much concerned about the dimensions of the entire image. I am mostly concerned with the fact that

layout.XAxis({
 'constrain': 'domain', 'scaleanchor': 'y'
})

is not respected in the downloaded png. As the y axis is sometimes considerably taller than the x axis. And the subplots all have the same size in the displayed version but not in the downloaded version. Those are things that should not be "customization" of the download. If I am setting layout settings, I would expect them to be the default settings for the download as well.

[nicolaskruchten]

So the problem here is that you're constraining all the X axes to the same Y axis via fig.update_xaxes(**layout.xaxis.to_plotly_json()), rather than constraining each X axis to its corresponding Y axis. If you add the following cryptic line after your code but before the fig.show(), you can get the effect you're looking for...

fig.for_each_xaxis(lambda axis: axis.update(scaleanchor=axis.anchor))

The reason this works is that make_subplots call automatically sets the anchor for each X axis to the corresponding Y axis, so this line reuses that to correctly set the scaleanchor after your code runs.

Again note that none of this will be necessary once we get plotly/plotly.py#2746 rolled in, and we'll get axis-matching in with that approach as well (i.e. zooming or panning in one subplot will zoom/pan the others, which is currently impossible)

[nicolaskruchten]

(cc @emmanuelle you might find this interesting/infuriating ;)

[alexcjohnson]

@alexcjohnson this is one of the things I would consider changing immediately and not waiting for a v2 ... Is there really any case where the current behaviour is better than the one where we force width/height to match?

Agreed - as long as we honor explicit width & height provided with the download config, I'd be happy to set the default to match the displayed plot, no need to consider that a breaking change.

[nicolaskruchten]

The download-size issue is essentially #1576, so I'll close this for now.