Kendo UI for Angular StockChart

The StockChart is a specialized control for visualizing the price movement of a financial instrument over a certain period of time.

Stock charts include extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, the StockChart extends the Kendo UI Chart component and shares most of its features.

The Chart Component is part of Kendo UI for Angular, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The StockChart navigator represents a pane that is placed at the top or bottom of the Chart and can be used to change the date interval in the main panes.

To configure the navigator, either:

The following example demonstrates the Angular StockChart in action.

Example
View Source
Change Theme:

To limit the range that is displayed by the Angular StockChart, refer to the article on appearance and the category axis min and max options.

Load Data on Demand

To load the main series data for the selected period on demand, use the navigatorFilter event. In this case, you can prevent the navigator from being redrawn by using the skipNavigatorRedraw method.

Example
View Source
Change Theme:

Navigator on Top

To display the navigator on top, set the position attribute to "top".

Example
View Source
Change Theme:

In this article

Not finding the help you need?