New to Kendo UI for Angular? Start a free 30-day trial

NavigatorComponent

The configuration options of the navigator (see runnable example).

@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 class="k-button" (click)="isVisible = !isVisible">Toggle Navigator</button>
   `
})

Selector

kendo-chart-navigator

Inputs

categoryAxis

CategoryAxis

The configuration options of the category axis.

hint

NavigatorHint

The default options of the navigator hint.

pane

Pane

The navigator pane configuration.

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

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.

item.notifyChanges({ visible: true });

Parameters

changes

any

An object containing the updated input fields.