SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
We are delighted to announce that the SciChart.js v2.1 build 2267 has now been released!
This backward-compatible update includes a number of improvements, fixes and some massive performance improvements for big-data & realtime rendering.
This release is a drop-in replacement and it is backward compatible for users of SciChart.js version 2.
We’ve used our expertise high performance computing in other platforms of SciChart to make massive improvements to chart rendering, updating and startup speed in SciChart.js v2.1.
Here is a quick summary of the improvements.
For big-data applications or dynamically updating charts, a large bottleneck was simply the time to create and update data.
By looking at memory optimisation and taking advantage of low-level code optimisations in WebAssembly we’ve improved the following DataSeries operations significantly, which results in much faster, more responsive charts. Especially noticeable in dynamic or real-time contexts.
DataSeries Operation | Before | After | Improvement |
Create a DataSeries with 1Million Datapoints | 35ms | 10ms | 3.5x faster! |
Get XRange for DataSeries with unsorted data (required for auto ranging) | 550ms | 3.4ms | 161x faster! |
Optimising DataSeries.clear() & append() with 1M datapoints (required for dynamically updating charts) | 386ms | 4.68ms | 82x faster! |
Optimising DataSeries.getNativeIndices() with 1M datapoints (required for candlestick charts) | 367ms | 22ms | 16x faster! |
DataSeries.insertRange() with 1k datapoints (required for prepending or inserting data) | 132ms | 0.69ms | 191x faster! |
DataSeries.removeRange() with 1k datapoints (required for removing a block of data) | 730ms | 0.33ms | 2,212x faster! |
Data interactions with SciChart.js are now significantly faster, whether you are manipulating data frequently in a Js chart, dynamically updating charts or simply visualising big datasets, you will notice large performance improvements when using SciChart.js v2.1 over previous versions.
Our Windows, mobile (iOS/Android) versions of SciChart have included data-point resampling for a long time. Datapoint resampling ensures the minimum viable data-set is displayed on the screen. Resampling is intended to be visually lossless, and automatic. It occurs for RenderableSeries before the series is rendered, if required.
This code, being part of our Visual Xccelerator Engine in C++ has now been included in SciChart.js WebAssembly module and brings massive performance improvements to SciChart.js for big-data scenarios.
Compared to version 2.0, SciChart.js v2.1 has significant performance improvements for chart rendering:
We’ve compared a number of JavaScript Chart Libraries such as Plotly.js, HighCharts, Chart.js vs. SciChart.js to evaluate chart drawing performance and published the results in a second article: SciChart is the Fastest JS Chart Library – and why that matters in today’s world.
Here’s why that matters in today’s world
Most JavaScript Chart Libraries can render a few thousand points before slowing down. Big-Data is a trend across industries and the amount of data is only getting bigger. If the speed of your JS Chart Library is not an issue now, it will be soon.
We’ve also created a demo showcasing SciChart.js ability to load millions of candlesticks, allowing you to visualise years of 1-minute bars in stock charts or cryptocurrency trading apps. Read more at the article below.
JavaScript Candlestick Charts: Plotting 1-year of 1-minute BTCUSD bars in JS – How Scichart.js optimises trading performance
Existing customers with an active support & updates subscription will get the update for FREE.
For new customers or prospects, please contact our sales team and we will be happy to help!
npm install scichart
Don’t forget to see our Tutorials on setting up Npm projects with Webpack!
For developers using vanilla JavaScript (no Node Package Manager), you can load SciChart.js directly in browser. Add this script to your Html head and away you go.
// Add this script to head
<script src="https://cdn.jsdelivr.net/npm/scichart@2.1.2267/_wasm/scichart.browser.js" crossorigin="anonymous"></script>
// Now Configure SciChartSurface in code to load the wasm file from CDN
SciChart.SciChartSurface.configure({
dataUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2267/_wasm/scichart2d.data",
wasmUrl: "https://cdn.jsdelivr.net/npm/scichart@2.1.2267/_wasm/scichart2d.wasm"
});
// Now create a SciChartSurface as you would normally!
const { sciChartSurface, wasmContext } = await SciChart.SciChartSurface.create("div-id");
We’ve collected all the links to help you get started under scichart.com/downloads. Go there and take a look. If you have any questions just ask!
Best regards,
Andrew
[SciChart Team]