Very slow rendering time with 100 datapoints and app freezes (react Plot)

plotly.js
1

Hi. I’m starting to use plotly, and wanted to use it with React.

I imported Plot component and wanted to render it, but it seems to be very slow.

When inspecting the component, it seems that the data that is fed to its input has only 100 datapoints, so not many.

When I’m mounting the component that has this plotly Plot in it, the whole app freezes for about 2 seconds and it seems that it freezes exactly when starting to render plotly Plot component.

Also when the Plot is rendered, any interactions with it (zooming etc) seem to take very long, so maybe that’s some hint:

image
image591×230 4.51 KB

I’m basically rendering it like:

       <Suspense fallback={<div className="bg-sky-400">Loading</div>}>
              {console.log("about to draw plotly plot")}
              <Plot
                data={timeseriesData.data}
                layout={{ ...timeseriesData.layout, autosize: true }}
                // useResizeHandler={true}
                // style={{ width: "100%", height: "100%" }}
                // config={{ staticPlot: true }}
              />
            </Suspense>

Things I tried:

  1. making it a staticPlot
  2. disabling useResizeHandler={true}
  3. rounding ‘y’ axis values to whole numbers (the previous precision was quite big)

nothing from the above helped.

I will appreciate some feedback / help on what can be wrong with this

what amazes me in this is I pass only 100datapoints to the component, yet it still seems very slow…

side note: I’m getting the plot data by converting matplotlib to plotly with Plotly’s mpl_to_plotly function, and then doing plotly_figure.to_json() on the backend