Example of Default in Angular Stock Chart Component

This Angular Stock Chart example visualizes the AAPL stock price with candle chart. Tooltip and crosshair show the information about the data and period.

AAPL Stock Price
SepDecFebAprJunAugOctDecFebAprJunAug
Description

In this example, you can see how to render and configure the stock chart. The candle type series chart shows financial data and trends at equal intervals. The Period Selector and Range Selector can be used to select a range with specified periods.

Stock Chart provides support to 10 types of Technical Indicators namely Accumulation Distribution, ATR, EMA, SMA, TMA, Momentum, MACD, RSI, Stochastic, Bollinger Band. By using indicator dropdown box, add and remove the required indicator types.

Tooltip is enabled in this example. To see the tooltip in action, hover the chart or tap on it in touch enabled devices.

More information about the stock charts can be found in this documentation section.


Injecting Module:

Stock Chart features are segregated into individual feature-wise modules. To use Candle Series, DateTime axis and Column series in stock chart, we need to inject CandleSeriesService, ColumnSeriesService and DateTimeService into the @NgModule.providers section.