Example of Candlestick and Volume 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 Historical
VolumeApple IncAprSepFebJulDecMayOctMarAugJanJunNovAprSep
Description

In this example, you can see how to render and configure a stock chart for AAPL data, as well as how to use column charts to display data volume. The Period Selector and Range Selector can be used to select a range with specified periods.

The legend is enabled, and you can use it to toggle the visibility of series in the stock chart. To customize the legend in the stock chart, use the legendSettings property.


Injecting Module:

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