How SciChart.js transforms trading performance
Tags: javascript, webdev, programming, trading
Published: 2024-03-13 15:17:47

<!-- wp:heading -->
<h2 id="javascript-candlestick-charts-plotting-1-year-of-1-minute-btcusd-bars-in-js-how-scichart-js-optimises-trading-performance">JavaScript Candlestick Charts: Plotting 1-year of 1-minute BTCUSD bars in JS - How Scichart.js optimises trading performance</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote">
<p><strong>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.</strong></p>
</blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>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 <a href="https://www.scichart.com/example/javascript-chart/javascript-candlestick-chart/">JavaScript Candlestick Chart</a>?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The reason why such limitations exist in most applications is <strong>performance</strong>. Charts are notoriously compute-heavy, require a lot of CPU resources to draw and can be slow. In particular, <a href="https://www.scichart.com/javascript-chart-features/">JavaScript charts</a> tend to be even slower and more resource hungry, so the limitations of how much data you can view are usually larger.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote">
<p><strong>Our goal is to become the data visualisation partner of choice to organisations with complex and mission-critical demands.</strong></p>
</blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="performance-of-javascript-candlestick-charts">Performance of JavaScript Candlestick Charts</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Below is a table comparing a few leading JavaScript Chart libraries and their performance (drawing speed) for displaying candlestick charts.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><style type="text/css">.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}</style></p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table">
<table>
<thead>
<tr>
<th><span style="font-weight: bold;">Chart Vendor</span></th>
<th><span style="font-weight: bold;"># Candlesticks*</span></th>
<th><span style="font-weight: bold;">Equivalent to</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chart.js</td>
<td>100</td>
<td>~3 hours of 1-minute bars</td>
</tr>
<tr>
<td>Plotly.js</td>
<td>1,000</td>
<td>~1 day of 1-minute bars</td>
</tr>
<tr>
<td><span style="font-weight: normal; font-style: normal; text-decoration: none;">HighCharts</span></td>
<td>1,000</td>
<td>~1 day of 1-minute bars</td>
</tr>
<tr>
<td>TradingView</td>
<td>5,000</td>
<td>~3 days of 1-minute bars</td>
</tr>
<tr>
<td><span style="font-weight: bold;">SciChart.js</span></td>
<td><span style="font-weight: bold;">&gt;10,000,000**</span></td>
<td><span style="font-weight: bold;">~20 Years of 1-minute bars</span></td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">* Number of Candlesticks before significant slowdown observed: under 20 FPS</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">** 1 Million candles with SciChart.js v2.0. With v2.1 10 Million or more</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="scichart-js-1-year-of-bitcoin-usdollar-candles">SciChart.js: 1-Year of Bitcoin/USDollar Candles</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><!--kg-card-begin: html--><video controls="controls" width="100%" height="100%"><source src="https://www.scichart.com/wp-content/uploads/2022/01/scichart-js-candlestick-chart-1-year-bitcoin-minute-chart.mp4" type="video/mp4" /><source /></video><!--kg-card-end: html--></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We created a demo to showcase best-in-class performance (drawing/rendering speed) of <a href="https://www.scichart.com/javascript-chart-features/">SciChart.js</a> compared to other Js chart libraries such as HighCharts, Plotly.js, TradingView and Chart.js.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://www.scichart.com/javascript-chart-features/">SciChart.js</a> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's the code below:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<blockquote>
<ul>
<li><strong>Github </strong><a href="https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/WebsiteDemos/BigDataCandlestickCharts">github.com/ABTSoftware/SciChart.JS.Examples/.../BigDataCandlestickCharts</a>&lt;/</li>
<li><strong>Codesandbox</strong> (Run example in your browser) <a href="https://githubbox.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/WebsiteDemos/BigDataCandlestickCharts" target="_blank" rel="noopener">githubbox.com/ABTSoftware/SciChart.JS.Examples/.../BigDataCandlestickCharts</a></li>
</ul>
</blockquote>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The price data is parsed and loaded into <a href="https://www.scichart.com/javascript-chart-features/">SciChart.js</a>, 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 <a href="https://www.scichart.com/javascript-chart-features/">SciChart.js</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>We've built a JS chart library  </strong>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="conclusion">Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's why we are so proud of what we have done:  <a href="https://www.scichart.com/javascript-chart-features/" rel="noreferrer noopener">SciChart.js</a>  enables better decisions for traders and institutions. Better decisions, better performance, better results.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="find-out-more">Find out more</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To find out more about <a href="https://scichart.com/javascript-chart">SciChart.js: High Performance JavaScript Charts</a> see <a href="https://www.scichart.com/javascript-chart-features/">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To find out more about <a href="https://www.scichart.com/">SciChart</a> the company, or ask us a question to see how we can help with your Stock, Forex or Crypto trading applications, use the <a href="https://www.scichart.com/contact-us/">contact-us</a> form and get in touch.</p>
<!-- /wp:paragraph -->
<blockquote>
<h2>Start using SciChart.js Today</h2>
SciChart.js is now available with a <a href="https://www.scichart.com/getting-started/scichart-javascript"><strong>FREE community edition</strong></a> (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.<br /><br />
<p style="text-align: center;"><a class="button" href="https://scichart.com/contact-us">CONTACT US</a><a class="button" href="https://www.scichart.com/getting-started/scichart-javascript/">GET SCICHART.JS FREE</a></p>
</blockquote>