Plot config in static image export

[franjuanele]

Hi there. Is there a way to change plot config when using plotly.io.to_image? For example, I want to set the locale, which I set on Dash via

external_scripts=["https://cdn.plot.ly/plotly-locale-es-latest.js"]

and then setting

config={"locale": "es"}

inside of each dcc.Graph.

In particular, the following plot saves correctly (I’m using kaleido 0.1.0post1) but the month names in the x axis appear in English (obviously, since the locale is not set):

from plotly.io import to_image

traces = [go.Scatter(x=["2023-01-01", "2023-02-01", "2023-03-01"], y=[1, 3, 2]]
layout = go.Layout(xaxis=dict(tickformat="%B"))
fig = go.Figure(data=traces, layout=layout)

with open("path/to/file.png", "w") as f:
    f.write(to_image(fig, format="png"))

I have also tried using fig.show(renderer="kaleido", config={"locale": "es"}), but in that case “kaleido” is not accepted as a renderer.

Any ideas?

[farispriadi]

@franjuanele

https://cdn.plot.ly/plotly-locale-es-latest.js

Hi @franjuanele ,

Try to add src as key in external_scripts when you set the js cdn link.

app = Dash(
    __name__,
    external_scripts=[{'src':'https://cdn.plot.ly/plotly-locale-es-latest.js'}]
)
app.scripts.config.serve_locally = False

traces = [go.Scatter(x=["2023-01-01", "2023-02-01", "2023-03-01"], y=[1, 3, 2])]
layout = go.Layout(xaxis=dict(tickformat="%B"))
fig = go.Figure(data=traces, layout=layout)

app.layout = html.Div([
			dcc.Graph(figure = fig,config={"locale": "es"})
	])

if __name__ == "__main__":
	app.run_server()

And for another reference, this post below seems have similar problem about locale language.

Dash internationalization

Hi everybody! I would like to create a multilanguage Dashboard , with the option to change language at runtime. It’s a multitab dashboard and I am facing the following problems: 1)To share the selected language in all the tabs, considering that it could be changed at every moment. 2) To translate again the app when the selected language changes. Any suggestion?

You can check it out, maybe the solution that is the solution you’re looking for.

Cheers.

[franjuanele]

Hi, thanks for your reply. Looking in retrospect my question wasn’t all that clear, so I apologize. Let me rewrite it.

I have no problem setting the locale when using Plotly charts inside dcc.Graph. However, if I create a figure object and try to export it using plotly.io.to_image, I cannot set the locale and month names appear in English. My question was, is there a way to set the locale in static image export?

[farispriadi]

Hi @franjuanele,

Great. Thanks for making these questions clearer for me

1. Problem with plotly.io.to_image

Actually, I am facing similar problem when export image via plotly.io.to_image.

And I think the reason why locale month names has not been set, because it cannot include the external_scripts when convert to the image.

Because of that, Instead using plotly.io.to_image, I try to use plotly.io.write_html.

from plotly.io import write_html

2. Problem adding multiple JS files

By using include_plotlyjs property in plotly.io.write_html function, we can set explisitly plotly js for locale language.

But we need to include both https://cdn.plot.ly/plotly-2.24.1.min.js and https://cdn.plot.ly/plotly-locale-es-latest.js to enable locale language according to docs below.

Configuration

Since the value of include_plotlyjs property is True, False or string, for current condition is not possible to include multiple js files.

So, I decide to combine two js files into one file combined_plotly.js.

combined_plotly = ""
js_flies = ['https://cdn.plot.ly/plotly-2.24.1.min.js','https://cdn.plot.ly/plotly-locale-es-latest.js']

if not os.path.exists(os.getcwd()+'/combined_plotly.js'):
	with open('combined_plotly.js','w',encoding='utf-8') as f:
		for js_file in js_flies:
			r = requests.get(js_file)
			combined_plotly = combined_plotly+"\n"+r.text
		f.write(combined_plotly)

3. Turn Figure into HTML

After add traces and update the layout, time to export into html file and set locale config.

write_html(fig,"scatter_plot.html",include_plotlyjs=os.getcwd()+'/combined_plotly.js',config={"locale": "es"}) 	

4. Module to turn HTML into IMAGE

When html file has created, we need to turn it into image file using html2image.
For using these module, you should install html2image module first.

pip install html2image

5. Turn HTML into IMAGE

Lastly ,import html2image module and convert html file into image.

from html2image import Html2Image
hti = Html2Image()
# hti.size() # set your custom size here

with open('scatter_plot.html', 'r',encoding='utf-8') as f:
	html_str = f.read()

hti.screenshot(html_str=html_str, save_as='scatter_plot.png')

Let’s wrap it up

from plotly import graph_objects as go 
from plotly.io import write_html
import os
import requests
from html2image import Html2Image
hti = Html2Image()
# hti.size = (500, 200) # set your custom size here

combined_plotly = ""
js_flies = ['https://cdn.plot.ly/plotly-2.24.1.min.js','https://cdn.plot.ly/plotly-locale-es-latest.js']

if not os.path.exists(os.getcwd()+'/combined_plotly.js'):
	with open('combined_plotly.js','w',encoding='utf-8') as f:
		for js_file in js_flies:
			r = requests.get(js_file)
			combined_plotly = combined_plotly+"\n"+r.text
		f.write(combined_plotly)

traces = [go.Scatter(x=["2023-01-01", "2023-02-01", "2023-03-01"], y=[1, 3, 2])]
layout = go.Layout(xaxis=dict(tickformat="%B"))
fig = go.Figure(data=traces, layout=layout)

write_html(fig,"scatter_plot.html",include_plotlyjs=os.getcwd()+'/combined_plotly.js',config={"locale": "es"}) 	
with open('scatter_plot.html', 'r',encoding='utf-8') as f:
	html_str = f.read()

hti.screenshot(html_str=html_str, save_as='scatter_plot.png')

As far as I know, for now it is not possible to add external plotly-locale-es-latest.js files when export static image using plotly.io.to_image or plotly.io.write_image in python.

But it is possible, by exporting first into html file using plotly.io.to_html and convert html file into image using additional module html2image.

Hope this help.