Our first version of SciChart.js was able to draw a million data points in a browser, and we have only worked to improve our performance since then.
Version 2.1 of SciChart.js (in BETA now) can draw over 10 million data points and has even been tested up to 100 million data points. That’s more than enough to show the entire history of Bitcoin in a 1-minute chart, or visualise data in the most demanding applications.
Why would you need this speed in a Js Chart?
There are a lot of legacy native-code applications in Science, Engineering and Finance which need to render millions of data-points from big-data stores, sensors (telemetry, IoT). Even hardware devices like electronic test equipment, process monitoring equipment can have integrated displays which include real-time charts to visualise data. Many legacy applications are moving toward npm / Typescript / React as a UI tech stack.
Big-Data is a trend across industries and the amount of data to visualise is only getting bigger. If the performance of your JS Chart Library is not an issue now, it will be soon. With new tools like SciChart allowing you to visualise bigger datasets, it will become a competitive advantage to be able to visualise and gain valuable insights from the rich data your organisation has collected.
SciChart solves tomorrow’s problems today: visualising large datasets, or dynamic datasets in data-intensive applications.
Charting Performance Test Cases
- Plotly.js – an SVG and WebGL powered JS chart
- HighCharts – SVG powered JS charts
- HighCharts Boost – a higher performance plugin for HighCharts
- Chart.js, an open source library based on HTML5 Canvas
- SciChart.js, our WebGL & WebAssembly powered chart library
Note: Other chart libraries were tested internally but not included in the results below, as we are on focussing on the most popular libraries.
We put them head to head in a demanding performance test that stress your CPU & GPU to the max to find out which is the fastest.
These are the test cases:
- Plotting JS Line charts with hundreds, or thousands of line series
- Plotting JS Scatter charts with real-time updates
- XY Lines (scatter line). A challenging test case as it can’t be downsampled easily.
- Column Charts. Columns require extra geometry and are difficult to optimise
- Mountain or Area Charts. Also require extra geometry
- Candlestick Charts. An important test case for stock chart applications which demand good rendering performance.
- Realtime JS Chart Cases. One with scrolling line series (for realtime monitoring applications) and another with new data added to the chart at high speed.
The Performance Comparison Test Results
Test Results Table
Below, you can find the performance test results in table form. The test case & parameters are on the left, and the results are in FPS (Frames per second). Drawing speed is measured in FPS (Frames per second – Higher is Better), meaning, the average number of redraws per second during the test. An FPS result above 30 is smooth to the eye.
Heatmap colours highlight the winners & losers. On the right, find the Speed Increase of SciChart.js compared to the second-fastest JS Chart Library as a percentage.
We’ll draw a conclusion below, but some immediate takeaways from the table above:
SciChart.js is incredibly fast!
More on the performance test results below…
Test Results in Chart Form
Let’s see the test results in chart form. Click on a chart to view full size!
The bar charts above make it easier to see how SciChart.js (green) is performing vs. the competition. Even with 1 to 10 million data-points, SciChart.js is drawing charts at high refresh rates, meaning that SciChart is able to plot a chart in record time.
Some competing JS charts drop off very quickly. Take a look at the Candlestick chart test for example. All competitors are struggling with only 1,000 candles. At 10,000, they can barely redraw. Only SciChart.js can handle millions of candlesticks – enough to plot the entire history of Bitcoin in a 1-minute timeframe.
Performance Comparison Conclusions
- Most perform poorly once the amount of data reaches only a few thousand points.
- All struggled to draw more than a thousand candlesticks in stock chart configuration.
- Many failed / crashed when larger datasets were given to the chart. For example, HighCharts.js simply crashed (even with boost module) when attempting to draw 500 line series with 500 points.
How does SciChart.js Compare?
- For several test cases, competing charts failed to draw (crashed or hanged the webpage).
- For the above test cases, SciChart.js was on average 1,975% faster (~20x faster) than the 2nd fastest competitor, and a maximum of 11,126% faster (111x faster!)
- For Column Charts, SciChart.js was also able to show 100x more data than competing charts
- SciChart.js was able to draw thousands of line series, opening up advanced statistical analysis or comparisons which are not possible with other JS Chart libraries.
Find out More at the link below.