• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Navigator

The StockChart navigator represents a pane that is placed at the bottom of the chart and which can be used to change the date interval in the main panes.

To configure the navigator, use the ChartNavigator component and its child components.

To limit the range that is displayed by the Chart, refer to the article on appearance.

Loading on Demand

To load the main series data for the selected period on demand, use the onNavigatorFilter event. The event object contains the start and end of the selected period. As the navigator must not be re-rendered when the main series are filtered, set the partialRedraw property of the StockChart to true.

Example
View Source
Change Theme:

Navigator on Top

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

Example
View Source
Change Theme:

Multiple Panes

Similar to the Chart component, the StockChart supports multiple panes and displays all additional panes above the navigator pane.

Example
View Source
Change Theme: