Building professional React financial charts is about much more than putting a candlestick chart on a screen. Whether you're building a crypto exchange, a stock trading app or an institutional terminal, you need to handle large historical datasets, real-time updates, technical indicators, drawing tools and synchronized chart panes, all without the UI slowing down.
That is exactly what we wanted to explore with SciTrader.
SciTrader is a high-performance financial charting and trading application that we’ve built using React, TypeScript and SciChart.js. Alongside the application itself, we’re also working on a SciTrader SDK for JavaScript and React, designed to make it easier for developers to build sophisticated financial applications on top of SciChart. This will complement the SciTrader SDK in iOS / Android which is already used in exchange applications around the world.
In this article, I want to walk through what we’ve built, how the architecture works and why we made some of the decisions we did.
What is SciTrader? A React Financial Charting App
SciTrader is a web-based financial trading application built in React, designed to demonstrate what can be achieved with SciChart.js in a realistic financial application.
You can currently view the SciTrader demo application at https://scitrader.io -> click on Web App.
The front-end is built entirely in React and TypeScript, using SciChart.js v6 for the charting layer. On the backend, we’ve built a data server in C# and .NET, using QuestDB to cache and serve market data. What we wanted to create was not just another isolated financial chart demo.
We wanted something that behaved much more like a real trading application. That means combining:
- Large historical datasets with Real-time market data
- Multiple timeframes down to 1-second charts, up to 1-week charts
- Watchlists with sparklines and, Market-depth panels
- Financial chart types: Candlestick, Heiken Ashi, OHLC and more
- Technical indicators including oscillators, averages, and volume-based analysis
- Multi-pane layouts
- Drawing and annotation tools: fibonacci retramcenets, channels, pitchforks and more.
- Exchange integrations: starting with Coinbase & Binance plus extensibility for more.
- Browser-side caching of historical data.
- Extensible APIs for developers such as custom studies/indicators, custom data sources.
The result is SciTrader.
Above: Deep dive walkthrough the SciTrader application and SDK for creating React financial charts
Handling Large Datasets in React Stock Charts
One of the first things we wanted to demonstrate was how the application behaves with a genuinely large amount of financial data.
For example, in SciTrader we can open BTC/USD on a one-hour timeframe and go all the way back to 2015. That data is loaded from the server and then cached locally in the browser. This is important because once the browser already has the data, we don’t necessarily want to hit the server again every time the user refreshes the page or revisits the same market. By caching locally, we can reduce unnecessary network requests and make subsequent interactions much faster.
For a financial application, this becomes especially important when users are constantly moving between instruments and timeframes.
Multiple Timeframes, Down to One Second
SciTrader supports a range of timeframes. You can move between one-hour, 15-minute, five-minute, one-minute and even one-second candles.
The one-second timeframe is particularly interesting. In the current implementation, we serve approximately two days of one-second bars, which works out at around 170,000 candles. That is a substantial amount of data to render interactively in a browser. You can zoom right down to the latest second and watch the chart update as new trades arrive.
This is exactly the kind of scenario where rendering performance really matters. It is not enough for a chart to display a lot of data. It also needs to remain responsive while the user zooms, pans, switches timeframes and interacts with the rest of the application.
Progressive Historical Data Loading
Another part of the architecture is how we load historical data. We don’t necessarily want to load every possible historical candle before the user sees anything. Instead, as you scroll backwards in time, SciTrader can fetch more data from the server. This gives us a much more scalable model.
The user sees the chart quickly, and additional history is requested when it is actually needed. Combined with local caching, this allows us to manage large historical datasets without placing unnecessary pressure on the server or the browser.
Watchlists and Instrument Switching
A trading application needs more than charts. Users also need a quick way to navigate between markets.
In the SciTrader demo, we’ve included watchlists containing some of the highest-volume cryptocurrency pairs. We have markets denominated in USD as well as BTC.
When you switch between watchlists, we fetch the 24-hour history for each instrument and render that information as a sparkline together with its 24-hour change. Clicking on an instrument immediately brings up that chart while keeping the timeframe you were already using.
One thing I particularly wanted to demonstrate here is responsiveness. You can move rapidly between instruments and the application remains extremely fast. There is very little noticeable latency when loading the candles and updating the chart. That is the result of the architecture we’ve put underneath the application, rather than simply the visual layer.
Candlestick, OHLC, and Heikin Ashi Charts in React
Different traders prefer different ways of looking at the market, so we’ve included several common financial chart types.
In SciTrader, you can switch between:
- Candlestick charts
- OHLC bars
- Line charts
- Mountain charts
- Heikin Ashi charts
Heikin Ashi is calculated dynamically on the client. That gives us a nice example of how derived financial data can be calculated inside the application and fed directly into the visualization layer. The chart representation can change without requiring an entirely different backend data source.
Technical Indicators and Studies
We’ve also built a range of technical indicators into SciTrader.
These include familiar indicators such as:
- Volume bars, Volume Profile
- Relative Strength Index, or RSI
- MACD
- Simple Moving Average
- Exponential Moving Average
- Weighted Moving Average
We’ve also included some more advanced studies such as:
- Donchian Channels
- Keltner Bands
- Ichimoku Cloud
- Average True Range
- On-Balance Volume
- Money Flow Index
The important thing here is that these indicators are not simply painted onto one chart. Some belong on the main price chart, others need their own pane.
RSI and MACD, for example, are generally displayed in separate panels with their own Y axes. SciTrader handles this dynamically.
Managing Multiple Chart Panes
When you add studies to the application, you can resize the panes, reorder them, maximize them and remove them. That flexibility is important in a real trading environment.
Different users will want to organize their workspace differently. Some may care more about RSI. Others may want MACD, volume or several proprietary indicators visible at once.
What we want is for the application to remain responsive even as the number of studies and chart panes increases. This is one area where SciChart’s rendering performance becomes particularly valuable.
Managing and Customizing Studies
If you open the Manage Studies panel, you can see the indicators currently attached to the chart.
From there, you can remove studies you no longer need or modify the properties of the ones you want to keep. This is where the architecture starts to become particularly interesting from a developer perspective.
A study in SciTrader is not simply a line on a chart. It represents the calculation, configuration, data dependencies and rendering behaviour of that indicator. That same concept is carried through into the SciTrader SDK.
Drawing and Annotation Tools
We’ve also added a set of financial drawing tools.
These include:
- Channels
- Fibonacci retracements
- Pitchforks & Fans
- Trend lines, Rays
- Take-profit & Stop-loss annotations
- Elliot waves and patterns e.g. XABCD
These drawings can be edited after they are placed on the chart. They are also persistent when you change timeframe. That behaviour sounds simple, but it is important.
A trend line should remain connected to the same time and price relationship when the chart changes. It should not simply stay at the same screen coordinates. For a trading application, the annotations need to remain meaningful as the user changes the view.
Custom L2 Order Book Microstructure Visualisation in React
As wel as technical indicators that operate on Open High Low Close + Volume market data, we've included some demos of using L2 (Level-2) order book data in the SciTrader application, to show how you could built microstructure visualisation in React.
Historical Order Book Heatmap in React
A historical order book heatmap is built by aggregating Level 2 Order Book data into candle-sized buckets with a fixed price increment depending on zoom level. The historical order book levels are rendered in the front-end as a heatmap, showing buy/sell walls or major liquidity levels on the chart. Hovering the heatmap shows the cumulative bid/ask at that level (amount of funds required to move the market to that level).
Book Imbalance Indicator in React
A second indicator using L2 data is the Book Imbalance indicator in SciTrader. This uses the historical L2 book data to compute the relative imbalance between bids & asks, and is rendered as a mountain chart in a separate pane.
You can see an example of both L2 indicators below:
From the Application to the SciTrader SDK
The SciTrader application is one part of what we’re building to showcase Financial Charts in React. The other part is the SciTrader SDK.
We already have SciTrader SDKs for iOS and Android, and we’re now bringing that concept to JavaScript and React.
The idea is to give developers a higher-level financial framework built on top of SciChart.js.
What is SciFinanceChart?
SciFinanceChart acts as the core financial chart abstraction in the SciTrader SDK.
It brings together: financial chart rendering, studies (indicators), chart panes, market data, exchange integrations and data routing. You can create a SciFinanceChart directly or create one with a collection of predefined studies. For example, you might want candlesticks, volume and moving averages on the main chart, while RSI and MACD to sit in separate chart panes.
Rather than developers having to manually wire all of these components together every time, the SciTrader SDK is designed to understand how these elements relate to one another.
Designing the SDK for Extensibility
A financial SDK cannot assume that everyone uses the same exchange or the same indicators. We've designed the SciTrader SDK for extensibility, allowing you to build your own exchange integrations by implementing IRemoteExchange.
Similarly, you will be able to develop custom studies (indicators calculations plus rendering plus chart pane placement) by implementing IStudy.
With these two, and combined with our rich and powerful DataManager that routes OHLCV data and L2 data from the exhange through to studies, you can completely customise your financial trading apps using the SciTrader SDK.
Why We Built SciTrader
At SciChart, we’ve always focused heavily on performance. But performance is only one part of building a great financial application.
Developers also need architecture. They need sensible ways to manage data, coordinate multiple charts, connect to exchanges, create indicators and expose configuration to users. SciTrader is our attempt to bring those pieces together.
SciChart.js provides the high-performance visualization layer, the SciTrader architecture adds concepts specifically designed around financial applications, significantly shortening the development time of building trading apps, exchange applications and financial apps by 6-12 months.
The SciTrader SDK will give developers the foundation for building sophisticated trading platforms without having to re-invent every part of the stack.
Who is SciTrader For?
SciTrader is relevant to developers building applications such as:
- Cryptocurrency trading platforms
- Stock trading applications
- Brokerage interfaces
- Institutional trading terminals
- Financial dashboards
- Market data platforms
- Portfolio analytics applications
- Quantitative analysis tools
- Proprietary fintech products
The common requirement across all of these applications is that they need to handle large quantities of data while remaining responsive.
The user should be able to zoom, pan, switch markets, change timeframes, add indicators and modify studies without the interface feeling slow.
Try SciTrader
You can try the current SciTrader web application at: https://scitrader.io -> click on Web App.
The staging application lets you explore the market data, different timeframes, technical indicators, drawing tools, watchlists and other functionality I’ve described here.
We are also working towards making the SciTrader SDK available as an NPM package, so developers will be able to start building their own React and TypeScript applications using the same architecture.
There is much more we want to do with SciTrader, but I think the current application already gives a good indication of where we are heading.
If you are building a trading platform or financial application and performance matters, I’d encourage you to take a look.
Top comments (0)