NavigatorComponent

Represents the Kendo UI StockChart Navigator component for Angular (see runnable example).

ts

@Component({
    selector: 'my-app',
      template: `
        <kendo-stockchart (navigatorFilter)="onNavigatorFilter($event)">
            <kendo-chart-series>
               <kendo-chart-series-item
               type="candlestick"
                [data]="seriesData"
                openField="Open"
                closeField="Close"
                lowField="Low"
                highField="High"
                categoryField="Date">
            </kendo-chart-series-item>
         </kendo-chart-series>
         <kendo-chart-navigator
           [categoryAxis]="categoryAxisOptions"
           [hint]="hintOptions"
           [pane]="paneOptions"
           [visible]="isVisible">
           <kendo-chart-navigator-select [from]="from" [to]="to">
           </kendo-chart-navigator-select>
           <kendo-chart-navigator-series>
             <kendo-chart-navigator-series-item type="area" [data]="navigatorData" field="Close" categoryField="Date">
             </kendo-chart-navigator-series-item>
          </kendo-chart-navigator-series>
         </kendo-chart-navigator>
       </kendo-stockchart>
       <br /><br />
       <button kendoButton (click)="isVisible = !isVisible">Toggle Navigator</button>
   `
})

Selector

kendo-chart-navigator

Inputs

Name	Type	Default	Description
categoryAxis	CategoryAxis		Specifies the configuration options of the category axis.
hint	NavigatorHint		Specifies the default options of the navigator hint.
pane	Pane		Specifies the navigator pane configuration.
position	"top" | "bottom"		Specifies the position of the navigator. By default, the navigator is positioned at the bottom.
select	NavigatorSelect		Specifies the initially selected range. If no range is specified, the full range of values is shown.
series	Series | Series[]		An array of series definitions. Accepts the same options as the root series collection. Omitting the array and specifying a single series is also acceptable.
visible	boolean		Specifies the visibility of the navigator.

Methods

notifyChanges
Updates the component fields with the specified values and refreshes the Chart. Use this method when the configuration values cannot be set through the template. ts item.notifyChanges({ visible: true });
Parameters changes any An object containing the updated input fields.