Kendo UI for Angular StockChart

Updated on Jan 20, 2026

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 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.

Change Theme

Theme

Loading ...

Binding to Data

You can bind the StockChart series to an array through the data property. The StockChart typically uses financial data with open, high, low, and close values along with dates.

• Binding to objects—Use an array of objects with custom properties.

  ts

  public stockData: Array<{ date: Date; open: number; high: number; low: number; close: number }> = [
      { date: new Date('2024/01/02'), open: 150.25, high: 155.50, low: 149.00, close: 153.75 },
      { date: new Date('2024/01/03'), open: 153.75, high: 156.00, low: 151.25, close: 154.50 },
      { date: new Date('2024/01/04'), open: 154.50, high: 157.75, low: 153.00, close: 156.25 }
  ];

  When binding to objects, specify which properties contain the data through the following field mappings:

  Property	Data type	Required	Description
  openField	string	Yes	The property name that contains the opening price value.
  highField	string	Yes	The property name that contains the highest price value.
  lowField	string	Yes	The property name that contains the lowest price value.
  closeField	string	Yes	The property name that contains the closing price value.
  categoryField	string	Yes	The property name that contains the date with Date values.

The following example demonstrates how to bind the StockChart series to data using object models.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Navigator on Top

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

Change Theme

Theme

Loading ...

Suggested Links

• Angular Charts Homepage
• API Reference of the Angular Charts