Public comparison of LightningChart® JS performance against other JavaScript charting libraries in visualizing a realtime multichannel ECG chart:
The following chart libraries were tested:
- LightningChart® JS v3.0.0
- Highcharts 9.1.0
- SciChart 1.4.1578
- Anychart 8.9.0
- amCharts 4
- ECharts 5
- DvxCharts 5.0.0.0
- Dygraphs 2.1.0
- Canvas.js 3.2.16
- μPlot 1.6.8
- Plotly.js 1.58.4
- ZingChart 2.9.3
The following chart libraries were suggested but not included:
- DevExtreme Based on SVG, this is not suitable for real-time data visualization.
Below you can find an overview of library performance in a streaming application by visualizing refresh rate (frames per second).
- Higher bar corresponds to smoother performance.
- Orange bar color means stuttering is visible to human eye.
- Red bar color means stuttering is constant and feels laggy, or even unusable.
Competitor results are kept unidentified (for example, "Competitor A").
- Date: 05.05.2021
- OS: Windows 10
- Browser: Google Chrome v90.0.4430.93
- CPU: AMD Ryzen 5 2600
- GPU: NVIDIA GeForce GTX 1050 Ti
- RAM: 8 GB
Full benchmarks data can be found here.
- Date: 05.05.2021
- OS: Windows 10
- Browser: Google Chrome v90.0.4430.93
- CPU: Intel Core i7-8550U CPU 1,80 GHz
- GPU: Intel UHD Graphics 620
- RAM: 8 GB
Full benchmarks data can be found here.
- Date: 05.05.2021
- OS: Windows 10
- Browser: Google Chrome v90.0.4430.93
- CPU: Ryzen 9 5900X
- GPU: RTX 3080
- RAM: 32 GB
Full benchmarks data can be found here.
While all of the included chart libraries could visualize the multichannel ECG chart, it quickly became apparent that majority of the tested charts are not designed for frequent updates.
Already with only one channel and 1000 incoming data points per second, most charts utilize 100% of the CPU which means that the rest of the webpage stops working well. CPU usage can only be observed with browser developer tools, but the same effect can be observed from the benchmark results by looking at FPS dropping to 30 and below (laptop measurements).
Increasing data amount to 10 channels and 10000 incoming data points per second, 9 out of 12 charts cease working as their FPS drops to ~10 and below. At this point, LightningChart JS refreshes twice as fast and with ~3x less processing than the other still functioning charts (laptop measurements).
Increasing data amounts even further, every chart except for LightningChart JS drops off, either crashing or refreshing at less than 5 FPS. The final measurement for LightningChart JS is with 10 channels and million data points per second coming to a whopping total of 10 million incoming data points per second and still refreshing with over 60 FPS (high-end pc measurements). At this point, the amount of data is approaching the limitations of modern browsers but it seems clear that LightningChart JS is not going to be the bottleneck.
Conclusion:
- LightningChart JS performed 175x more efficiently than the fastest hardware accelerated competitor (amount of data, refresh rate).
- LightningChart JS performed 542x more efficiently than the average competitor.
- Majority of web charts claiming "high performance" are still not suitable for real-time line chart visualization as they require too much CPU processing, leaving the rest of the webpage performing bad.
Chart library performance is important, but producing correct visualizations is even more important. This section contains some cases where incorrect or unexpected results were identified.
Some chart libraries are known to utilize internal downsampling of input data. While this yields increased performance, it produces incorrect visualization which is unacceptable in any realistic application.
The following competitors have been tested and proven to utilize downsampling:
- Competitor C
Same data visualized correctly with LightningChart® JS:
With extremely dense data (100 μs resolution), competitor G produces incorrect visualization (curve looks like it is thicker than it should, or like there is a lot of noise). In this case, the Y value can't be accurately identified. Additionally, the visualized Y min/max range is out of the input data bounds (max Y is obviously drawn higher than 5.0).
Same data visualized correctly with LightningChart® JS:
The benchmark applications and all related resources can be found in bench/ folder.
Hosting development server
npm i --global http-server
http-server
Afterwards, benchmark index page can be found in localhost:8080/bench by typing the URL directly into a browser (like Google Chrome).
The test parameters are configured by modifying bench/config.iife.js. After modifications, a cache refresh is usually required (reload page with Shift+Ctrl+R).
All the benchmark applications run for specified amount of time (30 seconds by default), and then print out the benchmark results into the console.
Some chart libraries do not have public URLs where the latest version can be fetched. For these libraries, you have to manually download their library build, and place it in the bench folder in order for the application to work.
- LightningChart® JS | Included in project
lcjs.iife.js - μPlot | Requires
uPlot.iife.min.js,uPlot.min.css - DvxCharts | Requires
dvxCharts.chart.min.js,dvxCharts.chart.min.css,dvxCharts.styles.css
SciChart can't be run with the above method, as there is no IIFE build available, and it also requires licensing management software installed on the local computer. SciChart benchmark application can be found in bench/scichart/.