Syncfusion React Range Navigator
A comprehensive skill for implementing the Syncfusion React Range Navigator component - a powerful data visualization control that allows users to scroll and navigate through data with range selection capabilities. This component easily combines with other controls like Charts and Data Grids to create rich dashboards.
When to Use This Skill
Use this skill when you need to:
- Install and set up the Range Navigator component in a React application
- Implement range selection and navigation for time-series or numeric data
- Display financial data, stock charts, or large datasets requiring navigation
- Configure data binding with numeric, logarithmic, or DateTime value types
- Customize series types (Line, Area, StepLine)
- Add period selectors for predefined time intervals
- Enable lightweight mode without chart data
- Customize navigator appearance (thumbs, borders, regions)
- Configure tooltips for range selection
- Customize labels, grid lines, and tick lines
- Enable accessibility features or RTL support
- Export or print Range Navigator charts
- Integrate Range Navigator with other chart components
Component Overview
Range Navigator is a data visualization control that provides intuitive range selection and navigation capabilities for large datasets. It displays a condensed view of data with interactive sliders that allow users to select specific ranges. The component is particularly useful for:
- Financial Data Visualization: Stock price analysis, trading data, market trends
- Time-Series Navigation: Historical data exploration, date range selection
- Large Dataset Filtering: Scroll through extensive data collections efficiently
- Dashboard Integration: Combine with Charts, Grids, and other components
Key Features:
- Multiple data source support (local and remote)
- Interactive tooltip and animation
- Lightweight mode for mobile devices
- Period selector for custom time intervals
- Multiple axis and series types
- Export to image formats (PNG, JPEG, SVG, PDF)
Documentation and Navigation Guide
API Reference
📄 Read: references/api.md
- Comprehensive API summary: props, methods, events, styling classes, and a short usage example. Links to official docs.
Getting Started
📄 Read: references/getting-started.md
- Installation and dependencies (@syncfusion/ej2-react-charts package)
- Setting up development environment (Vite/Create React App)
- Adding CSS stylesheets and themes
- Basic Range Navigator implementation
- Module injection (AreaSeries, DateTime, RangeTooltip)
- Populating with data (dataSource, xName, yName)
- Enabling tooltip
- Running your first application
Data Binding and Value Types
📄 Read: references/data-binding.md
- Numeric value type (default Double type)
- Range configuration (minimum, maximum, interval)
- Numeric label formatting (n1, n2, p1, c1, custom formats)
- Logarithmic axis for magnitude data
- Logarithmic range and base customization
- DateTime value type for time-series data
- DateTime interval types (Auto, Years, Quarter, Months, Weeks, Days, Hours, Minutes, Seconds)
- DateTime label formatting
- Complete format reference tables
Series Types
📄 Read: references/series-types.md
- Line series (default, LineSeries module)
- Area series (AreaSeries module)
- StepLine series (StepLineSeries module)
- Module injection for each series type
- Configuration and implementation examples
Customization
📄 Read: references/customization.md
- Navigator appearance (navigatorStyleSettings)
- Selected and unselected region colors
- Thumb customization (Circle/Rectangle shapes, size, border, fill)
- Border customization (width, color)
- Deferred update for performance optimization
- Allow snapping for precise selection
- Animation duration control
Period Selector
📄 Read: references/period-selector.md
- Configuring predefined time periods
- Period array (interval, text, intervalType)
- Module injection (PeriodSelector)
- Positioning (Top or Bottom)
- Height customization
- Disabling range selector (period selector only mode)
- Interval types (Auto, Years, Quarter, Months, Weeks, Days, Hours, Minutes, Seconds)
Lightweight Mode
📄 Read: references/lightweight.md
- Lightweight Range Navigator without chart data
- When to use lightweight mode
- Mobile-friendly implementation
- Basic configuration
Tooltip
📄 Read: references/tooltip.md
- Enabling and disabling tooltip
- Tooltip customization (fill, opacity, textStyle)
- Label format for tooltips
- Date and time format options
- Complete format reference table
Labels
📄 Read: references/labels.md
- Multilevel labels (enableGrouping for DateTime)
- Grouping by intervals (Auto, Years, Quarter, Months, Weeks, Days, Hours, Minutes, Seconds)
- Smart labels to avoid overlapping (labelIntersectAction)
- Label positioning (inside or outside)
- Label style customization (font, color, family, weight, size)
Grid Lines and Tick Lines
📄 Read: references/grid-and-tick.md
- Grid line customization (majorGridLines)
- Grid line width, color, and dashArray
- Tick line customization (majorTickLines)
- Tick line width, color, and dashArray
- Configuration examples
Accessibility
📄 Read: references/accessibility.md
- Keyboard navigation support
- Screen reader compatibility
- WCAG 2.0 compliance
- Accessibility features and best practices
Right-to-Left (RTL) Support
📄 Read: references/rtl.md
- Enabling RTL mode (enableRtl property)
- RTL layout behavior
- Implementation examples
Export and Print
📄 Read: references/export-print.md
- Export to image formats (PNG, JPEG, SVG, PDF)
- Print functionality
- Export/print method usage
- Configuration options
Quick Start Example
import * as React from 'react';
import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject,
RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";
// Register your Syncfusion license key
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('YOUR_LICENSE_KEY');
function App() {
const data = [
{ x: new Date(2018, 0, 1), y: 35 },
{ x: new Date(2018, 1, 1), y: 28 },
{ x: new Date(2018, 2, 1), y: 34 },
{ x: new Date(2018, 3, 1), y: 32 },
{ x: new Date(2018, 4, 1), y: 40 },
{ x: new Date(2018, 5, 1), y: 42 },
{ x: new Date(2018, 6, 1), y: 38 }
];
return (
<RangeNavigatorComponent
id="rangeNavigator"
valueType="DateTime"
value={[new Date(2018, 1, 1), new Date(2018, 4, 1)]}
tooltip={{ enable: true }}
>
<Inject services={[AreaSeries, DateTime, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective
dataSource={data}
xName="x"
yName="y"
type="Area"
/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Common Patterns
Pattern 1: Time-Series Data Navigation
When user needs: Navigate through time-series data with date range selection
Implementation:
import * as React from 'react';
import { RangeNavigatorComponent, AreaSeries, DateTime, RangeTooltip, Inject,
RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";
function App() {
const data = [
{ x: new Date(2018, 0, 1), y: 35 },
{ x: new Date(2018, 1, 1), y: 28 },
{ x: new Date(2018, 2, 1), y: 34 },
{ x: new Date(2018, 3, 1), y: 32 },
{ x: new Date(2018, 4, 1), y: 40 },
{ x: new Date(2018, 5, 1), y: 42 },
{ x: new Date(2018, 6, 1), y: 38 }
];
return (
<RangeNavigatorComponent
valueType="DateTime"
intervalType="Months"
labelFormat="MMM"
value={[new Date(2018, 0, 1), new Date(2018, 6, 1)]}
tooltip={{ enable: true, displayMode: 'Always' }}>
<Inject services={[AreaSeries, DateTime, RangeTooltip]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective
dataSource={data}
xName="x"
yName="y"
type="Area"/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
)
}
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Pattern 2: Financial Data with Period Selector
When user needs: Stock chart navigation with predefined time periods (1M, 3M, 6M, YTD, 1Y)
Implementation:
import * as React from 'react';
import {
RangeNavigatorComponent,
AreaSeries,
DateTime,
RangeTooltip,
PeriodSelector,
Inject,
RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,
} from '@syncfusion/ej2-react-charts';
import * as ReactDOM from 'react-dom';
function App() {
const data = [
{ x: new Date(2018, 0, 1), y: 35 },
{ x: new Date(2018, 1, 1), y: 28 },
{ x: new Date(2018, 2, 1), y: 34 },
{ x: new Date(2018, 3, 1), y: 32 },
{ x: new Date(2018, 4, 1), y: 40 },
{ x: new Date(2018, 5, 1), y: 42 },
{ x: new Date(2018, 6, 1), y: 38 }
];
return (
<RangeNavigatorComponent
valueType="DateTime"
value={[new Date(2023, 0, 1), new Date(2023, 11, 31)]}
periodSelectorSettings={{
periods: [
{ intervalType: 'Months', interval: 1, text: '1M' },
{ intervalType: 'Months', interval: 3, text: '3M' },
{ intervalType: 'Months', interval: 6, text: '6M' },
{ intervalType: 'Years', interval: 1, text: '1Y' },
{ text: 'YTD' },
],
position: 'Top',
}}
>
<Inject
services={[
AreaSeries,
DateTime,
RangeTooltip,
PeriodSelector,
]}
/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective
dataSource={data}
xName="x"
yName="y"
type="Area"
/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));Pattern 3: Custom Styling and Appearance
When user needs: Customize navigator colors, thumbs, and borders
Implementation:
<RangeNavigatorComponent
navigatorStyleSettings={{
selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
unselectedRegionColor: 'transparent',
thumb: {
type: 'Circle',
fill: '#2196F3',
border: { width: 2, color: '#ffffff' },
height: 20,
width: 20
}
}}
navigatorBorder={{ width: 2, color: '#2196F3' }}
>
{/* Series configuration */}
</RangeNavigatorComponent>Pattern 4: Lightweight Mode for Mobile
When user needs: Simple range selector without chart data for mobile devices
Implementation:
<RangeNavigatorComponent
valueType="DateTime"
value={[new Date(2018, 0, 1), new Date(2018, 6, 1)]}
intervalType="Months"
>
<Inject services={[DateTime]} />
{/* No series - lightweight mode */}
</RangeNavigatorComponent>Pattern 5: Logarithmic Scale for Large Ranges
When user needs: Handle data with values spanning multiple orders of magnitude
Implementation:
import { RangeNavigatorComponent, LineSeries, Logarithmic, Inject,
RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective } from '@syncfusion/ej2-react-charts';
import * as ReactDOM from "react-dom";
<RangeNavigatorComponent
valueType="Logarithmic"
logBase={10}
minimum={100}
maximum={100000}
interval={1}
>
<Inject services={[LineSeries, Logarithmic]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective
dataSource={logData}
xName="x"
yName="y"
type="Line"
/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>Key Props
Core Configuration
- valueType:
'Double' | 'DateTime' | 'Logarithmic'- Axis value type (default: 'Double') - value:
number[] | Date[]- Initial selected range [start, end] - minimum:
number | Date- Minimum value of the axis - maximum:
number | Date- Maximum value of the axis - interval:
number- Axis interval - intervalType: Interval type for DateTime ('Auto' | 'Years' | 'Quarter' | 'Months' | 'Weeks' | 'Days' | 'Hours' | 'Minutes' | 'Seconds')
Series Configuration
- series: Array of series objects with dataSource, xName, yName, type
- dataSource: Data array for the series
- xName: Field name for x-axis values
- yName: Field name for y-axis values
- type:
'Line' | 'Area' | 'StepLine'- Series rendering type
Appearance
- navigatorStyleSettings: Customize selected/unselected regions and thumbs
- navigatorBorder: Border width and color
- theme:
'Material' | 'Bootstrap' | 'Fabric' | 'Fluent' | 'Tailwind'
Features
- tooltip: Tooltip configuration (enable, fill, opacity, textStyle, labelFormat)
- periodSelectorSettings: Period selector configuration (periods, position, height)
- enableDeferredUpdate: Trigger change event after drag completion (default: false)
- allowSnapping: Snap slider to nearest interval (default: false)
- enableGrouping: Enable multilevel labels for DateTime (default: false)
- groupBy: Grouping interval type for multilevel labels
- labelPosition:
'Outside' | 'Inside'- Label position - enableRtl: Enable right-to-left rendering
Events
- changed: Fired when range selection changes
- load: Fired before rendering
- loaded: Fired after rendering
- tooltipRender: Fired before tooltip renders
Common Use Cases
Use Case 1: Stock Chart with Range Navigation
Implement a financial stock chart with range selection for analyzing price trends over time. Use DateTime axis, Area series, and period selector for quick time range selection.
Use Case 2: Dashboard Data Filtering
Integrate Range Navigator with Data Grid to filter large datasets based on date or numeric ranges. Use the changed event to update the grid data source.
Use Case 3: Historical Data Analysis
Analyze historical sales, weather, or analytics data by providing intuitive range selection with tooltips showing exact values.
Use Case 4: Mobile-Friendly Navigation
Use lightweight mode for mobile applications where chart rendering is not needed, providing simple range selection UI.
Use Case 5: Multi-Magnitude Data Visualization
Display scientific or financial data spanning multiple orders of magnitude (10^-6 to 10^6) using logarithmic scale.
Module Injection Requirements
The Range Navigator requires module injection for specific features:
import { Inject } from '@syncfusion/ej2-react-charts';
// For Area series
import { AreaSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[AreaSeries]} />
// For DateTime axis
import { DateTime } from '@syncfusion/ej2-react-charts';
<Inject services={[DateTime]} />
// For tooltips
import { RangeTooltip } from '@syncfusion/ej2-react-charts';
<Inject services={[RangeTooltip]} />
// For period selector
import { PeriodSelector } from '@syncfusion/ej2-react-charts';
<Inject services={[PeriodSelector]} />
// For logarithmic scale
import { Logarithmic } from '@syncfusion/ej2-react-charts';
<Inject services={[Logarithmic]} />
// For line series
import { LineSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[LineSeries]} />
// For step line series
import { StepLineSeries } from '@syncfusion/ej2-react-charts';
<Inject services={[StepLineSeries]} />Always inject all required modules in a single Inject component based on the features you're using.