LightningChart JS Logo

JS Line Charts Performance Comparison

Original release date: May 2021 | Latest update: December 1st, 2021

Introduction to the JS line charts performance comparison

This test is a performance comparison between 12 different charting providers. The charting libraries included in this test are from major manufacturers who classify their charts as high-performance or the fastest. Additionally, this performance comparison considers some open-source and performance-oriented libraries.

We have excluded other charts that are either end-of-life, not supported anymore, or simply do not work. We are confident we have selected all the fastest charts for this comparison, and if we did not, inform us and we will incorporate them 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.

We have identified three different application types of line charts which are Static line charts, Refreshing line charts, and Appending surface charts. Each type of line chart has its own performance metrics that set the success/failure between libraries. The libraries tested were:

LightningChart JS v.3.3.0 | Highcharts 9.1.0 | SciChart JS v.2.0.2115 | 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.17 | Plotly.js 1.58.4 | ZingChart 2.9.3

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

    Device Hardware & Operating System Specifications

    js-line-charts-performance-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 Line 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.

    Static Line 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 10 million data points. The symbol * indicates the average of measurements with Google Chrome and Mozilla Firefox browsers. The symbol ** indicates that a chart library uses down-sampling, the produced data visualization is clearly incorrect.

    The next bar chart demonstrates that LightningChart JS line charts are the fastest charts when rendering 10 million data points with a loading speed of as little as 330 milliseconds.

    Meanwhile, competitor E has a loading speed of 735 ms and the third closest, hardware-accelerated competitor has a loading speed of 1,300 ms (more than one second).

    Competitors D, H, G, F, J, B, K, I, and C have a slow rendering process. Competitor I failed the test as it could not render the dataset.

    js-line-charts-performance-Static-line-charts-loading-speed-10-million-data-points
    js-line-charts-performance-Static-line-charts-loading-speed

    On average, LightningChart JS static line charts are 65.7x faster than non-hardware accelerated libraries.

    Whereas, on average, LightningChart JS static line charts are 7.5x faster than hardware-accelerated libraries.

    What did we measure? – Refreshing Line 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.

    Refreshing Line Charts: Performance Results VS Competitors

    In web data visualization, the CPU usage measurement is perhaps the most important performance metric that can be measured. If your web page has a chart component that uses 100% of the CPU, you can say goodbye to your good user experience.

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

    The graph illustrates how LightningChart JS uses only 57.6% of the CPU resources at a refresh rate of 10 Hz while the nearest hardware-accelerated competitor uses 93.6% of the CPU resources at the same given rate. Clearly, the competitor struggles much more to achieve the same results.

    On the other hand, non-hardware accelerated competitors (H, F, B, J, G) cannot achieve the 10 Hz refresh rate and use 100% of the CPU resources, leaving no chance to run any additional processes and compromising the UX.

    Competitors C, D (hardware-accelerated), I, and K failed the test.

    js-line-charts-performance-Refreshing-line-charts-loading-speed-1-million-data-points
    js-line-charts-performance-Refreshing-line-charts-loading-speed

    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, LightningChart JS renders the highest amount of data points (8 million) at the highest refresh rate of 4.3 Hz with a maximum data process speed of 34 M/s. The nearest competitor is non-hardware accelerate and renders 4 million data points at 4.0 Hz with a max. data process speed of 16 M/s.

    The nearest hardware-accelerated competitor (A) renders only 2 million data points at 3.7 Hz. Other competitors remain at the threshold of rendering 1 million data points at poor refresh rates.

    Competitor K failed the test.

    * Average result of Google Chrome and Mozilla Firefox. ** Even with minimal data amounts, chart was stuck in loading animation.

    js-line-charts-performance-Refreshing-line-charts-loading-speed-different-amount-data-points

    On average, LightningChart JS refreshing line charts are 14.2x faster than non-hardware accelerated libraries.

    Whereas, on average, LightningChart JS refreshing line charts are 9.1x faster than hardware-accelerated libraries.

    What did we measure? – Appending Line 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.

    Appending Line 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).

    The results of this test are more extreme. Here are the results of the appending test with 10 channels, 10,000 data points added every second (for each channel), and 15 seconds of displayed data history.

    LightningChart JS line charts are the only charts that do not use all the CPU resources. LightningChart JS achieves 60 FPS using only 21% of CPU.

    Even the nearest hardware-accelerated competitor (A) uses all the CPU leaving no additional resources to execute other processes. Competitors E and H have a similar result.

    The rest of the competitors have failed the test.

    js-line-charts-performance-Appending-line-charts-loading-speed-10-channels
    js-line-charts-performance-Appending-line-charts-loading-speed

    Individual performance comparisons:

    LightningChart JS VS other hardware-accelerated libraries

    The next table shows how LightningChart JS can handle 1 million incoming data points per second at the highest refresh rate with the minimum CPU usage. Competitor A struggles to handle even 100 thousand incoming data points as it has a poor FPS rate and uses full CPU resources. 

    Competitor D has the worse performance handling only 1,000 incoming data points per second using almost all the CPU resources.

    So, when compared to other hardware accelerated charts, LightningChart JS could process on average 19.8x more data while using 4.2x less CPU power and refreshing 4 times faster.

    js-line-charts-performance-Appending-line-charts-individual-comparison-hardware-accelerated

    On average, LightningChart JS appending line charts are 332.6x faster than hardware-accelerated libraries.

    Individual performance comparisons:

    LightningChart JS VS non hardware-accelerated libraries

    The next table shows how LightningChart JS can handle 1 million incoming data points per second at the highest refresh rate with the minimum CPU usage.

    Competitor E needs to use full CPU resources to render only 100,000 data points at a low FPS rate of 13.2.

    The rest of the competitors use all the CPU resources to render as little as 10,000 data points at FPS rates lower than 10.6.

    So, when compared to non-hardware accelerated charts, LightningChart JS could process on average 18,000x more data while using 4.1x less CPU power and refreshing 7 times faster.

    js-line-charts-performance-Appending-line-charts-individual-comparison-non-hardware-accelerated

    On average, LightningChart JS appending line charts are 516,600x faster than non hardware-accelerated libraries!

    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

    js-line-charts-performance-technical-requirements-for-pc-icon
    High-Level Desktop PC

    SoC/CPU

    RAM

    GPU

    Ryzen 9 5900X

    64.0 GB

    RTX 3080

    Static Line Charts

    Under a high-end device, the LightningChart JS static line charts can render a maximum dataset of 500 million data points and a line chart with 100 million data points can be loaded in only 6.5 seconds!

    js-line-charts-performance-Line Chart with large dataset

    Refreshing Line Charts

    LightningChart JS now officially enables real-time refreshing line data visualization. In the following test, it can be seen that LightningChart JS renders 2 million data points at a refresh rate of 10 Hz using only 31% of CPU resources.

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

    js-line-charts-performance-refreshing-line-charts-high-end-device-test
    js-line-charts-performance-refreshing-line-chart-high-end-test-visualization

    Appending Line Charts

    LightningChart JS officially enables real-time appending line data visualization. The following results demonstrate a seriously heavy application, with a high amount of channels and an extreme input frequency.

    In practice, this should cover any real need for real-time line data visualization applications, which are usually limited by input rate and total displayed data points count within other charting solutions.

    js-line-charts-performance-Appending-line-charts-high-end-device-test
    js-line-charts-performance-Appending-line-chart-high-end-test-visualization

    What is the fastest JavaScript chart?

    In conclusion: LightningChart JS v.3.3.0 has the smallest initial rendering time, it runs with a very compact memory footprint with the lowest CPU overhead, and the fastest response to mouse interactions.

    LightningChart JS reaches the highest usable data points in all the performed tests compared to other charting libraries.

    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.

    For more information on downsampling and other data visualization errors, please see the full performance comparison report (PDF).

    Remarkable observations:

    On a mid-level device,
    • LightningChart JS static line charts are 65.7x faster than non hardware-accelerated libraries and 7.5x faster than hardware-accelerated libraries.
    • On average, LightningChart JS refreshing line charts are 14.2x faster than non-hardware accelerated libraries and 9.1x faster than hardware-accelerated libraries.
    • On average, LightningChart JS appending line charts are 516,600x faster than non-hardware accelerated libraries and 332.6x faster than hardware-accelerated libraries.

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