Downloaded plot looks nothing like it does on the web page

#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.

Turn off Autoscaling for Bar Graph Text AND not matching the download scale (See replies)
#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: null, height: null}})
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