syncfusion-angular-range-navigator

What this skill does

# Implementing Syncfusion Angular Range Navigator

## When to Use This Skill

Use this skill when you need to:
- **Create a Range Navigator component** from scratch in an Angular application
- **Set up data binding** with local arrays or remote data sources
- **Configure date-time or numeric axes** for different data types
- **Customize tooltips** with formatted display and custom templates
- **Implement period selectors** for quick date range selection
- **Add multiple series types** (Area, Line, Spline, StepLine, etc.)
- **Enable lightweight mode** for mobile and performance-optimized applications
- **Support RTL (Right-to-Left)** layouts for international applications
- **Format axis labels** and customize grid ticks
- **Export or print Range Navigator** as images or PDFs
- **Ensure accessibility** with keyboard navigation and ARIA attributes
- **Handle empty data points** and edge cases gracefully

---

## Component Overview

The **Syncfusion Angular Range Navigator** is a powerful data visualization component for browsing, selecting, and navigating through time-series data. It allows users to scroll and select ranges from large datasets and integrates seamlessly with other Syncfusion components like Chart and DataGrid. Designed for Angular 21+ with standalone architecture, it provides multiple axis types, series configurations, interactive tooltips, and comprehensive export/print capabilities.

### Key Capabilities
- **Data Binding:** Local arrays, remote data sources, JSON arrays
- **Axis Types:** Numeric and DateTime axes with custom intervals
- **Series Types:** Area, Line, Spline, StepLine, StepArea with automatic data mapping
- **Tooltips:** Enable/disable, custom formatting, headers, HTML templates
- **Period Selector:** Quick selection buttons (Day, Week, Month, Year, custom ranges)
- **Lightweight Mode:** Optimized for mobile and performance-critical applications
- **Labels & Grid:** Customizable axis labels, grid ticks, label formats
- **RTL Support:** Full right-to-left text and layout support
- **Export/Print:** PNG, SVG, PDF formats with high-quality output
- **Accessibility:** WCAG compliance, keyboard navigation, ARIA attributes

---

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package setup
- Create your first Range Navigator
- Basic component configuration with data binding
- CSS and theme imports
- Minimal working example
- Module injection and service providers

### Axis Configuration & Types
📄 **Read:** [references/axis-configuration.md](references/axis-configuration.md)
- Numeric axis setup and configuration
- DateTime axis implementation
- Axis interval and range customization
- Axis label formatting
- Axis types comparison and selection guidance
- Custom axis value mapping

### Series Types & Data Binding
📄 **Read:** [references/series-types.md](references/series-types.md)
- Available series types (Area, Line, Spline, StepLine, StepArea)
- Series data binding and xName/yName mapping
- Multiple series configuration
- Series color and style customization
- Data source configuration (local and remote)
- Empty point handling

### Tooltips & Interactivity
📄 **Read:** [references/tooltips-interactivity.md](references/tooltips-interactivity.md)
- Enable and configure tooltips
- Tooltip formatting and headers
- Tooltip templates with HTML
- Custom tooltip content
- Tooltip positioning and behavior
- Range selection events and handling

### Period Selector & Range Selection
📄 **Read:** [references/period-selector.md](references/period-selector.md)
- Period selector configuration
- Built-in period options (Day, Week, Month, Year)
- Custom period ranges
- Period selector styling
- Range selection programmatically
- Event handling for selection changes

### Labels, Ticks & Formatting
📄 **Read:** [references/labels-formatting.md](references/labels-formatting.md)
- Axis label customization and formatting
- Label format strings and custom functions
- Grid tick configuration and styling
- Label positioning and rotation
- Date and number format customization

### Lightweight Mode & Performance
📄 **Read:** [references/lightweight-mode.md](references/lightweight-mode.md)
- Enable lightweight mode for mobile
- Performance considerations and optimization
- Mobile device optimization techniques
- Lightweight mode limitations and features
- When to use lightweight mode vs standard mode

### RTL & Internationalization
📄 **Read:** [references/rtl-internationalization.md](references/rtl-internationalization.md)
- RTL (Right-to-Left) support and configuration
- Component behavior in RTL mode
- Locale and number formatting
- Language-specific configurations
- Multilingual support patterns

### Print, Export & Accessibility
📄 **Read:** [references/print-export-accessibility.md](references/print-export-accessibility.md)
- Export Range Navigator as PNG, SVG, PDF
- Print functionality configuration
- WCAG 2.1 compliance guidelines
- Keyboard navigation support
- ARIA attributes and labels
- Screen reader optimization

---

## Quick Start Example

Here's a minimal example to get you started:

```typescript
import { Component } from '@angular/core';
import { RangeNavigatorModule, AreaSeriesService, DateTimeService, RangeTooltipService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RangeNavigatorModule],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  template: `
    <ejs-rangenavigator 
      id="rn-container" 
      [tooltip]="{ enable: true }"
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="chartData" 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AppComponent {
  chartData = [
    { date: new Date(2023, 0, 1), value: 21 },
    { date: new Date(2023, 1, 1), value: 24 },
    { date: new Date(2023, 2, 1), value: 36 },
    { date: new Date(2023, 3, 1), value: 38 }
  ];
}
```

---

## Common Patterns

### Pattern 1: DateTime Range Navigator with Area Series
When user needs to browse time-series data with date range selection:

```typescript
@Component({
  template: `
    <ejs-rangenavigator 
      id="range-navigator"
      [dataSource]="timeSeries" 
      valueType="DateTime"
      [intervalType]="'Months'">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class TimeSeriesComponent {
  timeSeries = [
    { date: new Date(2020, 0, 1), value: 40 },
    { date: new Date(2020, 1, 1), value: 50 },
    { date: new Date(2020, 2, 1), value: 60 }
  ];
}
```

### Pattern 2: Range Navigator with Period Selector
When user needs quick selection buttons for common time periods:

```typescript
@Component({
imports: [
         ChartModule, RangeNavigatorModule
    ],

providers: [ AreaSeriesService, DateTimeService, PeriodSelectorService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [periodSelectorSettings]='periodSelectorConfig'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='close' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class PeriodSelectorComponent {
  chartData = [...]; // time series data

  periodSelectorConfig = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months'