victory Perfomance issues while rendering VictoryLine

Discussed in https://github.com/FormidableLabs/victory/discussions/2302

^{Originally posted by vtarelkin June 15, 2022} Good day, trying to migrate from recharts and passing down the array of 6900 point of x and y like this



    const handleZoom = (domain) => {
        setSelectedDomain(domain);
    };
    const handleBrush = (domain) => {
        setZoomDomain(domain);
    };

    return (

            <VictoryChart
                width={550}
                height={300}
                containerComponent={
                    <VictoryZoomContainer
                        responsive={false}
                        zoomDimension="x"
                        zoomDomain={zoomDomain}
                        onZoomDomainChange={handleZoom}
                    />
                }
            >
                <VictoryLine
                    style={{
                        data: {stroke: "tomato"}
                    }}
                    data={data}
                    groupComponent={<g />}
                    x="x"
                    y="y0"
                />
            </VictoryChart>
        }
        </>
    )

and on zooming / moving everything is delayed. How can I remove it?

ezgif-1-24eb1bb981

Jun 15 '22 12:06 vtarelkin

SVGs have a hard time rendering that many points. You can try to use groupComponent={<CanvasGroup />} dataComponent={<CanvasLine />} to render it as a canvas however it won't have the same functionality as your SVG does.

Jun 15 '22 16:06 Vcoss

We're already aware of some issues with responsiveness and interactivity, particularly when rendering many data points in SVG, and it has been discussed in issues like this one. https://github.com/FormidableLabs/victory/issues/1669

We are currently working on a refactor that should address some of the inefficiencies around rendering and user interactions.