NavigatorComponent
Represents the Kendo UI StockChart Navigator component for Angular (see runnable example).
Definition
Package:@progress/kendo-angular-charts
Selector:kendo-chart-navigator
Syntax:
_@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>
`
})Inputs
Specifies the configuration options of the category axis.
Specifies the default options of the navigator hint.
position
"top" | "bottom"
Specifies the position of the navigator. By default, the navigator is positioned at the bottom.
Specifies the initially selected range. If no range is specified, the full range of values is shown.
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
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.
An object containing the updated input fields.