Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Incorrect rendering with many subplots

It seems like if I go from 20-25 subplots, a weird rendering problem crops up where the traces are too big and not restricted to the plots. This occurs in firefox, but not in google chrome (although chrome crashes when attempting to load 40 subplots, whereas firefox does not). Here’s a minimal example

import numpy as np
import plotly.graph_objects as go
import plotly.subplots as ps


y = np.random.rand(1000)

for num_subplots in [20, 25]:

    fig = ps.make_subplots(rows=num_subplots, cols=1)
    fig.update_layout(height=200 * num_subplots, showlegend=False)

    for i in range(num_subplots):
        scatter = go.Scattergl(x=np.arange(len(y)), y=y, mode="lines", line=dict(color="#000000"))
        fig.add_trace(scatter, row=i + 1, col=1)

    with open(f"{num_subplots}_subplots.html", "w") as f:
        f.write(fig.to_html(full_html=False))  # same result for `full_html=True`

When I run this with 20 subplots, things render properly:

However, when I look at the file with 25 subplots, it renders like this:

Am I doing something wrong? Thanks very much in advance, all help extremely appreciated!

@naten7k
I cannot reproduce your issue. I have Chrome Version 96.0.4664.110 (Official Build) (64-bit), and it displays nice subplots, in the html file with 20 or 25 subplots.

As I noted in my post, I did not observe this issue in chrome, just in firefox (I’m running 89.0.2, 64-bit). Thanks!

Sorry. I didn’t read carefully :frowning:

no problem! this might be a weird firefox issue, which given firefox’s user share isnt worth figuring out. but figured i’d bring it up, since (a) its a pretty odd behavior and (b) firefox is my default browser :).

@empet The plot thickens! This does happen in chrome, but you need more plots to get it to happen, and the behavior is slightly different (plots dont have a rightwards offset, but are incorrectly scaled vertically). Furthermore, the incorrectness of the vertical scaling scales with the number of subplots! See plots below.

Furthermore, it also depends on the height per subplot. If you increase the height per subplot to 800, then this problem shows up in chrome at 20 subplots, and in firefox at 10 subplots.

100 subplots:

80 subplots:

60 subplots:

40 subplots:

^ bump? i would really appreciate it if anyone could even give me an area to start digging here about where the issue might be. thanks so much!

I’m not sure how plotly.graph_objs.Figure.write_image() works, but it seems to suffer from a possibly-related issue, where for more than N subplots, the first N plotted traces not constrained to the plot area and the remainder of the traces dont seem to be rendered! N seems to depend on plot height, such that this problem only crops up when (number of subplots * subplot height) > 4000. Here’s a minimal example:

import numpy as np
import plotly.graph_objects as go
import plotly.subplots as ps


y = np.random.rand(1000)

for num_subplots in range(2,10):

    fig = ps.make_subplots(rows=num_subplots, cols=1)
    fig.update_layout(height=800 * num_subplots, showlegend=False)

    for i in range(num_subplots):
        scatter = go.Scattergl(x=np.arange(len(y)), y=y, mode="lines", line=dict(color="#000000"))
        fig.add_trace(scatter, row=i + 1, col=1)

    fig.write_image(f"{num_subplots}_subplots.png")

For 5 subplots, everything looks fine:

For 6+ subplots, traces are missing after the first 5 subplots, and the existing traces dont stay within their plotting bounds.

Oof, I ought to understand that ‘edit post’ and ‘reply’ are not the same, please ignore my stupid edit history on the above post.

One more note - this issue doesnt seem to happen for graph_objs.Scatter, just graph_objs.Scattergl objects. I unfortunately can’t just switch to Scatter though because it’s order-of-magnitude slower for the quantity of data I’m trying to render.

I also just found this thread which suggests a limit on the number of GL instances in a window: ScatterGL markers not displaying
However, if I’m understanding correctly, it seems that what I’m doing shouldnt hit that limit since they’re subplots and therefore part of the same GL instance? @chriddyp am I interpreting that correctly?