React PlotlyJS and big datasets

plotly.js
1

I am trying to create a chart for my business with PlotlyJS under React. The graphics work well and the component is well designed. But however when the graph contains more than 30,000 points the browser crashes completely while waiting for it to load.

Is there a solution to integrate a large amount of data on plotly in a fluid way with react hooks?

Data recovery from the back end :

        axios.post('/builder/chart', {
        selectOneChart: id,
    })
        .then((response) => {
            const chartSelected = JSON.parse(response.data.chartData);

            setChart({
                config: chartSelected.config,
                layout: chartSelected.layout,
                frames: chartSelected.frames,
                data: chartSelected.data,
            });
        });

The Plotly component :

return (
        <Plot
            className={classes.fullSize}
            config={chart.config}
            layout={chart.layout}
            frames={chart.frames}
            data={chart.data}
            advancedTraceTypeSelector
            useResizeHandler
            responsive
            debug
        />
    );
2

Which trace(s) are you using?
If you are using something like scatter you may try WebGL-based traces e.g. scattergl .

3

I use plotly js editor so that a user can create his own graphic himself and I just noticed that the Gl web idea is directly present in plotly editor. After a quick test this improves performance, thank you for the advice