[Bug] Plots dont contain graphs after static image export

[klnrdknt]

Using version 4.10.0 for plotly and 0.0.3.post1 for kaleido, the write_image("*.png") does not produce any visible points.

The plot should look like this (works in jupyter notebook):

And after exporting as static format (doesnt matter which format, fails for all), produces this:

The underlying data set looks like this (with the blacked out "ID" column):

Export as html works perfectly fine. Downloading from browser also works (but as I understand from kaleido docs, that utilizes the browsers internal utilities?).

The code I used is:

# some imports 
import numpy as np
import pandas as pd
import plotly.express as px
# ... creating the summer data set
fig = px.scatter(summer, x=summer["Time"], y=summer["Measured Emission"], color="ID", facet_row="operating state", height=800, width=1200, category_orders={"operating state": [0, 1, 2, 3]}, title="lalala", marginal_y="box", log_y=True)
fig = fig.for_each_annotation(lambda a: a.update(text=a.text.replace("ID=", "")))
fig = fig.for_each_annotation(lambda a: a.update(text=a.text.replace("operating state=", "Operating state: ")))
fig = fig.update_traces(marker=dict(size=1.5))
fig = fig.update_yaxes(matches=None)
fig.write_html("some.html")
fig.write_image("some.png", engine="kaleido")
fig.show()

Is this due to rastering? I also tried exporting in higher resolution, but it did not change anything.

[klnrdknt]

Update: When I use it outside jupyter, e.g. run the same code from a terminal (ipython), it works fine.

[jonmmease]

Thanks for the report, and update, @klnrdknt.

This is certainly an odd combination of behavior! I don't know of any reason why kaleido would act differently when called from ipython and from within a Jupyter notebook. Also, Kaleido is using the same image export pathway as the save button in the toolbar, but it's using it's own embedded chromium browser, not the browser displaying the figure.

Are you able to reproduce this behavior with any of the scatter plots from the docs at https://plotly.com/python/line-and-scatter/? We'll need something that we can fully reproduce to dig in further. In particular, try both the plain scatter and scattergl variations in case this has something to do with WebGL accelerated figures.

Thanks!

[klnrdknt]

Ok, I reproduced it. But for the minimal example from the website everything is fine.

Might be relevant: I'm using it within poetry virtualenv on WSL.

I have not specified the render mode.

I made a version in which it reproduces though, the code goes as follows:

import plotly.express as px
import pandas as pd
import numpy as np

df = pd.DataFrame(3 * np.random.rand(50000, 4), index=pd.date_range(start="2020-01-01 00:00:00", freq="10S", periods=50000))
df.index.name = "Time"
df[3] = df[3].round().astype("int")
df = df.reset_index().melt(id_vars=["Time", 3])
print(df)

fig = px.scatter(df, x=df["Time"], y=df["value"], color="variable", marginal_y="box", facet_row=3, height=1000, width=1500, category_orders={3: [0, 1, 2, 3]}, log_y=True)
# commenting out the three lines below does not change anything
fig = fig.for_each_annotation(lambda a: a.update(text=a.text.replace("3=", "")))
fig = fig.update_traces(marker=dict(size=1.5))
fig = fig.update_yaxes(matches=None)
fig.show()

fig.write_image("/mnt/c/Users/user/Documents/test_plotly.png")

plot comes out like this

[jonmmease]

Thanks for the reproducible example! This example has enough points that plotly express will switch to webgl rendering, so just to double check, does this example work properly for you?

import plotly.graph_objects as go
import numpy as np

N = 100000
fig = go.Figure(data=go.Scattergl(
    x = np.random.randn(N),
    y = np.random.randn(N),
    mode='markers',
    marker=dict(
        color=np.random.randn(N),
        colorscale='Viridis',
        line_width=1
    )
))

fig.show()

Also, to double check, when you mentioned that things work from a regular ipython terminal, is that terminal running in the exact same WSL environment as the Jupyter notebook?

Might be relevant: I'm using it within poetry virtualenv on WSL

The poetry environment probably doesn't make a difference but WSL very well could. We've had one other report of a different issue on WSL 1 at #38, and it's not something we've tested ourselves yet.

Are you on WSL 1 or WSL 2? I have a hunch that things will work more reliably over all on WSL 2 since it's based on a real Linux VM that's just a hunch at this point.

[klnrdknt]

@jonmmease

Thanks for the reproducible example! This example has enough points that plotly express will switch to webgl rendering, so just to double check, does this example work properly for you?

import plotly.graph_objects as go
import numpy as np

N = 100000
fig = go.Figure(data=go.Scattergl(
    x = np.random.randn(N),
    y = np.random.randn(N),
    mode='markers',
    marker=dict(
        color=np.random.randn(N),
        colorscale='Viridis',
        line_width=1
    )
))

fig.show()

The example displays within notebook, but doesnt export right.

Also, to double check, when you mentioned that things work from a regular ipython terminal, is that terminal running in the exact same WSL environment as the Jupyter notebook?

I made sure and removed some old versions of env, both are running python3.7.9

Are you on WSL 1 or WSL 2? I have a hunch that things will work more reliably over all on WSL 2 since it's based on a real Linux VM that's just a hunch at this point.

Apparently I was on version 1, I'll try to set to version 2 now and report back. The whole WSL business is kind of confusing.

[jonmmease]

Ok, thanks for the trying that out. So to boil it down, it looks like this is a problem with WebGL plots on WSL 1.

[tkolarik]

Is there any fix for this?

[matzl]

Is there any fix for this?

You can try those things, they worked for me: https://stackoverflow.com/a/77800669/2738240

[gvwilson]

Thanks for your interest in Kaleido. We are currently working on an overhaul that might address your issue - we hope to have news in a few weeks and will post an update then. Thanks - @gvwilson