By default, SciChart.js uses resampling of data to ensure the minimum viable data-set is displayed on the screen. SciChart.js resampling algorithm is visually lossless, and automatic. It occurs for RenderableSeries before the series is rendered, if required.

Resampling methods make assumptions about the data in order to produce a valid output. SciChart.js provides variety of the resampling modes internally, and auto detects the most suitable one.

Disabling Resampling or Setting Mode

By default EResamplingMode.Auto is applied to DataSeries. you can also disable resampling on a per-series basis by setting BaseRenderableSeries.resamplingMode = EResamplingMode.None.

import { EResamplingMode } from "scichart";

// By default, EResamplingMode.Auto enables resampling (where available)
const lineSeries = new FastLineRenderableSeries(wasmContext, { resamplingMode: EResamplingMode.Auto } );

// Setting the property to none disables resampling for this series
const lineSeries = new FastLineRenderableSeries(wasmContext, { resamplingMode: EResamplingMode.None } );

Other resampling modes are also available in the EResamplingMode enumeration. We suggest leaving these to Auto or None unless directed to by SciChart.js support.

Globally enabling or Disabling Resampling

In SciChart.js v2.1 and above, it is possible to globally enable or disable resampling for all series by setting the SciChartDefaults.enableResampling property.

import { SciChartDefaults } from "scichart";
SciChartDefaults.enableResampling = false;

Data Distribution

For correct resampling, the data distribution matters. For example. SciChart.js uses different drawing algorithms if the data is evenly spaced in X vs not evenly spaced, for unsorted vs. sorted data and for when the yValues contain NaN (not a number) or not. All this is to balance optimal performance while maintaining visual accuracy.

Unless specified, SciChart.js will calculate:

• If your data is sorted in the X-direction or not
• If your data is uniformly spaced in the X-direction or not
• If your data contains NaN (Not a Number - used to render gaps) in the Y-values or not

When specified SciChart.js will not calculate these flags. This improves performance on data append/update/insert/remove operations.

import { SciChartSurface, XyDataSeries } from "scichart"; 

const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-div-id");
const dataSeries = new XyDataSeries(wasmContext, {
        // Optional: pass data distribution properties (this improves performance)
        // else SciChart.js will auto-detect these properties as you update data
        dataIsSortedInX: true,
        dataEvenlySpacedInX: true,
        containsNaN: false,
});

// These properties may also be set after the dataseries has been created
dataSeries.isSorted = true;
dataSeries.containsNaN = true;

Resampling effect on Performance

For smaller datasets Resampling will have no effect on performance. SciChart.js is already very highly optimised for datasets up to 1 million datapoints.

For larger datasets, Resampling has a linear trade-off by dynamically reducing the data to the minimum viable set for visually identical drawing on the fly. You will start to see performance improvements from around 100,000 datapoints or more.

With SciChart.js resampling, we were able to render 10,000,000 (ten million) data-points in under 25 milliseconds:

We were also able to achieve 10,000,000 (10 million) candles in a Candlestick Chart, enough to draw the entire history of Bitcoin BTC/USD in a 1-minute chart! Read more in the article below.