How SciChart.js transforms trading performance

How Scichart.js Optimizes Trading Performance for JavaScript Candlestick Charts

Almost every trading system, trading platform, quantitative trading or retail trading platform or exchange needs to show the price data of financial instruments. By far the most popular chart type for traders is a Candlestick Chart, but there’s a problem.

The problem is that there often seems to be an inverse relationship between the amount of data that traders want to see and the data that they are able to view. That’s not just a charting issue, it’s a profit problem.

For example, if you switch to a 1-minute timeframe, the application might limit you to viewing at most a few days of data, which can be frustrating. What if you want to view more data than that? What if your application requirements are to visualize a year of 1-minute OHLC bars in a JavaScript Candlestick Chart?

The reason why such limitations exist in most applications is performance. Charts are notoriously compute-heavy, require a lot of CPU resources to draw and can be slow. In particular, JavaScript charts tend to be even slower and more resource hungry. This means the limitations of how much data you can view are usually larger.

Ultimately, this issue goes beyond a charting issue to a trading performance issue. If you cannot see what you need your decision-making is impaired, and competitive advantage is lost.

Our goal is to become the data visualization partner of choice to organizations with complex and mission-critical demands, and as more and more organizations seek to use JS for delivering financial and trading charts we needed to solve this challenge. 

Our goal: to make it possible to view a month of 1-minute data, or 3-months, or even a year, or five years.

Performance of JavaScript Candlestick Charts

Below is a table comparing a few leading JavaScript Chart libraries and their performance (drawing speed) for displaying candlestick charts.

* Number of Candlesticks before significant slowdown observed: under 20 FPS

** 1 Million candles with SciChart.js v2.0. With v2.1 10 Million or more

Pretty much all the existing options for HTML5 or JavaScript Candlestick Charts have a limit of a few thousand OHLC bars (candles) before experiencing significant slowdown. That’s around a day or two of 1-minute bars.

SciChart.js: 1-Year of Bitcoin/USDollar Candles

We created a demo to showcase best-in-class performance (drawing/rendering speed) of SciChart.js compared to other JS chart libraries, such as HighCharts, Plotly.js, TradingView and Chart.js.

SciChart.js is the only chart library able to draw more than a million candles. Our Visual Xccelerator™ rendering engine permits datasets hundreds, or even thousands of times larger than what is currently possible.

Here’s the code you need below:

• Github github.com/ABTSoftware/SciChart.JS.Examples/…/BigDataCandlestickCharts</
• Codesandbox (Run example in your browser) githubbox.com/ABTSoftware/SciChart.JS.Examples/…/BigDataCandlestickCharts

We’ve packaged 1-year of BTC/USD (Bitcoin / Dollar) 1-minute data from 1st Jan 2017 – 31st December 2017 into the demo as a CSV file. Binary would be more efficient, but for the purposes of the demo it’s fine.

The price data is parsed and loaded into SciChart.js, and we add a 50 moving average, 200 moving average and volume bars to the chart. Zoom and pan behavior is added onto the chart.

Once the chart is loaded, you can zoom right into the dataset and right out using the mouse wheel, or by dragging on the chart. This showcases the performance advantage of SciChart.js.

We’ve built a JS chart library capable of drawing up to 10 million candles. That’s enough for 20 years of 1-minute stock, Forex or Bitcoin data. Now your only problem is getting the data into the app (bandwidth) but we suggest you contact us as we have solutions for that too.

How to Implement Candlestick Charts in TypeScript

Creating high-performance financial and trading applications often for traders demands zero latency. You probably already know that most browser-based libraries are susceptible to falling apart when data volumes get intense. That is where SciChart enters the picture. 

Let’s look at how you can build your own high-performance JavaScript candlestick chart using TypeScript.

First, you need to set up your SciChartSurface and define a CategoryAxis for your x-axis to keep those weekend gaps from ruining your layout. 

To get those candles on the screen, you can initialize a FastCandlestickRenderableSeries and link it to an OhlcDataSeries. 

While other libraries might stutter, SciChart handles datasets with over 100 million data points without lag. Simply pass in your timestamps and your OHLC values, and the engine takes over.

As for custom styling, you can easily tweak your ‘up’ and ‘down’ fill colors to match your brand using our PaletteProvider API. Because you’re using TypeScript, the autocompletion makes navigating the API feel much more intuitive. It almost feels like the code is writing itself. 

Without TypeScript, a developer might constantly jump between their code editor and the documentation to check the property names. As you type, a dropdown menu appears with the exact methods and properties available for a FastCandlestickRenderableSeries. This eliminates guesswork and prevents common runtime errors.

If you get stuck, the technical support team, or our AI assistant, can get you back on track. It’s refreshing to use a tool that was built by developers, for developers.

See How SciChart Can Help Your Trading Charts Perform

If you’re looking at using JavaScript to build trading apps, stock chart apps or candlestick charts, and you’re worried about performance, speak to us.

If you cannot analyze large datasets in a professional trading environment due to limitations in the chart library itself then we are talking about restricting individual or institutional performance. As the volume of data grows, this issue is simply going to get worse, and performance will suffer.

That’s why we’re so proud of what we have done:  SciChart.js  enables better decisions for traders and institutions. 

Find out more

To find out more about SciChart the company, or ask us a question to see how we can help with your stock, Forex or crypto trading applications, use the contact us form and get in touch.

Start using SciChart.js Today

SciChart.js is now available with a free community edition (no trial, sign-up or credit card required). You can try out the library commercially or use it in a non-commercial application. If you have a question, or would like to give feedback, contact us.

Contact UsGet Started With SciChart.js