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 Charts are 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.Start Free 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:

• Use the kendo-chart-navigator component and its child components, or
• Set the navigator option.

The following example demonstrates the Angular StockChart in action.

To limit the range that is displayed by the Angular StockChart, refer to the article on Limiting the Displayed Range 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.

Navigator on Top

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

Suggested Links

• Angular Charts Homepage
• API Reference of the Angular Charts