Downloaded plot looks nothing like it does on the web page

đź“Š Plotly Python
1

Hi all,

I’m using Python 2.7 on Debian Linux to generate a stacked bar chart with bar totals and a target plot. When I look at it in a browser it looks fine, when I use the “Download plot as a png” button the resulting image is less than half of the bar chart as the captions overlay it (although the bar totals are still displayed).

It looks like this in a browser

crtd_screenshot
crtd_screenshot1680Ă—1050 41.5 KB

And like this as a download

crtd_downloaded_plot
crtd_downloaded_plot700Ă—450 9.18 KB

I’ve done some redaction so I can post it here.

I think it may be a scaling issue on the download, but I’m not sure how to specify what scale to use. Has anybody come across this before and can offer advice please.

Thanks in advance.

2

Hi @Symes, which version of plotly are you using ?

import plotly
print(plotly.__version__)
3

Hi Emmanuelle,

I’m using Plotly version 4.1.1, Python 2.7.9 and it’s running on Debian 8 (Jessie)

4

OK, thanks. Would it be possible for you to upgrade to the latest version of plotly (4.3), for example with pip install -U plotly, and see if the problem persists? I’d like to know if the bug is still present in the latest version.

5

Hi Emmanuelle,

I’ve upgraded Plotly:

print(plotly.version)
4.3.0

It gives the same result as I was originally getting when downloading as a PNG. I also tried a different browser with all the cookies cleared but that didn’t make any difference (Chrome instead of Firefox)

6

Hi Emmanuelle,

I’m finishing work now, so I won’t respond to any posts until Tuesday morning next week. Thanks you for the help thus far.

7

Hi again, it turns out this is a known issue. When you display the figure, do
fig.show(config={toImageButtonOptions: {width: null, height: null}}) in order to force the download-to-png button to follow the figure dimensions (otherwise it’s using fixed dimensions). More details in https://github.com/plotly/plotly.js/pull/3746

8

And to integrate Emmanuelle’s answer with Dash, you need to declare the config in the Graph object:

dcc.Graph(id="my-graph", config={"toImageButtonOptions": {"width": None, "height": None}})
1 Like
9

Thank you Emmanuelle and RenauldLN, you have solved my problem really quickly.

I’m using Python to generate the chart so I adapted your code as follows:

import plotly.graph_objects as go
import plotly.io as pio
.
.
l_go_bar = []
for i in range(len(l_site_names)):
    l_go_bar.append(go.Bar(name=l_site_names[i], x=l_x_axis, y=l_y_axes[i]))

fig = go.Figure(data=l_go_bar)
pio.write_html(fig, config={'toImageButtonOptions': {'width':None, 'height':None}}, file=v_rpt_dir + v_report_file_name)

It all works perfectly now and I have some very happy users.

Thanks again.

1 Like