4 ms·
i'm working on a micro timeseries plotter that easily handles 150k+ datapoints. it uses canvas but accounts properly for display pixel density, so is as sharp a
by leeoniya 7y ago
i'm working on a micro timeseries plotter that easily handles 150k+ datapoints. it uses canvas but accounts properly for display pixel density, so is as sharp as SVG.
here is how it performs vs Chart.js:
https://github.com/leeoniya/uPlot#performance https://github.com/leeoniya/uPlot#performance
i will add Apex charts to the bench list in a day or so
i think the only practical way to get acceptable perf with SVG is to simplify the paths via something like https://mourner.github.io/simplify-js/ https://mourner.github.io/simplify-js/
- etimberg 7y agoIf you change the `scales.xAxes[0].ticks.source config option to `'auto'` you can drop ~1s off the render the time. It's still not great, but it is an improvement. I'll take a look through the profile I generated and see if there are any obvious improvements in Chart.js. Thanks for creating this :)
- leeoniya 7y agosweet, i'll add this. is this mentioned anywhere in the docs? seems non-obvious.
- etimberg 7y agoThe option is documented at https://www.chartjs.org/docs/latest/axes/cartesian/time.html#ticks-source https://www.chartjs.org/docs/latest/axes/cartesian/time.html... but the performance implications aren't. I'll work on adding something there.
- antman 7y agoThat really looks fast! Does it work in.live mode also?
- leeoniya 7y agoit will. i'm still fiddling with the final api design to make sure it can accomodate the planned features in a logical manner without hacks.
- olavgg 7y agoVery impressive work! Funny thing though, I recently implemented a zoomable line chart with D3.js, and I also use double click to reset the zoom :)