# 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](https://www.telerik.com/kendo-angular-ui-develop/components/charts) component and shares most of its features.

<div><CtaPanelOverview></CtaPanelOverview></div>

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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/navigator) component and its child components, or
* Set the [`navigator`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/stockchartcomponent#navigator) option.

The following example demonstrates the Angular StockChart in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/stock/basic/source.txt)

## Binding to Data

You can bind the StockChart series to an array through the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#openfield)         | `string`  | Yes      | The property name that contains the opening price value.     |
  | [`highField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#highfield)         | `string`  | Yes      | The property name that contains the highest price value.     |
  | [`lowField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#lowfield)           | `string`  | Yes      | The property name that contains the lowest price value.      |
  | [`closeField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#closefield)       | `string`  | Yes      | The property name that contains the closing price value.     |
  | [`categoryField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/stock/data-binding/source.txt)

> To limit the range that is displayed by the Angular StockChart, refer to the article on [Limiting the Displayed Range](https://www.telerik.com/kendo-angular-ui-develop/components/charts/pan-zoom#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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/stockchartcomponent#navigatorfilter) event. In this case, you can prevent the navigator from being redrawn by using the [`skipNavigatorRedraw`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/stockchartcomponent#skipnavigatorredraw) method.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/stock/load-on-demand/source.txt)

## Navigator on Top

To display the navigator on top, set the [`position`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/navigatorcomponent#position) attribute to `"top"`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/stock/navigator-position/source.txt)

## Suggested Links

* [Angular Charts Homepage](https://www.telerik.com/kendo-angular-ui/charts)
* [API Reference of the Angular Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)