syncfusion-react-range-navigator

What this skill does

# 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](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](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](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](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](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](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](references/lightweight.md)
- Lightweight Range Navigator without chart data
- When to use lightweight mode
- Mobile-friendly implementation
- Basic configuration

### Tooltip

📄 **Read:** [references/tooltip.md](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](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](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](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](references/rtl.md)
- Enabling RTL mode (enableRtl property)
- RTL layout behavior
- Implementation examples

### Export and Print

📄 **Read:** [references/export-print.md](references/export-print.md)
- Export to image formats (PNG, JPEG, SVG, PDF)
- Print functionality
- Export/print method usage
- Configuration options

## Quick Start Example

```tsx
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:**
```tsx
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 dat