Introduction of the comparison

Performance comparison/tests of JavaScript Charts was made in May 2021 between 12 charts provider. The tests are focusing in line charts’ real-time performance, initial rendering delay, RAM consumption and JavaScript thread blocking time.

The charts selected in this test, are the major manufacturers who claim their charts to be high-performance oriented or the fastest, and some performance-oriented open-source libraries. There are also other charts available, which are either end-of-life, not supported anymore, or simply do not work. They were excluded. We are confident we have selected all the fastest charts in the comparison, and if we did not, inform us to get it added in this test.

The bias in this test is in progressive line charts, needed typically in medical applications (ECG / EEG / ExG), seismography, telemetry, industrial automation, vibration research and audio engineering, and real-time trading data applications.

What did we measure?

Initial rendering delay

The required time for rendering the immediately displayed data set (full X axis view). It does not include time required for initializing chart or series. Smaller delay is better.

FPS

Frames Per Second is the true performance indicator. How many times per second the chart refreshes. Higher the value, the more pleasant it is to the eye. Low frame rate causes stutter/twitching/jerking. Even with high frame rate, the twitching can be observed in most of the libraries, therefore high FPS + stable refresh interval provides the smoothest visual experience.

Timeout delay

The delay the chart updates is blocking the JavaScript event queue. Smaller the better.

Heap Size (MB)

Memory requirement from Browser’s heap. This can be important if having several charts in the same application, and memory is needed for other purposes.

Results

The results were output to Google Chrome browser Console, and constructed into CSV data, and imported to Excel. The green color represents good value, yellow mediocre, and red… it indicates either slowness or bright red a fail. The FPS rates are visualized with bars inside the cells, too.

javascript charts performance

What is the fastest JavaScript chart?

In conclusion: LightningChart initial rendering time is smallest or amongst the smallest, it runs with very compact memory footprint (note the amount of data others can’t even handle), with lowest CPU overhead, and fastest response to mouse interactions, reaching higher usable data point rates than any other chart.

Also, note that some competitors use downsampling as an option to increase FPS. Downsampling really should not be used or tolerated by any software supplier making realistic and believable applications. Without downsampling, these performance results would have been much worse for some.

Based on the amounts data can be visualized with over 30 FPS, we can conclude LightningChart JS is the fastest JavaScript line chart:

  • With low-end laptop, LightningChart® JS is about 80 x faster than average of competitors.
  • With high-end desktop, LightningChart® JS is roughly 700 x faster than average of competitors, and 100 x faster than nearest competitor.
  • With high-end desktop, LightningChart® JS can keep FPS over 30, with data rates of over 10 million new data points / sec.

Note the huge difference of LightningChart to any other chart (data values are not missing).

See the Full Performance Comparison Results to view results in detail. And here’s the GitHub project of performance comparison.

javascript charts performance