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};
76
Discover how to create a Angular Candlestick Chart or Stock Chart using SciChart.js. For high Performance JavaScript Charts, get your free demo now.
Easily create Angular OHLC Chart or Stock Chart using feature-rich SciChart.js chart library. Supports custom colors. Get your free trial now.
Create a Angular Multi-Pane Candlestick / Stock Chart with indicator panels, synchronized zooming, panning and cursors. Get your free trial of SciChart.js now.
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.
Create a Angular Multi-Pane Candlestick / Stock Chart with indicator panels, synchronized zooming, panning and cursors. Get your free trial of SciChart.js now.
Create a Angular Depth Chart, using the high performance SciChart.js chart library. Get free demo now.
Demonstrates how to place Buy/Sell arrow markers on a Angular Stock Chart using SciChart.js - Annotations API
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.