SciChart.js Preview – Creating Real-time JavaScript Stock Charts with WebAssembly & WebGL

At SciChart we specialise in high performance real-time chart libraries. Until now, we’ve focused on the native platforms like WPF, iOS/Android but a very popular tech stack for developing trading applications is JavaScript & Typescript.

Why is JavaScript so popular for trading applications?

Well, JavaScript is ubiquitous, it’s found in every browser, on mobile devices and desktops, you can create fully fledged desktop apps with it, and over the years it’s been getting better and better. What we’ve found though is that for some operations JavaScript is just a fraction of the speed & performance of native programming languages such as C++, and for what we do – realtime high performance charts – speed really matters …

Take our WPF chart library for example, we are able to draw up to 10 Billion data-points in a real-time streaming example. “Would you ever want to draw 10 Billion data-points?” you ask. Well, maybe not, but you might want to draw 1 million, or even just 100,000 and not have the application slow down and hang on you … How many times have you wanted to create JavaScript Stock charts and found them to be slow once you start to use real-time data feeds? The last thing you want is for your trading app to slow down, lock up or have performance problems in a live real-time trading session.

Enter SciChart.js

SciChart.js is going to be different from other JavaScript Stock chart libraries. We’re going to focus on the use-case of high-performance, real-time data visualisation in browser-based financial, trading, medical, scientific & big-data applications.  Rather than using the built-in libraries and tools to create a chart, such as HTML5 canvas, or vanilla JavaScript, we’re building SciChart.js using our own in-house, proprietary WebAssembly / WebGL rendering engine called Visual Xccelerator®.

Visual Xccelerator® is incredibly fast. We use it on our WPF charts and have achieved ridiculous performance numbers. If you want to visualise millions, or even billions of data-points in real-time or big-data applications with our WPF Chart Library (for Windows), or our iOS Chart Library or Android Chart Library, then you can with SciChart + Visual Xccelerator®.

We’ve achieved a technical feat by cross-compiling our in-house drawing engine engine to JavaScript through WebAssembly. Under the hood it uses WebGL 2 and our proprietary algorithms for drawing lines, shapes, and polygons incredibly fast. Think of it like a game-engine, perhaps a little like Unity, but we only focus on the primitives for drawing charts & graphs.

By leveraging WebAssembly and WebGL in JavaScript Charts we’re able to re-use our existing codebase, some 3 million lines of code, for JavaScript apps. By compiling to wasm and writing our chart API in TypeScript we will be able to target a host of JavaScript frameworks.

• Vanilla JavaScript
• TypeScript
• React
• Node.js
• Vue.js

We’re building SciChart.js to work with all the above, whilst leveraging the most cutting-edge technologies in modern browsers such as WebAssembly / wasm, WebGL, WebGL 2 and possibly WebGPU in the future too. It really will be a game changer.

Demonstrating SciChart.js Candlestick Charts

We’ve created a real-time Javascript Stock Chart example using SciChart.js WebGL WebAssembly Charts which is showcased below:

This example includes:

• A mock data-feed providing price & volume ‘ticks’ or trades
• A candle aggregator
• An OHLC or Candlestick chart to display the data
• 20 period and 50 period moving averages
• Volume bars

The whole thing runs under a timer, it’s not connected to a real price trading data-feed, but it is incredibly fast, showcasing the potential performance of SciChart.js as a Javascript Stock Chart. We’ve added zoom and pan modifiers so you can use the mouse-wheel, or touch, and pan back and forth. Soon we will be adding tooltips, legends and more so that when we release, you will be able to create realistic JavaScript Stock Chart & trading applications with SciChart.

The Real-Time Ticking Stock Chart Example API Code

Our development of SciChart for JavaScript is still in progress, hence why we haven’t released a preview or BETA version just yet. Nevertheless, we’d like to share some example code so you can see how the SciChart.js API looks. The below is actually TypeScript with React, but gives an idea how the API looks.

Declaring a SciChartSurface in JavaScript

We begin by declaring a canvas element where we are going to draw our chart in HTML. We are undecided at this time whether we’ll require a <canvas> or a <div> element but at the moment declaring a canvas in HTML with an Id is sufficient to declare the chart.

<div>
    <canvas id={canvasElementId} />
</div>

In our code we can then instantiate a SciChartSurface and bind to the canvas. Our API is going to change, but for now we use a helper function called drawInitialChart which creates a webAssembly context with our 2D/3D WebGL drawing engine bound to the canvas above. Using this we can create the SciChart chart controls using an API that will be familiar to users of our WPF, iOS or Android charts.

// Instantiates the SciChartSurface with previously created wasmContext
const sciChartSurface = new SciChartSurface(wasmContext);
// Create an XAxis of type CategoryAxis
const xAxis = new CategoryAxis(wasmContext);
xAxis.labelProvider.labelFormat = ENumericFormat.Date_HHMM;
sciChartSurface.xAxes.add(xAxis);
// Create a YAxis of type NumericAxis for prices with AutoRagne
const priceYAxis = new NumericAxis(wasmContext);
priceYAxis.autoRange = EAutoRange.Always;
sciChartSurface.yAxes.add(priceYAxis);
// Create a hidden YAxis for the volume bars at the bottom of the chart
const volumeYAxis = new NumericAxis(wasmContext, {
id: AXIS2_ID, axisAlignment: EAxisAlignment.Left
});
volumeYAxis.isVisible = false;
volumeYAxis.autoRange = EAutoRange.Always;
sciChartSurface.yAxes.add(volumeYAxis);

Declaring Series and Data

Once you’ve declared a SciChartSurface with XAxis and YAxis (in this case two YAxes), you can then declare series. Following on from the API in our WPF, iOS & Android charts we seperate out the concept of RenderableSeries and DataSeries.

RenderableSeries present the data (e.g. a Line, Candlestick, Mountain series), while DataSeries contain the data. These follow a CRUD pattern (Create, Update Delete) so that you can dynamically change the data at run-time to get real-time charts.

// Declare the data for our Candlestick series
const priceDataSeries = new OhlcDataSeries(wasmContext);
// Declare our Candlestick series with priceDataSeries as data-source
sciChartSurface.renderableSeries.add(
    new FastCandlestickRenderableSeries(wasmContext, {
        strokeThickness: STROKE_THICKNESS,
        dataSeries: priceDataSeries,
        dataPointWidth: 0.4
    })
);

Once a RenderableSeries / DataSeries pair has been created, you can update, insert or append data to the DataSeries dynamically as follows. SciChart automatically redraws.

const fillPriceDataSeries = () => {
const generatedData = getPricesData();
const { xValue, openValue, highValue, lowValue, closeValue, volume } = generatedData;
if (isCurrentDataPoint) { 
    // Update the current latest Open, High, Low, close value 
    const length = priceDataSeries.count(); 
    priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue); } else { 
    // Append new values dynamically for X (Date), Open, High, Low, close 
    priceDataSeries.append(xValue, openValue, highValue, lowValue, closeValue); }
};

SciChart.js Release Date

SciChart.js – our GPU Accelerated 2D/3D JavaScript Chart has now been released! In fact, we have just released a version 2 (November 2021) which is a Huge upgrade to v1.
If you want to learn more about SciChart.js or start a trial, or test drive the features by looking at our Js Charts Demo, click the link below.

SciChart.js JavaScript Chart Library

About SciChart: High Performance Realtime Charts

SciChart provides high performance realtime chart components on the WPF (Windows), iOS, Android and JavaScript platforms. It is our goal to create the best cross-platform Native WPF, iOS, Android and JavaScript 2D & 3D Charts in the world, focusing on performance, developer productivity, ease of use, depth of features and enterprise-grade tech support.

If you have a question about what SciChart’s WebGL / WebAssembly Charts can offer you, or if you would like to get a quote, please contact us. Our friendly, helpful support team will be glad to help!

Contact Us