SciChart.js is a High Performance WebGL / WebAssembly chart library. Out of the box SciChart.js can achieve incredible performance vs. other JavaScript Chart Libraries on the market, capable of rendering millions of datapoints. However, if you want to get the best possible performance out of SciChart.js then read on!
DataSeries Optimisations
Data is Sorted in X (TimeSeries Data) is Faster than Unsorted (Scatter Data)
SciChart.js uses a number of optimised algorithms when your data is sorted in the X-direction.
Algorithms such as Hit-Test (used by cursors, tooltips), indexing and drawing have a faster path when the data is sorted in X vs. unsorted.
We recommend to ensure time-series data is sorted in X for the best performance, but SciChart.js will still draw charts with big data with unsorted (scatter) data just fine!
Specify Data Distribution & Properties
SciChart will automatically detect the distribution of your data & properties to choose the right algorithms for fastest and most accurate drawing. For example, properties that SciChart detects include:
- Data is Sorted in X direction
- Data contains NaN (Not a Number)
- Data spacing in X is evenly spaced
These properties allow us to choose the best & fastest algorithms for drawing, but detecting these properties takes some CPU time.
You can tell SciChart.js these properties in advance to save the time when creating dataseries, and appending and updating data.
Enable Resampling
We've enabled drawing optimisations which allow for faster rendering / drawing path in Line, Column, Candlestick, Mountain and Band Series by using data-point resampling.
Set the property FastLineRenderableSeries.resamplingMode = EResamplingMode.Auto to take advantage of this faster drawing path.
Set the property FastLineRenderableSeries.resamplingMode = EResamplingMode.Auto to enable new drawing optimisations. Note this property is enabled by default.
To read further about this property see the page on Data Resampling.
Batch Updates to DataSeries
SciChart DataSeries have functions like append(), insert(), update(), removeAt() where you can modify the data that the chart is showing. This allows you to achieve real-time updates in SciChart.
It is faster to update the DataSeries in batches aka using functions appendRange(), insertRange(), removeRange() where you modify an array of data than to use single-point changes.
Initialize DataSeries with Capacity
Internally, SciChart DataSeries use a geometric resizing algorithm which reserves more memory than needed as you call append(), appendRange(). Starting with a new DataSeries and calling .append() many times may result in several resizes of the underlying vector as the DataSeries grows.
To avoid this, and reduce unnecessary allocations, if the size is known ahead of time you can initialize a DataSeries with capacity.
Multi Chart Optimisations
Use One WebGL Context per SciChartSurface
The function SciChartSurface.create() uses a single shared WebGL context for all chart surfaces. This allows us to have multiple charts (up to hundreds of charts) in a single webpage.
The function SciChartSurface.createSingle() creates one WebGL Context per SciChartSurface. This gives faster drawing performance but will quickly hit the limit of WebGL contexts in a webpage.
Approximate WebGL Context Limits per browser can be found below.
Browser | Max WebGL Contexts per Page |
Firefox (Windows, macOS) | 300 |
Chrome (Windows, macOS) |
16 |
Edge (Windows) | 16 |
Safari (macOS) | 16 |
Safari (iOS) | 16 |
Chrome (Android) | 8 |
Sharing WebGL Drawing with SubCharts
TODO SUBCHARTS
Text Label Optimisations
Native Text Labels
TODO NATIVE TEXT
Shared Label Cache
Previously labels were cached per axis, but it is now possible to reuse cached labels across axes and across charts. This improves label drawing performance in multi-chart scenarios.
You can enable this globally by setting:
Or you can enable it for a particular axis by setting useSharedCache = true on the axis options, or directly on the axis labelProvider.
This will give significant benefit if you have multiple charts with very similar sets of labels, even if they are not on screen at the same time. Labels are retained in the cache for a minute, so switching to a different chart that has some or all of the same labels will reuse the labels, saving a few hundred ms.
Async Labels
Async labels was available in earlier versions of ScIChart.js, but has been deprecated in favour of Native text labels below.
Misc Optimisations
Use the Fastest Browser!
By far, the fastest browser for WebGL, WebAssembly and JavaScript is Google Chrome.
Browsers such as Safari, Firefox have slower execution of JavaScript code. Please bear this in mind when comparing performance or when making recommendations to your customers!
Retina macOS Performance
When SciChart.js is used on a high resolution display such as Retina, the chart will be rendered at 4x the number of pixels visible on screen. For example a 1,000 x 1,000 chart (1M Pixels) will be rendered at 2,000 x 2,000 (4M Pixels) before scaling down to the correct size.
Higher number of pixels means more work for the browser to display the chart. If you notice any performance degredation on your application you can disable Dpi scaling using the code below.
Also, we recommend use of Google Chrome browser as this has by far the best performance metrics, compared to Safari or Firefox, which both struggle to render large canvases.
Dual GPU machines or Macbook Pro
Some Windows PCs and many macOS computers such as Macbook Pro have dual GPUs. A slower integrated GPU which uses less battery power, and a faster dedicated GPU which has better rendering performance.
When using a browser (Safari or Chrome) on macOS, the operating system by default picks the slower, integrated GPU. Here's how you can check and force the dedicated GPU.
Checking which GPU you are using on macOS or Windows
In Chrome on macOS you can navigate to chrome://gpu in the address bar to inspect which GPU the browser is currently using.
Scroll down to GL_RENDERER. On the right you can see the current GPU e.g. 'AMD Radeon Pro 5500M' or 'Intel UHD 630'
Forcing the Faster GPU on macOS
If you are using the integrated GPU and want to force the faster GPU on macOS, you can use an application called gfxCardStatus to force switching to the faster and more powerful GPU. Restart your browser and do the test again. This will improve WebGL performance!
Forcing the Faster GPU on Windows
There are applications which will allow you to switch GPU on Windows as well. Make sure you restart your browser and do the GL_RENDERER test again.
Keep Up to Date!
We are always working on improving performance of the overall charting engine.
Staying up to date helps to ensure you have the latest algorithms and optimisations for fast, efficient charting with SciChart.js.
Still Need Help?
If after all that, do you still need help?
If you have a performance question about SciChart.js or need further improvements and you are a paid (licensed) customer, then contact-us and our team will do their best to help!