Angular Realtime Ticking Stock Charts
Connects to Binance Exchange to fetch historical data on 1-minute timeframe. Subscribes to WebSocket and listens to candles & trades. Candles are updated in realtime. You can zoom, pan the example or use tooltips. Large trades > $25,000 size are plotted as bubbles.
index.tsx
binanceRestClient.ts
ExampleDataProvider.ts
theme.ts
binanceSocketClient.ts
createCandlestickChart.ts
VolumePaletteProvider.ts
1/**
2 * Defines a price bar with Open, High, Low, Close and Date encoded as number
3 */
4export type TPriceBar = {
5 date: number;
6 open: number;
7 high: number;
8 low: number;
9 close: number;
10 volume: number;
11};
12
13/**
14 * Parses JSON candles into TPriceBar array
15 * @param candles
16 */
17const parseCandles = (candles: any[]): TPriceBar[] => {
18 const priceBars: TPriceBar[] = [];
19
20 candles.forEach((candle: any) => {
21 const [timestamp, open, high, low, close, volume] = candle;
22 const openValue = parseFloat(open);
23 const highValue = parseFloat(high);
24 const lowValue = parseFloat(low);
25 const closeValue = parseFloat(close);
26 const volumeValue = parseFloat(volume);
27
28 priceBars.push({
29 date: timestamp / 1000,
30 open: openValue,
31 high: highValue,
32 low: lowValue,
33 close: closeValue,
34 volume: volumeValue,
35 });
36 });
37
38 return priceBars;
39};
40
41/**
42 * Fetches candles from Binance Rest API
43 */
44const getCandles = async (
45 symbol: string,
46 interval: string,
47 startTime?: Date,
48 endTime?: Date,
49 limit: number = 500,
50 binanceDomain = "us"
51): Promise<TPriceBar[]> => {
52 let url = `https://api.binance.${binanceDomain}/api/v3/klines?symbol=${symbol}&interval=${interval}`;
53 if (startTime) {
54 url += `&startTime=${startTime.getTime()}`;
55 }
56 if (endTime) {
57 url += `&endTime=${endTime.getTime()}`;
58 }
59 if (limit) {
60 url += `&limit=${limit}`;
61 }
62 try {
63 console.log(`SimpleBinanceClient: Fetching ${symbol} ${interval} from ${startTime} to ${endTime}`);
64 const response = await fetch(url);
65 const data = await response.json();
66 return parseCandles(data);
67 } catch (err) {
68 console.error(err);
69 return [];
70 }
71};
72
73export const simpleBinanceRestClient = {
74 getCandles,
75};
76Angular Realtime Ticking Stock Charts
Overview
This example demonstrates the creation of a real-time updating candlestick chart using Angular with the high performance SciChart.js library. Designed for financial applications, the chart connects to the Binance Exchange via WebSocket to fetch 1-minute historical and live trading data, updating the candlestick series as new trades arrive. Large trades above a $25,000 threshold are highlighted as bubbles, providing clear visual emphasis on significant market moves.
Technical Implementation
The implementation utilizes Angular’s integration capabilities with RxJS to process live data streams. A custom WebSocket client leverages RxJS operators such as combineLatest, scan, and skipWhile to merge trade and candle streams, ensuring that new data updates the existing candles or creates new ones when required. This approach demonstrates effective use of real-time streaming in an Angular environment, a pattern that is explained in detail in the Adding Realtime Updates documentation. Chart rendering is achieved using SciChart.js components and custom palette providers, which dynamically adjust color based on market action.
Features and Capabilities
The chart supports live data updating, interactive zooming and panning, and the ability to switch between candlestick and OHLC series using Angular Material toggle controls. Additionally, moving average filters are applied to the data series to provide trend insights, an implementation detailed in the Moving Average Filter documentation. The real-time data processing and custom rendering ensure high performance even with high frequency updates, making it ideal for performance intensive financial applications.
Integration and Best Practices
This example adheres to Angular best practices by integrating third-party libraries like SciChart.js and handling real-time WebSocket data with RxJS. The use of Angular Material components for user interface elements, such as toggle buttons and dropdown controls, provides a seamless and responsive user experience. Developers interested in Angular WebSocket integration can refer to resources such as the WebSockets in Angular: A Comprehensive Guide and leverage techniques from Angular RxJS real-time data to efficiently manage asynchronous data streams. Additionally, custom palette providers illustrate how to implement dynamic chart coloring directly within an Angular application, a feature further described in the PaletteProvider API documentation.
Overall, this example encapsulates a robust integration of Angular, RxJS, and SciChart.js to deliver highly interactive and performant real-time stock charts.
angular Chart Examples & Demos
See Also: Financial Charts (9 Demos)
Angular Candlestick Chart
Discover how to create a Angular Candlestick Chart or Stock Chart using SciChart.js. For high Performance JavaScript Charts, get your free demo now.
Angular OHLC Chart
Easily create Angular OHLC Chart or Stock Chart using feature-rich SciChart.js chart library. Supports custom colors. Get your free trial now.
Angular Orderbook Heatmap
Create an Angular heatmap chart showing historical orderbook levels, using the high performance SciChart.js chart library. Get free demo now.
Angular Multi-Pane Stock Charts using Subcharts
Create a Angular Multi-Pane Candlestick / Stock Chart with indicator panels, synchronized zooming, panning and cursors. Get your free trial of SciChart.js now.
Tenor Curves Demo
Demonstrating the capability of SciChart.js to create a composite 2D & 3D Chart application. An example like this could be used to visualize Tenor curves in a financial setting, or other 2D/3D data combined on a single screen.
Angular Multi-Pane Stock Charts using Sync Multi-Chart
Create a Angular Multi-Pane Candlestick / Stock Chart with indicator panels, synchronized zooming, panning and cursors. Get your free trial of SciChart.js now.
Angular Market Depth Chart
Create a Angular Depth Chart, using the high performance SciChart.js chart library. Get free demo now.
Angular Chart Hoverable Buy Sell Marker Annotations
Demonstrates how to place Buy/Sell arrow markers on a Angular Stock Chart using SciChart.js - Annotations API
Angular User Annotated Stock Chart
This demo shows you how to create a <strong>{frameworkName} User Annotated Stock Chart</strong> using SciChart.js. Custom modifiers allow you to add lines and markers, then use the built in serialisation functions to save and reload the chart, including the data and all your custom annotations.