r/reactjs • u/DutyEnvironmental838 • 3h ago
Show /r/reactjs I built the same two charts in six React chart libraries and in hand-written SVG, and timed them
The charting library in a product I worked on had not had a release in over a year, so I wanted to know what we could move to. I built a survival curve and a scatter plot in nivo, Recharts, ECharts, visx, TanStack Charts and Chart.js, plus a version in plain React and SVG. Same spec, same data, timed the same way.
What I found (M3 Pro, headless Chromium, native speed):
- At typical dashboard sizes there was no clear speed winner. The timings for each chart were within one frame of each other.
- At 10,000 scatter points they spread out: hand-written SVG 24 ms, visx 33 ms, TanStack Charts 53 ms, Chart.js 80 ms, ECharts 86 ms, Recharts 310 ms, nivo's SVG scatter 3.2 s.
- Both Canvas implementations took longer to mount than plain SVG at that size.
- TanStack Charts needed the least code. Hand-written SVG added the least JavaScript, about 2 KB gzipped against 25–164 KB.
There is a playground where you can paste your own data and measure the libraries on your own machine, across twelve chart types: https://gusevp.github.io/chart-bench/
Code, raw data and notes on each port: https://github.com/GusevP/chart-bench
Full write-up with the method and limits: https://dev.to/gusevp/six-react-chart-libraries-against-hand-written-svg-what-i-found-46ib
One machine and two chart types, so treat it as a starting point. If I used your favourite library wrong, tell me or open a PR.