Add a lot of shapes to dash graph

Hi there,

I am trying to draw a lot of rectangular shapes onto my dcc.Graph. I was doing that by first creating the shapes and then setting them to fig.layout.shapes:

shapes = [go.layout.Shape(r) for r in rectangles]
        fig.update_layout(shapes=shapes)

where each retangle is just a dictionary as follows:

dict(
                    type="rect",
                    layer='below',
                    fillcolor=fill_color,
                    x0=x0,
                    x1=x1,
                    y0=y_min,
                    y1=y_max,
                    opacity=0.5,
                    xref='x1',
                    yref=yref,
                    line=dict(width=1)
                )

This however seems to be very slow when trying to plot around 1000 (or more) shapes. The reason is probably that it does not support WebGL.

So what other options do i have? My graph is displaying some time-series data with go.Scattergl that already has some annotations, which I want to display with such rectangular shapes.

Thanks a lot for any advice!

I solved it for me by summarizing shapes that are next to each other and have the same annotation/fill_color. This reduced the amount of shapes that need to be plotted to around 100, which the browser can handle quite well :slight_smile:

1 Like

Hello @let,

Welcome to the community!

Glad you found a solution and thank you for posting it here to help others. :smiley:

1 Like