javascript charts performance comparison - line charts

1(16)

JavaScript Charts Performance Comparison / Line Charts

Test date May 5th, 2021

Foreword

This is a performance test / comparison of JavaScript charts. The tests are focusing on 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 open-source libraries. There are also other charts

available, which are either end-of-life, not supported anymore, or simply don’t 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.

2(16)

Test procedure

The test project is published as open-source project in Github.

The goal was to create a scrolling line chart. Data is appended to the tail of the line series, and X axis

then scrolled to show the new data, and make the oldest data fall out.

The tests were made according to examples and tutorials and contacting manufacturers’ support

teams whenever available. We strongly believe all of them have been made in optimal way for all of

them, and if you notice any problem or wrong configuring of them, please contact us for a fix.

The appearances of the chart were set to simplistic, and line series stroke widths were set to 2 pixels

wide, which is a typical value for line charts.

https://github.com/Arction/javascript-charts-performance-comparison

3(16)

Test hardware setups

The test was carried out with the following setups.

1. Fast desktop PC:

• CPU: AMD Ryzen 9 5900X processor

• GPU: Nvidia GeForce RTX 3080

• RAM 16 GB

• 2560 x 1440 resolution, 165 Hz

2. Low-end desktop PC:

• CPU: AMD Ryzen 5 2600 Six-core processor

• GPU: NVIDIA GeForce GTX 1050 Ti

• RAM: 8 GB

• 1920x1080 Full-HD resolution, 60 Hz

3. Low-end business laptop, with touch-screen, Lenovo Yoga

• CPU: Intel Core i7-8550U CPU 1,80 GHz

• GPU: Intel UHD Graphics 620

• RAM: 8 GB

• 1920x1080 Full-HD resolution, 60 Hz

4(16)

Tested chart libraries (in no particular order)

• LightningChart® JS 3.0.0

• AmCharts v.4

• ZingChart 2.9.3

• HighChart (Boost module enabled) v.9.1.0

• DvxCharts v.5.0.0.0

• Dygraphs v.2.1.0

• µPlot v.1.6.8

• AnyChart v. 8.9.0

• ECharts v.5

• Plotly.js v.1.58.4

• SciChart JS v.1.4.1578

• Canvas.js v.3.2.16

What did we measure?

1. 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.

2. 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.

5(16)

3. Timeout delay

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

4. 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.

6(16)

High-end desktop:

Test Library Initial rendering delay (ms)

Smaller is better

FPS avg

Bigger is better

Timeout delay avg (ms)

Smaller is better

Heap size avg (MB)

Smaller is better

LightningChart® JS 28 164.1 5 24

Competitor A 66 164.9 6 100

Competitor B 16 164 6 23

Competitor C 32 129.5 8 57

Competitor D 57 24.9 49 17

Competitor E 10 160.6 8 11

Competitor F 26 42.6 24 23

Competitor G 10 153.2 7 14

Competitor H 28 52.7 22 56

Competitor I 53 163.7 5 17

Competitor J 219 6.2 346 12

Competitor K 224 124.3 8 26



Competitor B 42 88.6 21 52








Competitor J 305 5 441 15

Competitor K 485 7.3 136 570


Competitor A 61 141 15 123

Competitor B 167 15.1 128 154

Competitor C 150 28.6 34 879

Competitor D 288 8.9 250 144




Competitor H 153 4.3 784 327


Competitor J 555 3 699 29

Competitor K 1719 1.5 819 188


Competitor A 1934 4.6 624 832

Competitor B FAIL FAIL FAIL FAIL

Competitor C 2336 7.5 145 1413

Competitor D 13949 FAIL 12941 1972

Competitor E FAIL FAIL FAIL FAIL

Competitor F FAIL FAIL FAIL FAIL

Competitor G FAIL FAIL FAIL FAIL

Competitor H FAIL FAIL FAIL FAIL

Competitor I FAIL FAIL FAIL FAIL

Competitor J FAIL FAIL FAIL FAIL

Competitor K FAIL FAIL FAIL FAIL


Competitor A 2301 2 1368 1333


Competitor C 4020 6 176 1806

Competitor D FAIL FAIL FAIL FAIL









Competitor A FAIL FAIL FAIL FAIL


Competitor C FAIL FAIL FAIL FAIL










Competitor A FAIL FAIL FAIL FAIL











10ch 1000000 dp/s

1ch 1000 dp/s

1ch 10000 dp/s

10ch 10000 dp/s

10ch 100000 dp/s

20ch 100000 dp/s

10ch 500000 dp/s

7(16)

FPS rates of different charts with different data rates, high-end desktop. Empty bar means: unable to

render, fail.

8(16)

Low-end desktop:

Test Library Initial rendering delay

(ms)

Smaller is better

FPS avg

Bigger is better


Smaller is better

Heap size avg (MB)

Smaller is better




Competitor C 60 59 10 35


Competitor E 51 60 6 4

















Competitor J 226 10.2 196 10




Competitor B 308 8.5 213 131


Competitor D 482 5.3 525 111




Competitor H 261 2.2 1441 252

Competitor I 980 FAIL 797 108


Competitor K 2849 1.5 738 73


Competitor A 1424 1.9 1465 765


Competitor C 3340 4.3 275 1031









LightningChart® JS 4812 49 20 1409

Competitor A 2500 0.8 3209 1246











20ch 100000 dp/s

1ch 1000 dp/s

1ch 10000 dp/s

10ch 10000 dp/s

10ch 100000 dp/s

9(16)

FPS rates of different charts with different data rates, low-end desktop. Empty bar means: unable to

render, fail.

10(16)

Low-end laptop:

Test Library Initial rendering delay (ms)

Smaller is better

FPS avg

Bigger is better


Smaller is better

Heap size avg (MB)

Smaller is better











Competitor J 119 15.3 125 12













Competitor K 883 2 722 48



Competitor B 438 5.6 318 142

Competitor C 459 10.6 133 40

Competitor D 648 3.1 688 123


Competitor F 249 11.2 115 52


Competitor H 455 1.5 1980 244


Competitor J 1072 2.1 906 38



Competitor A 1731 1 2145 814


Competitor C 5108 2.2 647 969









1ch 1000 dp/s

1ch 10000 dp/s

10ch 10000 dp/s

10ch 100000 dp/s

11(16)

FPS rates of different charts with different data rates, low-end laptop. Empty bar means: unable to render,

fail.

12(16)

Downsampling

Downsampling is used by Competitor C, reducing their overhead and increasing FPS, but they provide

erroneous visualization. Without downsampling, these performance results would have been much

worse.

Correct visualization by LightningChart:

Resampling used by Competitor C, the loss of data details and inaccurate visualization:

Downsampling really should not be used or tolerated by any software supplier making realistic and

believable applications.

13(16)

Other visualization errors

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). Incorrect

line rendering algorithm.

14(16)

Same ECG data visualized correctly with LightningChart® JS:

Conclusion – which is the fastest JavaScript chart?

Different chart charting libraries have their own strengths and selling points, but LightningChart’s

strength definitely is the exceptional rendering performance, allowing to build very advanced and

data-intensive applications, visualizing progressing line charts.

While almost all charts can provide with sufficient performance with 1000 data points, the differences

really start to show when the data rates and line series counts go up. All charts are just not designed

for these kind of data rates, and their Canvas/HTML5-based rendering is magnitudes slower than

WebGL rendering.

15(16)

LightningChart initial rendering time is smallest or amongst the smallest, 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.

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.

0

1000000

2000000

3000000

4000000

5000000

6000000

7000000

8000000

9000000

10000000

Data point count / s, keeping FPS over 30

16(16)

About LightningChart® JS

LightningChart® is registered trademark by Arction Ltd, a pioneer in high-performance charting, who

introduced the fastest, GPU accelerated charts, already in 2009 for Microsoft .NET technologies. Before

that, and ever since, the LightningChart® team has studied different technologies, prototyped,

researched, innovated new algorithms, which are now part of LightningChart® product lines, to

produce the absolute best performance for those advanced applications that really need it.

LightningChart® JS product line was released in 2019 and development is full-time by a large team.

LightningChart® team is ready to help!

javascript charts performance comparison - line charts

Documents