Syncfusion Angular Range Navigator

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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:

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:

@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:

@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' },
      { text: '6M', interval: 6, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ]
  };

  tooltipSettings = {
    enable: true,
    format: 'MMM dd, yyyy'
  };
}

Pattern 3: Lightweight Range Navigator for Mobile

When user needs optimized Range Navigator for mobile devices:

@Component({
  template: `
    <ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [labelFormat]='labelFormat'[dataSource]='mobileData' xName='x' yName='y'>
    </ejs-rangenavigator>
  `
})
export class MobileOptimizedComponent {
  mobileData = [...]; // optimized dataset for mobile
}

Pattern 4: Numeric Axis Range Navigator

When user needs to browse numeric data ranges:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0">
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class AppComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
}

Pattern 5: Range Navigator with Custom Tooltip

When user needs formatted, custom tooltip display:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, 
  AreaSeriesService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService],
  template: `
    <div style="padding: 20px;">
      <h2>Numeric Range Selector</h2>
      
      <ejs-rangenavigator 
        id="numericRange"
        [valueType]="rangeSettings.valueType"
        labelFormat="n0"
        [tooltip]='tooltipSettings'>
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series 
            [dataSource]="data" 
            xName="index" 
            yName="value" 
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
      </ejs-rangenavigator>
    </div>
  `
})
export class CustomTooltipComponent {
  public data = [
    { index: 0, value: 100 },
    { index: 10, value: 150 },
    { index: 20, value: 200 }
  ];

  public rangeSettings = {
    valueType: 'Double'
  };
  tooltipSettings = {
    enable: true,
    template: '<div>${value}</div>',
    header: 'Stock Price'
  };
}

Key Props Reference

API Reference

A complete API reference for the Syncfusion Angular RangeNavigator is available in the references folder. It includes property anchors, method links, and event argument types that map to the official docs.

Read the API reference: references/api-reference.md

Common Use Cases

1. Stock Market Data: Browse historical stock prices with date range selection
2. Sensor Data Monitoring: Navigate through time-series sensor readings and metrics
3. Website Analytics: Select date ranges for traffic and user behavior analysis
4. Financial Charts: Explore financial data with interactive period selection
5. Application Performance: Monitor performance metrics over time with quick period selectors
6. Sales Dashboard: Review sales data across different time periods
7. Weather Data: Browse historical weather patterns with date navigation
8. IoT Data Visualization: Navigate through large IoT sensor datasets efficiently

Integration with Other Components

The Range Navigator works seamlessly with other Syncfusion components:

• Chart Component: Synchronize Range Navigator selection with main chart display
• DataGrid: Filter grid data based on selected date range
• Stock Chart: Combine with stock data visualization for enhanced analysis

For more information, visit the Syncfusion Angular Range Navigator Documentation.