Angular OHLC Chart
For this example, we demonstrate how to create a Angular OHLC Chart or Stock Chart using SciChart.js. This is our powerful JavaScript Chart Component.
drawExample.ts
angular.ts
data.ts
1import { closeValues, dateValues as xValues, highValues, lowValues, openValues } from "./data";
2import {
3 CategoryAxis,
4 ENumericFormat,
5 FastOhlcRenderableSeries,
6 MouseWheelZoomModifier,
7 NumericAxis,
8 NumberRange,
9 OhlcDataSeries,
10 SciChartSurface,
11 SmartDateLabelProvider,
12 SweepAnimation,
13 ZoomExtentsModifier,
14 ZoomPanModifier,
15 SciChartJsNavyTheme,
16 DiscontinuousDateAxis,
17} from "scichart";
18
19export const drawExample = async (rootElement: string | HTMLDivElement) => {
20 // Create a SciChartSurface
21 const { sciChartSurface, wasmContext } = await SciChartSurface.create(rootElement, {
22 theme: new SciChartJsNavyTheme(),
23 });
24
25 // Add DiscontinuousDateAxis - which collapses gaps in stock market data
26 sciChartSurface.xAxes.add(
27 new DiscontinuousDateAxis(wasmContext, {
28 labelProvider: new SmartDateLabelProvider(),
29 growBy: new NumberRange(0.05, 0.05),
30 })
31 );
32
33 // Create a NumericAxis on the YAxis with 4 Decimal Places
34 sciChartSurface.yAxes.add(
35 new NumericAxis(wasmContext, {
36 visibleRange: new NumberRange(1.1, 1.2),
37 growBy: new NumberRange(0.1, 0.1),
38 labelFormat: ENumericFormat.Decimal,
39 labelPrecision: 4,
40 })
41 );
42
43 // Create the Ohlc series and add to the chart
44 sciChartSurface.renderableSeries.add(
45 new FastOhlcRenderableSeries(wasmContext, {
46 dataSeries: new OhlcDataSeries(wasmContext, { xValues, openValues, highValues, lowValues, closeValues }),
47 strokeThickness: 1,
48 dataPointWidth: 0.7,
49 strokeUp: "#50ff50",
50 strokeDown: "#ff5050",
51 animation: new SweepAnimation({ duration: 800, fadeEffect: true }),
52 })
53 );
54
55 // Optional: Add some interactivity modifiers
56 sciChartSurface.chartModifiers.add(
57 new ZoomExtentsModifier(),
58 new ZoomPanModifier({ enableZoom: true }),
59 new MouseWheelZoomModifier()
60 );
61
62 sciChartSurface.zoomExtents();
63 return { sciChartSurface, wasmContext };
64};
65Angular Ohlc Chart
Overview
This example demonstrates how to implement an Angular OHLC Chart using SciChart.js. It showcases an integration pattern where the chart is initialized within a standalone Angular component using the ScichartAngularComponent. The example focuses on visualizing financial OHLC (Open-High-Low-Close) data in a stock chart, making it ideal for applications that require precise financial data representation.
Technical Implementation
The chart is initialized asynchronously through the drawExample function, which creates a SciChartSurface and configures it with a themed environment. A CategoryAxis is employed with a SmartDateLabelProvider to handle non-contiguous stock market date values, while a NumericAxis formats financial data with exact decimal precision. The OHLC data is structured using an OhlcDataSeries and is rendered via a FastOhlcRenderableSeries that features a SweepAnimation for smooth visual transitions. This approach aligns with best practices for asynchronous chart initialization in Angular as explained in the Getting Started with SciChart JS documentation.
Features and Capabilities
The example integrates several advanced features including real-time update capabilities, smooth series animations, and interactive chart modifiers. Interactivity is enhanced through the addition of modifiers like ZoomExtentsModifier, ZoomPanModifier, and MouseWheelZoomModifier which enable intuitive zooming and panning. Such enhancements are consistent with the guidance provided in the Tutorial 03 - Adding Zooming, Panning Behavior documentation. Additionally, the performance optimizations inherent in SciChart.js, including efficient WebGL rendering, ensure the chart remains responsive even when handling complex financial datasets.
Integration and Best Practices
This Angular example leverages a standalone component architecture where the chart initialization function is passed as an input property to the ScichartAngularComponent, promoting a clear separation of concerns and easy lifecycle management. Developers should note that proper Angular lifecycle handling is important to avoid memory leaks, a concept detailed in the Memory Best Practices guide. Furthermore, for a deeper understanding of integrating SciChart.js into Angular projects, the scichart-angular resource offers additional insights and installation details.
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 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 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.