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.

Fullscreen

Edit

 Edit

Docs

index.tsx

binanceRestClient.ts

ExampleDataProvider.ts

theme.ts

binanceSocketClient.ts

createCandlestickChart.ts

VolumePaletteProvider.ts

Copy to clipboard
Minimise
Fullscreen
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};
76

See Also: Financial Charts (8 Demos)

Angular Candlestick Chart | Chart Examples | SciChart.js | SciChart.js Demo

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 | JavaScript Chart Examples | SciChart | SciChart.js Demo

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 Multi-Pane Stock Chart using Subcharts | View JavaScript Charts | SciChart.js Demo

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 | SciChart.js Demo

Tenor Curves Demo

Demonstrating the capability of SciChart.js to create a composite 2D &amp; 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 Chart | View JavaScript Charts | SciChart.js Demo

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 | SciChart.js Demo

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 | SciChart.js Demo

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 | Chart Examples | SciChart.js | SciChart.js Demo

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.

SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL.