Surface JS Charts Performance Comparison

Setting the industry standards of performance  

for JavaScript surface charts.

Introduction to the JS surface charts performance comparison

This performance comparison between different JavaScript libraries’ surface grid charts has been done in late November 2021. Our goal is to demonstrate the performance and data handling abilities of different commercial charting libraries’ surface grid charts against the fastest JS surface grid charts created by LightningChart.

The surface grid charts are commonly used when visualizing 3-dimensional data. For instance, geospatial data features three axes: latitude (X), longitude (Z), and height (Y). On top of these dimensions, surface grid charts can handle a fourth dimension by dynamically coloring the surface based on the data.

The performance comparison was carried out within three types of surface grid charts: static surface chart, refreshing surface chart, and appending surface chart. Each type of surface chart has its own performance metrics that set the success/failure between libraries. The libraries tested were LightningChart JS v.3.3.0, ECharts v.5.2.2, SciChart JS v.2.0.2115, and Plotly JS v.2.4.2.

The full open-source test project can be accessed directly from GitHub.

Device Hardware & Operating System Specifications

Surface-charts-performance-comparison-visualization-technical-requirements-pc-icon
Mid-Level Desktop PC

SoC/CPU

RAM

GPU

Intel Core i7-7700K

16.0 GB

AMD Radeon R9 380

What did we measure? – Static Surface Grid Charts

Load-up Speed

Measured in milliseconds, this is a metric that tells how many milliseconds, once initiated the rendering procedure, does the chart take to be fully visible to the user.

Max. Amount of Data

Based on the data intake, the chart will be able to function or exceed its capabilities. When exceeding the chart’s capabilities, the browser may end up crashing or running out of memory.

Static Surface Grid Charts: Performance Results VS Competitors

The performance of LightningChart JS v.3.3.0 against other charting libraries can be seen from the next graph (specific values are contained in the table).

Overall, this particular test has been performed with 2000×2000 (4 million) data points.

The first bar indicates how LightningChart JS’ loading speed was only 152 milliseconds while the only hardware-accelerated competitor (B) required 1,302 milliseconds.

Competitors A and C, both without hardware acceleration, required 14,598 and 30,720 milliseconds, respectively.

Surface-charts-performance-comparison-visualization-static-2000x2000
Surface-charts-performance-comparison-visualization-static-2000x2000-competitors

Performance comparison at different amounts of data points

Testing the number of data points that LightningChart and other libraries can handle, validates the high-performance of LightningChart not only at speed rendering but at data intake levels as well.

Non-hardware accelerated competitors fail the test when reaching a surface grid size of 2000×2000 (4 million) data points and requiring, on average, 22,659 milliseconds to render.

On the other hand, hardware-accelerated charting libraries do have a slightly better performance as they reach a surface grid size of 6000×6000 (36 million) data points but require, on average, 9,501 milliseconds to render.

Now, not only LightningChart JS v.3.3.0 reaches the same 36 million data points threshold at the lowest rendering time of 374 milliseconds but continues to reach up to 12000×12000 (144 million) data points.

Notice that LightningChart JS renders 144 million data points requiring only 1,260 milliseconds.

Surface-charts-performance-comparison-visualization-static-average-comparison

On average, LightningChart JS static surface grid charts are 60x faster than other libraries.

What did we measure? – Refreshing Surface Grid Charts

Frames Per Second (FPS)

How many times the visualization is updated per second. For good real-time performance should be at least 40 or more.

CPU usage %

This is a % value between 0 and 100, which indicates how much processing power the chart is using. Lower values are better.

Max. Amount of Data

Based on the data intake, the chart will be able to function or exceed its capabilities. When exceeding the chart’s capabilities, the browser may end up crashing or running out of memory.

Refreshing Surface Grid Charts: Performance Results VS Competitors

This test answers the question of “what is the % CPU usage of the libraries at a given refresh rate of 10 Hz when visualizing 2000×2000 data points?”

Initially, the test was made at a given refresh rate of 10Hz expecting all the libraries to complete it while rendering the dataset.

However, from the graph, we can see that LightningChart JS was the only library capable to perform at 10Hz with a CPU usage of only 15%.

The only hardware-accelerated competitor (B) had an actual refresh rate of 2.2Hz requiring the full (100%) CPU capacity to render the dataset.

Unfortunately, other non-hardware accelerated libraries failed the test.

Surface-charts-performance-comparison-visualization-refreshing-2000x2000
Surface-charts-performance-comparison-visualization-refreshing-2000x2000-competitors

Performance comparison at different amounts of data points

In this version of the test, we measured the maximum data process speed and the achieved refresh rate at a given amount of data points.

When analyzing the results of the competitors without hardware acceleration, we see that competitor C can process 200×200 (40,000) data points at a refresh rate of 3.7 Hz. Meanwhile, competitor A can process 500×500 (250,000) data points at a refresh rate of 10 Hz.

When analyzing the only hardware-accelerated competitor (B), its refresh rate is only 2.2 Hz when rendering 2000×2000 (4 million) data points.

Finally, LightningChart has been able to render 4000×4000 (16 million) data points at a high refresh rate of 10 Hz.

Surface-charts-performance-comparison-visualization-refreshing-average-comparison

On average, LightningChart JS refreshing surface grid charts are 430x faster than non-hardware accelerated libraries.

Whereas, on average, LightningChart JS refreshing surface grid charts are 18.2x faster than hardware-accelerated libraries.

Reference video to the test

*Parameters are not necessarily the same as the ones highlighted above.

What did we measure? – Appending Surface Grid Charts

Frames Per Second (FPS)

How many times the visualization is updated per second. For good real-time performance should be at least 40 or more.

CPU usage %

This is a % value between 0 and 100, which indicates how much processing power the chart is using. Lower values are better.

Incoming Data Points

Based on the data intake per second that a chart can handle. When exceeding the chart’s capabilities, the browser may end up crashing or running out of memory.

Appending  Heatmaps Performance Results

The following test for the appending surface charts had a sample size of 500, added 200 samples per second, and had a sample history of 10 seconds.

From the results, it can be seen that LightningChart had the highest refresh rate of 60 FPS at the minimum CPU usage of 7.5%.

The only hardware-accelerated competitor (B) had a refresh rate of 5.8 and used all (100%) CPU resources.

For non-hardware accelerated competitors, the test is close to fail and failed, respectively for competitors A and C.

Competitor A had a refresh rate of 0.7 FPS while using 100% of CPU resources whereas competitor C failed the test.

Surface-charts-performance-comparison-visualization-appending-500-sample-size-stream-rate-200-Hz
Surface-charts-performance-comparison-visualization-appending-500-sample-size-stream-rate-200-Hz-competitors

Performance comparison at different amounts of incoming data points

This comparison measures the number of incoming data points and the CPU % usage that libraries can handle and consume while keeping an FPS of > 10.

Starting with non-hardware accelerated competitors, competitor C had a sample size of 100 at a stream rate of 10 Hz. Every second it was handling 1000 incoming data points, however, using full (100%) CPU resources.

Competitor A had similar results with the same parameters, however, using 79% of CPU resources.

When analyzing the only hardware-accelerated competitor (B), its sample size was 100, stream rate 100 Hz and it could load 10,000 data points per second, however, using full (100%) CPU resources.

Finally, LightningChart JS demonstrated that it handled a sample size of 1000 at a stream rate of 200 Hz. LightningChart JS also processed 200,000 data points per second while using only the minimum amount of 5.3% CPU resources

Surface-charts-performance-comparison-visualization-appending-average-comparison

On average, LightningChart JS can manage appending charts with 1000x more data than non-hardware accelerated charts.

Whereas, on average, LightningChart JS can manage appending charts with 20x more data than other hardware accelerated charts at a minimal CPU % usage.

Reference video to the test

*Parameters are not necessarily the same as the ones highlighted above.

Performance test on a high-end device

The capability of LightningChart JS should not be seen only from the scope of low or medium-end devices. More advanced devices benefit all types of applications and when implemented on such devices, LightningChart demonstrates its highest potential.

Device Hardware & Operating System Specifications

surface-charts-performance-comparison-technicalrequirements-for-pc-icon
High-Level Desktop PC

SoC/CPU

RAM

GPU

Ryzen 9 5900X

64.0 GB

RTX 3080

Static Surface Grid Charts

Under a high-end device, the LightningChart JS static surface charts can render a dataset of 45000×45000 (2 billion) data points. The surface charts can load 10000×10000 data points in less than one second (768 milliseconds), that is, processing 130 million data points in 1 second.

Static-surface-charts-performance

Refreshing Surface Grid Charts

LightningChart JS now officially enables real-time refreshing surface data visualization. In the following test, it can be seen that LightningChart JS refreshed a surface data set 60 times per second at a low CPU usage of only 16%.

When using fewer CPU resources, the application has plenty of CPU power to continue running other operations such as data analysis computations.

JS heatmaps performance comparison - Appending Heatmaps table results1
Refreshing-surface-grid-charts-performance

Appending Surface Grid Charts

In the following test, LightningChart JS supports a dimension of 2000×1000 (2 million) data points while appending 200,000 new data points every second. This is achieved at a high refresh rate of 55 FPS but at an extremely low CPU usage of 2.5%

JS heatmaps performance comparison - Appending Heatmaps table results1
appending-surface-grid-charts-performance

Fastest JS Surface Grid Charts – Conclusion & Analysis

After performing these intensive tests on three types of JS surface grid charts, it was demonstrated that LightningChart is the fastest hardware-accelerated charting library as is able to:

  • keep a low CPU usage during all tests at any extremely large datasets.
  • maintain the highest refresh rate.
  • boost its performance level, even more, when carrying out the tests on a high-end device.

Remarkable observations:

On a mid-level device,
  • LightningChart JS static surface charts are 60x faster than other libraries
  • On average, LightningChart JS refreshing surface charts are 430x faster than non-hardware accelerated libraries and 18.2x faster than hardware-accelerated libraries.
  • For appending surface charts, LightningChart JS can manage, on average, 1000x more data than non-hardware accelerated charts whereas it can handle 20x more data than hardware-accelerated charts.

 

On a high-level device,
  • LightningChart JS static surface charts can visualize 2 billion data points and load 130 million data points in only 768 milliseconds!
  • For refreshing surface charts, LightningChart JS can handle 1 million data points per refresh at 60 FPS with only 16% CPU usage.
  • Appending surface charts support dimensions of 2 million data points at 55 FPS and only 2.5% CPU is required.

Learn more about LightningChart JS, the world’s fastest charting library for JavaScript!