✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Low quality of 'download plot as png' in browser

Graphing Library Plotly.js
#1

Hi,
I plot a lot of graphs as .html files, every once in a while however, I need to save a plot as a png file. The .html files are stored locally so I want to use the ‘download plot as png’ option in the browser. However, this returns only very small, low quality .pngs. I am aware of the export feature of plotly online. I cannot use this feature though since the plot needs to be saved in my account. For community users the plot size is restricted to ~500 kB and all my plots are larger.

Is there any workaround for this?

Thanks!

1 Like
#2

You can try calling Plotly.toImage and setting a larger width and height.

#3

How would I do that from within the browser or do I have to set this from somewhere else?

#4
1 Like
#5

Thank you, it took me a second to understand.

Just in case to s/o runs into the same problem:

You have to set the ‘width’ and ‘height’ attributes to be able to save a plot of a given resolution from within the browser.
My assumption was that the saved .html file was scale-less since it always perfectly fit my browser window size.

#6

Hi etienne,

the plot won’t change correctly. The plot is getting bigger but the text in it won’t change.

#7

Has there been a solution to this? Is this a known issue? It was working perfectly for me but suddently the in-browser image save (a huge timesaver) started saving very low quality images.

#8

@antrg Could you please have a look at the last comment. Thanks.

#9

@archmoj I’m not quite sure what the problem is here. Is there a Codepen demonstrating the issue?

#10

@SHxKM could you please provide an example?

#11

The issue is with HiDPI screens. Plotly.toImage doesn’t take the so called ‘scale factor’ into account and so the images look blurry on high pixel density (Retina) screens.