How to improve quality/resolution of plotly figure

Anvil Q&A
1

Dear all,

I know this must be extremely simple, but I just cannot figure it out on my own :slight_smile:

I’ve built a simple app to get the figure with plotly, using this code:

from ._anvil_designer import Form1Template
from anvil import *
import anvil.server
import plotly.graph_objects as go

class Form1(Form1Template):

def init(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)

self.plot_1.layout.title = 'Figure name'
self.plot_1.layout.xaxis.title = 'X-axis'
self.plot_1.layout.yaxis.title = 'Y-axis'
self.plot_1.data = (go.Figure(x=[1,2,3,4,5],y=[10,20,30,40,50]))

Everything works perfectly, but I would like to download that figure in higher resolution (at least 300 dpi). Pressing download as png in plotly window gives a figure that has no publication quality.

I’ve tried setting the width and height using:
self.plot_1.layout.width = 2048
self.plot_1.layout.height = 2048

but without success.

I would appreciate your help, and I would like to emphasize that I am a beginner :slight_smile:

My app is available here: https://help-resolution.anvil.app

Thank you very much in advance.

All the best,
Stevan

2

You should be able to use some setting to get an svg rather than a png (sorry, I don’t remember the setting and I’m on the cell now).

Svg images are scalable and keep good quality when scaled.

3

Hey,

So, if I remember right, with plotly you use scale.
Should find something easy to follow on stackoverflow.

4

Hi Stefano,

Thank you very much for your suggestion. I managed to enable download in svg format by converting plotly plot to iamge by using “to_image” command. In my case, it was “self.plot_1.to_image({‘format’:‘svg’})”.

There is a small catch. When downloading the image, the output format is a long and strange series of letters and numbers. It is necessary to “save as type” as “All files(.)”, and then to change the extension of the saved file to the .svg. The resulting file can be easily opened and modified with the Inkscape program.

Thank you very much once again.

All the best,
Stevan

5

Hi James,

Thank you very much for your suggestion. I managed to use the scale option by first converting the plotly plot to the image by using “to_image” command. In my case, it was self.plot_1.to_image({‘format’:‘png’,‘scale’:6}).

The resulting .png file is great and publication-ready.

Thank you very much once again.

All the best,
Stevan

6

Dear all,

Just wanted to summarize the solution regarding this.

Plots obtained by the client-side plotly library can be downloaded using the incorporated interactive buttons in the upper right corner of the plotly plot. However, when you download the plot in this way, the downloaded image in png format is of low quality. It is usable, but low quality for publications.

To download a better quality plot, the solution is to convert plotly plot to image using the “to_image” command. In this way, you can convert your plotly plot to the image in formats of jpg, jpeg, svg, etc.

If you are converting to jpg or png image, it is useful to use the scale option to improve the image’s resolution.

Here is the corresponding example for converting plotly plot to png image with six fold scale:

self.plot_1.to_image({‘format’:‘png’,‘scale’:6})

The example for converting plotly plot to svg would be:

self.plot_1.to_image({‘format’:‘svg’})

In the latter example, you can also use the scale option. You can use programs like Inkscape to work with vector graphics.

Many thanks to stefano.menci and james.patrick for their replies.

Also, it was extremely helpful to read this answer by stucork.

All the best,
Stevan

4 Likes
7

So glad it helped! And a great pointer for everyone else on the to image!