JavaScript Candlestick Charts: Plotting 1-year of 1-minute BTCUSD bars in JS – How Scichart.js optimises trading performance
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 see. That’s not just a charting issue, it’s a profit problem.
For example if you switch to 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 visualise 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, so 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 to see your decision-making is impaired, and competitive advantage is lost.
Our goal is to become the data visualisation partner of choice to organisations with complex and mission-critical demands.
Our goal is to become the data visualisation partner of choice to organisations with complex and mission-critical demands, and as more and more organisations seek to use Js for delivering mission-critical charting 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.
.tg {border-collapse:collapse;border-color:#ccc;border-spacing:0;}.tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:0px;color:#333; font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}.tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:0px;color:#333; font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}.tg .tg-zv4m{border-color:#ffffff;text-align:left;vertical-align:top}
| Chart Vendor | # Candlesticks* | Equivalent to |
|---|---|---|
| Chart.js | 100 | ~3 hours of 1-minute bars |
| Plotly.js | 1,000 | ~1 day of 1-minute bars |
| HighCharts | 1,000 | ~1 day of 1-minute bars |
| TradingView | 5,000 | ~3 days of 1-minute bars |
| SciChart.js | >10,000,000** | ~20 Years of 1-minute bars |
* 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; permitting datasets hundreds, or even thousands of times larger than what is currently possible.
Here's the code 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 behaviour 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 -enough for 20-years of 1-minute stock, forex or crypto (Bitcoin) data. Now your only problem is getting the data into the app (bandwidth) but we suggest to contact us as we have solutions for that too.
Conclusion
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 analyse 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, and as the volume of data grows this issue is simply going to get worse – and performance will suffer.
That's why we are so proud of what we have done: SciChart.js enables better decisions for traders and institutions. Better decisions, better performance, better results.
Find out more
To find out more about SciChart.js: High Performance JavaScript Charts see here.
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) where 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.