A range navigator is a small overview chart with a draggable selection that controls the visible range of a larger chart - the familiar strip you drag to frame a window of time.
Use RadzenRangeNavigatorLineSeries as child content to display a mini-chart preview of the full data range inside the navigator.
Set ShowHandleLabels to display the current range values next to the drag handles - format them with HandleLabelFormatString or provide a HandleLabelFormatter function for full control (e.g. custom calendars or culture-specific output).
Set ShowTooltip to show the nearest point's category and value while hovering the navigator, and format the value with TooltipFormatString.
Use the RadzenRangeNavigator without child content for a compact range selector. The component automatically renders as a compact track bar.
Selected: Jan 01, 2025 — Dec 31, 2025
One standalone RadzenRangeNavigator can frame several charts: bind its Start and End to the same values as each chart's ViewStart and ViewEnd.
Set ShowScrollbar="false" on the charts so they neither draw their own scrollbar nor reserve space for it, and keep AllowZoom so the mouse wheel still zooms - the navigator follows.
A shared SyncGroup additionally synchronizes the crosshair and tooltip across the charts.
Selected: Jul 02, 2025 — Oct 01, 2025. Drag the navigator or use the mouse wheel over either chart.
When readers need to move through a long series and keep their bearings; the mini-chart shows the whole picture while the selection frames the part on display.
Zoom and pan act on the chart itself. A range navigator adds a separate overview strip, so readers always see the full extent while choosing the window.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT
On this page