Angular Market Depth Chart
How to create a Market Depth (Order Book) Angular Chart using Mountain Series and a Custom Modifier
drawExample.ts
angular.ts
theme.ts
DepthCursorModifier.ts
1import { appTheme } from "../../../theme";
2
3import {
4 SciChartSurface,
5 MouseWheelZoomModifier,
6 ZoomExtentsModifier,
7 XyDataSeries,
8 NumericAxis,
9 FastMountainRenderableSeries,
10 NumberRange,
11 EAutoRange,
12 EXyDirection,
13 EAxisAlignment,
14} from "scichart";
15import { DepthCursorModifier } from "./DepthCursorModifier";
16
17// SCICHART EXAMPLE
18
19export const drawExample = async (rootElement: string | HTMLDivElement) => {
20 // Create a SciChartSurface
21 const { wasmContext, sciChartSurface } = await SciChartSurface.create(rootElement, {
22 theme: appTheme.SciChartJsTheme,
23 });
24
25 const xAxis = new NumericAxis(wasmContext, {
26 axisAlignment: EAxisAlignment.Top,
27 labelPrecision: 4,
28 rotation: 90,
29 });
30
31 sciChartSurface.xAxes.add(xAxis);
32
33 const yAxis = new NumericAxis(wasmContext, {
34 autoRange: EAutoRange.Always,
35 growBy: new NumberRange(0, 0.05),
36 });
37 sciChartSurface.yAxes.add(yAxis);
38
39 const AAPL_data = {
40 buy: [
41 { price: 132.79743, volume: 339 },
42 { price: 132.79742, volume: 713 },
43 { price: 132.79741, volume: 421 },
44 { price: 132.7974, volume: 853 },
45 { price: 132.79739, volume: 152 },
46 { price: 132.79738, volume: 243 },
47 { price: 132.79737, volume: 296 },
48 { price: 132.79736, volume: 123 },
49 { price: 132.79735, volume: 158 },
50 { price: 132.79734, volume: 238 },
51 { price: 132.79733, volume: 164 },
52 { price: 132.79732, volume: 273 },
53 { price: 132.79731, volume: 35 },
54 { price: 132.79729, volume: 30 },
55 { price: 132.79726, volume: 29 },
56 { price: 132.79722, volume: 484 },
57 { price: 132.79721, volume: 458 },
58 { price: 132.7972, volume: 244 },
59 { price: 132.79719, volume: 10 },
60 { price: 132.79698, volume: 124 },
61 ],
62 sell: [
63 { price: 132.79744, volume: 847 },
64 { price: 132.79745, volume: 2412 },
65 { price: 132.79746, volume: 635 },
66 { price: 132.79747, volume: 323 },
67 { price: 132.79748, volume: 828 },
68 { price: 132.79749, volume: 322 },
69 { price: 132.7975, volume: 268 },
70 { price: 132.79751, volume: 92 },
71 { price: 132.79752, volume: 249 },
72 { price: 132.79753, volume: 189 },
73 { price: 132.79754, volume: 179 },
74 { price: 132.79755, volume: 122 },
75 { price: 132.79756, volume: 28 },
76 { price: 132.7976, volume: 114 },
77 { price: 132.79764, volume: 27 },
78 { price: 132.79767, volume: 10 },
79 { price: 132.79772, volume: 31 },
80 { price: 132.79785, volume: 484 },
81 { price: 132.79786, volume: 364 },
82 { price: 132.79787, volume: 244 },
83 ],
84 };
85
86 const buyValues: number[] = [];
87 let totalVol = 0;
88 for (const v of AAPL_data.buy) {
89 totalVol += v.volume;
90 buyValues.push(totalVol);
91 }
92 const sellValues: number[] = [];
93 totalVol = 0;
94 for (const v of AAPL_data.sell) {
95 totalVol += v.volume;
96 sellValues.push(totalVol);
97 }
98
99 const buySeries = new FastMountainRenderableSeries(wasmContext, {
100 dataSeries: new XyDataSeries(wasmContext, { xValues: AAPL_data.buy.map((v) => v.price), yValues: buyValues }),
101 stroke: "green",
102 fill: "00890033",
103 strokeThickness: 2,
104 isDigitalLine: true,
105 });
106 const sellSeries = new FastMountainRenderableSeries(wasmContext, {
107 dataSeries: new XyDataSeries(wasmContext, { xValues: AAPL_data.sell.map((v) => v.price), yValues: sellValues }),
108 stroke: "red",
109 fill: "89000033",
110 strokeThickness: 2,
111 isDigitalLine: true,
112 });
113 sciChartSurface.renderableSeries.add(buySeries, sellSeries);
114
115 xAxis.tickProvider.getMajorTicks = (minor, major, visibleRange) => {
116 const ticks: number[] = [];
117 const threshold = 400;
118 const buyYs = buySeries.dataSeries.getNativeYValues();
119 const buyXs = buySeries.dataSeries.getNativeXValues();
120 let lastY = 0;
121 for (let i = 0; i < buySeries.dataSeries.count(); i++) {
122 const y = buyYs.get(i);
123 if (y - lastY > threshold) {
124 ticks.push(buyXs.get(i));
125 }
126 lastY = y;
127 }
128 const sellYs = sellSeries.dataSeries.getNativeYValues();
129 const sellXs = sellSeries.dataSeries.getNativeXValues();
130 lastY = 0;
131 for (let i = 0; i < sellSeries.dataSeries.count(); i++) {
132 const y = sellYs.get(i);
133 if (y - lastY > threshold) {
134 ticks.push(sellXs.get(i));
135 }
136 lastY = y;
137 }
138 return ticks.sort((a, b) => a - b);
139 };
140
141 const depthModifier = new DepthCursorModifier({
142 buySeries,
143 sellSeries,
144 crosshairStrokeDashArray: [3, 2],
145 crosshairStrokeThickness: 3,
146 axisLabelFill: "transparent",
147 });
148 depthModifier.highlightColor = appTheme.DarkIndigo;
149 // Optional: Add some interactivity to the chart
150 sciChartSurface.chartModifiers.add(
151 new ZoomExtentsModifier(),
152 new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
153 depthModifier
154 );
155
156 sciChartSurface.zoomExtents();
157 xAxis.visibleRangeLimit = xAxis.visibleRange;
158 yAxis.visibleRangeLimit = yAxis.visibleRange;
159 return { sciChartSurface };
160};
161Angular Market Depth Chart
Overview
This example demonstrates an interactive Market Depth Chart built using Angular and SciChart.js. It visualizes buy and sell order book data with two mountain series and a custom chart modifier that dynamically highlights data points. The example leverages Angular's standalone components as outlined in the Getting started with standalone components - Angular documentation and integrates the scichart-angular package for seamless UI integration.
Technical Implementation
The implementation initializes a SciChartSurface with custom NumericAxis configurations and renders two cumulative mountain series to depict market depth. A bespoke custom modifier, the DepthCursorModifier, is implemented to handle advanced mouse events, coordinate translation, and dynamic annotation updates. Developers can refer to the Custom Chart Modifier API for further customization details. The code also carefully manages DPI scaling and coordinate transformations to ensure accurate visual rendering, as discussed in the Advanced JavaScript Chart and Graph Library | SciChart JS documentation.
Features and Capabilities
The chart exhibits real-time update capabilities by dynamically adjusting annotations, crosshair lines, and marker positions in response to mouse movement. Advanced features include precise hit testing for both buy and sell series, dynamic marker rendering, and interactive region highlighting. These capabilities ensure responsive user interaction and are supported by performance optimization techniques that enable efficient WebGL rendering even with high-density data.
Integration and Best Practices
This example adheres to best practices by encapsulating the SciChart.js chart initialization within an Angular standalone component, promoting clear separation of concerns. The use of the ScichartAngularComponent simplifies the integration while ensuring proper resource management and cleanup inherent in Angular's dependency injection framework. Developers are encouraged to explore related topics such as chart interactivity and annotation management in the Advanced JavaScript Chart and Graph Library | SciChart JS documentation to enhance their implementations further.
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 Realtime Ticking Stock Charts
Create a Angular Realtime Ticking Candlestick / Stock Chart with live ticking and updating, using the high performance SciChart.js chart library. Get free demo 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 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.