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.

Range Navigator API Reference (Syncfusion Angular)

This file summarizes the main properties, methods, and events for the Syncfusion Angular RangeNavigator component and links to the official API anchors for complex models and event arg types.

Table of Contents

• Component import
• Tag
• Key Properties
• Methods
• Events
• Example usage
• Official API

Component import

import { RangeNavigatorModule, AreaSeriesService, DateTimeService, RangeTooltipService, PeriodSelectorService } from '@syncfusion/ej2-angular-charts';

Tag

• <ejs-rangenavigator> (use via RangeNavigatorModule)

Key Properties (selected)

• dataSource: Object | DataManager — Chart data source (array or DataManager).
• valueType: [RangeValueType](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#valuetype) — Double, DateTime, Logarithmic, DateTimeCategory.
• value: number[] | Date[] — Selected range values (array of two values).
• minimum?: number | Date — Axis minimum value.
• maximum?: number | Date — Axis maximum value.
• interval?: number — Axis interval value.
• intervalType?: [RangeIntervalType](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/rangeintervaltype) — Interval type for date axes.
• groupBy?: [RangeIntervalType](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#groupby) — Auto grouping for labels.
• labelFormat?: [string](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#labelformat) — Label format string (e.g., MMM dd, yyyy, n0).
• labelIntersectAction?: [RangeLabelIntersectAction](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/rangelabelintersectaction) — Label collision handling.
• labelPlacement?: [NavigatorPlacement](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/navigatorplacement) — Label placement on ticks.
• labelStyle?: [FontModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/fontmodel) — Axis label styling.
• majorGridLines?: [MajorGridLinesModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#majorgridlines) — Major grid lines.
• majorTickLines?: [MajorTickLinesModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#majorticklines) — Major tick lines.
• navigatorStyleSettings?: [StyleSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/stylesettingsmodel) — Navigator style customizations.
• navigatorBorder?: [BorderModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/bordermodel) — Border customization.
• series?: [RangeNavigatorSeriesModel[]](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/rangenavigatorseriesmodel) — Series collection configuration.
• tooltip?: [RangeTooltipSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/rangetooltipsettingsmodel) — Tooltip settings.
• periodSelectorSettings?: [PeriodSelectorSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/periodselectorsettingsmodel) — Period selector configuration.
• skeleton?: [string](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#skeleton) — Date skeleton format (e.g., 'yMd', 'yMMM').
• skeletonType?: [SkeletonType](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/skeletontype) — Skeleton type (DateTime by default).
• enableGrouping?: [boolean](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#enablegrouping) — Enable multi-level axis labels for better label organization.
• enableDeferredUpdate?: [boolean](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#enabledeferredupdate) — Enable deferred update for smooth thumb dragging (updates on mouseup).
• allowSnapping?: [boolean](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#allowsnapping) — Enable snapping to nearest data point when dragging thumbs.
• enableRtl?: [boolean](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#enablertl) — Right-to-left rendering.
• enablePersistence?: [boolean](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#enablepersistence) — Persist state across reloads.
• theme?: [ChartTheme](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/charttheme) — Theme selection.
• height?: string — Chart height (px or %).
• width?: string — Chart width (px or %).
• locale?: string — Locale code for localization.
• margin?: [MarginModel](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/marginmodel) — Margin settings for the component.

For full property lists and default values, see the Base API: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default

Methods

• createSecondaryElement(): void — Creates secondary range elements. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#createsecondaryelement)
• destroy(): void — Destroys the component and removes handlers. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#destroy)
• export(type: ExportType, fileName?: string, orientation?: PdfPageOrientation, controls?: any[], width?: number, height?: number, isVertical?: boolean): void — Export as image/PDF. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#export)
• getModuleName(): string — Returns module name. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#getmodulename)
• onPropertyChanged(newProp: RangeNavigatorModel): void — Internal property-change handler. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#onpropertychanged)
• preRender(): void — Initialization entry point. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#prerender)
• print(id?: string | string[] | Element): void — Print the chart. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#print)
• render(): void — Render the component. (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#render)
• renderChart(resize?: boolean): void — Render internal chart (optionally resized). (see: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#renderchart)

Events (selected)

• beforePrint — Fires before printing starts. (args type: IPrintEventArgs, docs: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default#events)
• beforeResize — Fires before window resize. (args type: IRangeBeforeResizeEventArgs)
• changed — Fires after slider value changes. (args type: IChangedEventArgs)
• labelRender — Fires before axis label rendering. (args type: ILabelRenderEventsArgs)
• load — Fired before the Range Navigator renders. (args type: IRangeLoadedEventArgs)
• loaded — Fired after the Range Navigator renders. (args type: IRangeLoadedEventArgs)
• resized — Fires after navigator resized. (args type: IResizeRangeNavigatorEventArgs)
• selectorRender — Fires before selector rendering. (args type: IRangeSelectorRenderEventArgs)
• tooltipRender — Fires before tooltip display. (args type: IRangeTooltipRenderEventArgs)

Event payloads typically include start/end or value arrays and related DOM/event details. See the official events list for full arg definitions.

Example usage (Angular standalone component)

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

@Component({
  imports: [RangeNavigatorModule],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  standalone: true,
  template: `
    <ejs-rangenavigator
      id="rn"
      [dataSource]="data"
      valueType="DateTime"
      [tooltip]="{ enable: true }"
      (changed)="onChanged($event)"
      (load)="onLoad($event)">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series [dataSource]="data" xName="date" yName="value" type="Area"></e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class ExampleComponent implements OnInit {
  public data: any[] = [];

  ngOnInit(): void {
    this.data = [ { date: new Date(2023,0,1), value: 21 }, { date: new Date(2023,1,1), value: 24 } ];
  }

  onChanged(args: any) { console.log('range changed', args); }
  onLoad(args: any) { console.log('range navigator load', args); }
}

Base API

• Index: https://ej2.syncfusion.com/angular/documentation/api/range-navigator/index-default

Axis Configuration & Types

The Range Navigator supports two primary axis types for different data scenarios: DateTime and Numeric axes. This guide covers configuration, customization, and best practices.

Table of Contents

• DateTime Axis
• Basic DateTime Axis
• Interval Types for DateTime Axis
• DateTime Range Configuration
• DateTime Label Format
• Numeric Axis
• Basic Numeric Axis
• Numeric Range and Intervals
• Custom Numeric Intervals
• Axis Label Customization
• Label Format Function
• Numeric Label Formatting
• Axis Style and Appearance
• Label Style
• Grid Line Configuration
• Customize Grid Lines
• Comparison: DateTime vs Numeric Axis
• Best Practices
• Examples
• Stock Price Data with DateTime Axis
• Sensor Data with Numeric Axis

DateTime Axis

DateTime axis is ideal for time-series data and chronological navigation.

Basic DateTime Axis

@Component({
  template: `
    <ejs-rangenavigator 
      id="rn-container"
      valueType="DateTime"
      [intervalType]="'Months'">
      <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 DateTimeAxisComponent {
  chartData = [
    { date: new Date(2023, 0, 1), value: 100 },
    { date: new Date(2023, 1, 1), value: 120 },
    { date: new Date(2023, 2, 1), value: 140 },
    { date: new Date(2023, 3, 1), value: 135 }
  ];
}

Interval Types for DateTime Axis

Supported interval types:

@Component({
  template: `
    <!-- Daily data -->
    <ejs-rangenavigator 
      valueType="DateTime"
      [intervalType]="'Days'">
      <!-- series -->
    </ejs-rangenavigator>

    <!-- Hourly data -->
    <ejs-rangenavigator 
      valueType="DateTime"
      [intervalType]="'Hours'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class IntervalTypesComponent { }

DateTime Range Configuration

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [minimum]="minDate"
      [maximum]="maxDate"
      [intervalType]="'Months'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class DateTimeRangeComponent {
  public minDate: Date = new Date(2020, 0, 1);
  public maxDate: Date = new Date(2024, 11, 31);
}

DateTime Label Format

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelFormat]="'MMM dd, yyyy'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class DateFormatComponent { }

Common date format patterns:

• 'dd/MM/yyyy' → 01/01/2023
• 'MMM dd, yyyy' → Jan 01, 2023
• 'yyyy-MM-dd' → 2023-01-01
• 'dd-MMM' → 01-Jan
• 'MMM yyyy' → Jan 2023

Numeric Axis

Numeric axis is used for browsing numeric ranges without time considerations.

Basic Numeric Axis

@Component({
  template: `
    <ejs-rangenavigator 
      id="rn-container"
      
      valueType="Double">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="numericData"
          xName="index" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class NumericAxisComponent {
  numericData = [
    { index: 0, value: 50 },
    { index: 10, value: 75 },
    { index: 20, value: 100 },
    { index: 30, value: 90 }
  ];
}

Numeric Range and Intervals

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="Double"
      [minimum]="0"
      [maximum]="1000"
      [interval]="100">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="index" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class NumericRangeComponent { }

Custom Numeric Intervals

export class CustomIntervalComponent {
  template = `
    <ejs-rangenavigator 
      valueType="Double"
      [minimum]="0"
      [maximum]="500"
      [interval]="50">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="index" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `;
}

Axis Label Customization

Label Format Function

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      
      [labelFormat]="labelFormatFunc">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="chartData"
          xName="index" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class LabelFormatFunctionComponent {
  public chartData = [
    { date: new Date(2024, 0, 1), value: 100 },
    { date: new Date(2024, 5, 1), value: 150 },
    { date: new Date(2024, 11, 1), value: 120 }
  ];
  labelFormatFunc = (args: any): string => {
    const date = new Date(args.value);
    return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
  };
}

Numeric Label Formatting

export class NumericLabelFormatComponent {
  labelFormatFunc = (args: any): string => {
    if (args.value >= 1000000) {
      return (args.value / 1000000).toFixed(1) + 'M';
    } else if (args.value >= 1000) {
      return (args.value / 1000).toFixed(1) + 'K';
    }
    return args.value.toString();
  };
}

Axis Style and Appearance

Label Style

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelStyle]="labelStyle">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="index" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AxisStyleComponent {
  labelStyle = {
    color: '#555555',
    fontFamily: 'Arial',
    fontStyle: 'Normal',
    fontWeight: '500',
    size: '14px'
  };

}

Grid Line Configuration

Customize Grid Lines

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [majorGridLines]="majorGridLines">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="index" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class GridLineComponent {
  public majorGridLines = {
    width: 1,
    color: 'red',
    dashArray: '2,2'
  };
}

Comparison: DateTime vs Numeric Axis

Best Practices

1. DateTime Axis: Use for any time-based data (stock prices, sensor readings, analytics) 2. Numeric Axis: Use for index-based data or non-temporal ranges 3. Label Clarity: Always use clear, readable date/numeric formats 4. Interval Selection: Match intervals to your data granularity 5. Range Configuration: Set appropriate minimum/maximum values for optimal navigation 6. Performance: For large datasets, consider interval optimization

Examples

Stock Price Data with DateTime Axis

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelFormat]="'dd-MMM'"
      [intervalType]="'Months'">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series
          [dataSource]='stockData' 
          xName='date' 
          yName='close' 
          type'Area'>
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class StockPriceComponent {
  stockData = [
    { date: new Date(2023, 0, 1), close: 150 },
    { date: new Date(2023, 1, 1), close: 155 },
    // ... more data
  ];
}

Sensor Data with Numeric Axis

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="Double"
      [minimum]="0"
      [maximum]="100"
      [interval]="10">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="index" 
          yName="temperature" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class SensorDataComponent {
  sensorData = [
    { index: 0, temperature: 25 },
    { index: 1, temperature: 26 },
    // ... more readings
  ];
}

Getting Started with Angular Range Navigator

This guide covers the initial setup and basic configuration of the Syncfusion Range Navigator component in Angular applications.

Table of Contents

• Prerequisites
• Installation
• Step 1: Create a New Angular Application
• Step 2: Install Syncfusion Packages
• Step 3: Import Required Modules
• Basic Component Setup
• Minimal Example
• Service Providers
• Data Binding
• Local Array Binding
• Remote Data Binding
• Axis Configuration
• DateTime Axis
• Numeric Axis
• Enable Tooltip
• Running Your Application
• Troubleshooting
• Module Not Found Error
• Data Not Rendering

Prerequisites

• Angular 21+ (Angular 19+ with standalone components support)
• Node.js and npm installed
• Basic knowledge of Angular components and TypeScript
• Syncfusion license (trial or commercial)

Installation

Step 1: Create a New Angular Application

Using Angular CLI:

ng new my-range-navigator-app
cd my-range-navigator-app

Step 2: Install Syncfusion Packages

Install the Syncfusion Angular Charts package (which includes Range Navigator):

Option 1: Using Angular Schematic (Recommended)

ng add @syncfusion/ej2-angular-charts

This command automatically:

• Adds @syncfusion/ej2-angular-charts to your package.json
• Imports required modules and styles
• Sets up theming and dependencies

Option 2: Using npm/yarn

# Install latest stable version
npm install @syncfusion/ej2-angular-charts

# Or using yarn
yarn add @syncfusion/ej2-angular-charts

Option 3: Install Specific Version

# Replace VERSION with your desired version (e.g., 32.1.19, 33.1.44)
npm install @syncfusion/ej2-angular-charts@VERSION

# Example for a specific version
npm install @syncfusion/ej2-angular-charts@33.1.44

Note: Check the Syncfusion release notes for the latest version compatible with your Angular version.

Step 3: Import Required Modules

In your component file:

import { Component, ViewEncapsulation } from '@angular/core';
import { 
  RangeNavigatorModule,
  AreaSeriesService,
  DateTimeService,
  RangeTooltipService 
} from '@syncfusion/ej2-angular-charts';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RangeNavigatorModule
  ],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  encapsulation: ViewEncapsulation.None,
  template: `<ejs-rangenavigator id="rn-container"></ejs-rangenavigator>`,
  styleUrls: []
})
export class AppComponent { }

Basic Component Setup

Minimal Example

Create a simple Range Navigator with area series:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RangeNavigatorModule
  ],
  providers: [AreaSeriesService, DateTimeService],
  template: `
    <ejs-rangenavigator 
      id="rn-container"
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="data"
          xName="date"
          yName="value"
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AppComponent {
  data = [
    { 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 },
    { date: new Date(2023, 4, 1), value: 54 },
    { date: new Date(2023, 5, 1), value: 57 }
  ];
}

Service Providers

Range Navigator requires specific services for different features. Import and provide them:

import {
  AreaSeriesService,      // For area series rendering
  LineSeriesService,      // For line series rendering
  SplineSeriesService,    // For spline series rendering
  DateTimeService,        // For datetime axis support
  RangeTooltipService     // For tooltip functionality
} from '@syncfusion/ej2-angular-charts';

@Component({
  providers: [
    AreaSeriesService, 
    DateTimeService, 
    RangeTooltipService
  ]
})
export class MyComponent { }

Data Binding

Local Array Binding

import { Component, OnInit } from '@angular/core';
import { ChartModule, RangeNavigatorModule, AreaSeriesService, DateTimeService } from '@syncfusion/ej2-angular-charts';
import { datasrc } from './datasource';

@Component({
    imports: [ChartModule, RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    standalone: true,
    selector: 'app-root',
    template = `
    <ejs-rangenavigator >
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="rangeData"
          xName="x" 
          yName="yValue" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `,
})
export class LocalDataComponent {
  rangeData = [
    { x: 1, yValue: 2 },
    { x: 2, yValue: 4 },
    { x: 3, yValue: 3 },
    { x: 4, yValue: 5 }
  ];  
}

Remote Data Binding

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { RangeNavigatorModule, AreaSeriesService, DateTimeService } from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-remote-data',
  standalone: true,
  // 1. Include modules for the template
  imports: [RangeNavigatorModule, CommonModule],
  // 2. Inject required Syncfusion services
  providers: [AreaSeriesService, DateTimeService],
  template: `
    <!-- 3. Added valueType="DateTime" to handle date fields -->
    <ejs-rangenavigator 
      *ngIf="remoteData" 
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="remoteData" 
          xName="date" 
          yName="close" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class RemoteDataComponent implements OnInit {
  remoteData: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Replace with your actual API endpoint
    this.http.get('https://api.example.com/data')
      .subscribe(data => {
        this.remoteData = data;
      });
  }
}

Axis Configuration

DateTime Axis

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [intervalType]="'Months'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class DateTimeAxisComponent { }

Numeric Axis

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="Double"
      [minimum]="0"
      [maximum]="100">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class NumericAxisComponent { }

Enable Tooltip

@Component({
  providers: [RangeTooltipService],
  template: `
    <ejs-rangenavigator 
      [tooltip]="{ enable: true }">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class TooltipComponent { }

Running Your Application

ng serve

Navigate to http://localhost:4200/ to see your Range Navigator in action.

Troubleshooting

Module Not Found Error

Ensure all required services are provided:

providers: [
  AreaSeriesService, 
  DateTimeService, 
  RangeTooltipService
]

Data Not Rendering

Check that: 1. dataSource is properly assigned 2. xName and yName match your data properties 3. Series type is valid (Area, Line, Spline, etc.) 4. Data contains valid values

Labels, Ticks & Formatting

This guide covers axis label customization, grid tick configuration, and formatting options for the Range Navigator component.

Table of Contents

• Axis Labels
• Label Customization
• Label Format Patterns
• Custom Label Format Function
• Numeric Label Formatting
• Grid Lines and Ticks
• Grid Line Configuration
• Grid Line Styling
• Hide Grid Lines
• Label Position and Rotation
• Label Positioning
• Label Rotation
• Interval and Label Spacing
• Custom Intervals
• Numeric Intervals
• Number Formatting
• Currency Format
• Percentage Format
• Scientific Notation
• Locale-Specific Formatting
• Date Formatting with Locale
• Axis Label Events
• Label Format with Conditions
• Text Alignment and Wrapping
• Label Alignment
• Complex Formatting Example
• Multi-Level Labels
• Best Practices
• Complete Example

Axis Labels

Label Customization

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelFormat]="'MMM dd'"
      [labelStyle]="labelStyle">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class LabelCustomizationComponent {
  labelStyle = {
    color: '#555555',
    fontFamily: 'Segoe UI, sans-serif',
    fontStyle: 'Normal',
    fontWeight: '500',
    size: '14px'
  };
}

Label Format Patterns

Common date format patterns:

@Component({
  template: `
    <!-- Day/Month/Year format -->
    <ejs-rangenavigator [labelFormat]="'dd/MM/yyyy'">
      <!-- series -->
    </ejs-rangenavigator>

    <!-- Month Year format -->
    <ejs-rangenavigator [labelFormat]="'MMM yyyy'">
      <!-- series -->
    </ejs-rangenavigator>

    <!-- ISO format -->
    <ejs-rangenavigator [labelFormat]="'yyyy-MM-dd'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class DateFormatComponent { }

Custom Label Format Function

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelFormat]="labelFormatFunc">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class CustomLabelFormatComponent {
  labelFormatFunc = (args: any): string => {
    const date = new Date(args.value);
    const month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return `${month[date.getMonth()]} '${date.getFullYear().toString().slice(2)}`;
  };
}

Numeric Label Formatting

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="Double"
      [labelFormat]="numericLabelFunc">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class NumericLabelComponent {
  numericLabelFunc = (args: any): string => {
    if (args.value >= 1000000) {
      return (args.value / 1000000).toFixed(1) + 'M';
    } else if (args.value >= 1000) {
      return (args.value / 1000).toFixed(1) + 'K';
    }
    return args.value.toString();
  };
}

Grid Lines and Ticks

Grid Line Configuration

@Component({
  template: `
    <ejs-rangenavigator 
      [majorGridLines]="majorGridLines"
      [majorTickLines]="majorTickLines">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class GridLineComponent {
  majorGridLines = {
    visible: true,
    width: 1,
    color: 'rgba(200, 200, 200, 0.5)',
    dashArray: '2,2'
  };

  majorTickLines = {
    visible: true,
    width: 2,
    color: '#555555'
  };

}

Grid Line Styling

@Component({
  template: `
    <ejs-rangenavigator 
      [majorGridLines]="customGridSettings">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class GridStyleComponent {
  customGridSettings = {
    visible: true,
    width: 2,
    color: '#3498db',
    dashArray: '5,5'
  };
}

Hide Grid Lines

@Component({
  template: `
    <ejs-rangenavigator 
      [majorGridLines]="{ visible: false }">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class NoGridComponent { }

Label Position and Rotation

Label Positioning

@Component({
  template: `
    <ejs-rangenavigator 
      [labelPosition]="'Outside'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class LabelPositionComponent { }

Label position options: Inside, Outside

Label Rotation

@Component({
  template: `
    <ejs-rangenavigator 
      [labelStyle]="labelStyle">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class LabelRotationComponent {
  labelStyle = {
    size: '14px',
    angle: 45,  // Rotation angle
    enableRotation: true
  };
}

Interval and Label Spacing

Custom Intervals

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [intervalType]="'Months'"
      [interval]="1">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class CustomIntervalComponent { }

Numeric Intervals

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="Double"
      [interval]="50"
      [minimum]="0"
      [maximum]="500">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class NumericIntervalComponent { }

Number Formatting

Currency Format

export class CurrencyFormatComponent {
  labelFormatFunc = (args: any): string => {
    return '$' + args.value.toFixed(2);
  };
}

Percentage Format

export class PercentageFormatComponent {
  labelFormatFunc = (args: any): string => {
    return args.value.toFixed(1) + '%';
  };
}

Scientific Notation

export class ScientificFormatComponent {
  labelFormatFunc = (args: any): string => {
    return args.value.toExponential(2);
  };
}

Locale-Specific Formatting

Date Formatting with Locale

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelFormat]="'MMM dd, yyyy'">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class LocaleFormatComponent {
  ngOnInit(): void {
    // Set locale for date formatting
    const locale = navigator.language; // e.g., 'en-US', 'fr-FR', 'de-DE'
  }

  // Format dates based on locale
  formatDateLocale(date: Date, locale: string): string {
    return date.toLocaleDateString(locale, {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  }
}

Axis Label Events

Label Format with Conditions

@Component({
  template: `
    <ejs-rangenavigator 
      (labelRender)="onLabelRender($event)">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class LabelEventComponent {
  onLabelRender(args: any): void {
    // Modify label based on value
    if (args.value > 500) {
      args.text = '<span style="color: red;">' + args.text + '</span>';
    }
  }
}

Text Alignment and Wrapping

Label Alignment

@Component({
  template: `
    <ejs-rangenavigator 
      [labelStyle]="labelStyle">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class LabelAlignmentComponent {
  labelStyle = {
    textAlignment: 'Center',  // Left, Center, Right
    fontWeight: 'Bold',
    size: '16px'
  };
}

Complex Formatting Example

@Component({
  template: `
    <ejs-rangenavigator 
      valueType="DateTime"
      [labelFormat]="advancedLabelFormat">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class ComplexFormatComponent {
  advancedLabelFormat = (args: any): string => {
    const date = new Date(args.value);
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    
    // Show quarter format
    const quarter = Math.ceil(month / 3);
    return `Q${quarter} '${year.toString().slice(2)}`;
  };
}

Multi-Level Labels

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';

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

providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" labelPosition='Outside' valueType='DateTime' [value]='value'  intervalType='Quarter' [enableGrouping]='grouping' [dataSource]='chartData' xName='x' yName='y' tooltip='tooltip'></ejs-rangenavigator>`
})

export class AppComponent implements OnInit {
    public data: object[] = [];
    public value: number = 0;
    public point: object = {};
    public chartData?: Object[];
    public values?: Object[];
    public grouping?: boolean;
    public tooltip?: Object;
    ngOnInit(): void {
        this.chartData =[];
        for (let j = 1; j < 1090; j++) {
            this.value += (Math.random() * 10 - 5);
            this.value = this.value < 0 ? Math.abs(this.value) : this.value;
            this.point = { x: new Date(2000, 0, j), y: this.value, z: (this.value + 10) };
            this.chartData.push(this.point);
        };
        this.values = [new Date("2001, 1,1"), new Date("2002,1,1")];
        this.grouping = true;
        this.tooltip= { enable: true };
    }
}

Best Practices

1. Date Format: Use clear, internationally understandable formats 2. Label Density: Avoid too many labels; adjust interval appropriately 3. Readability: Ensure fonts are large enough to read 4. Consistency: Use same formatting across the application 5. Performance: Avoid complex formatting functions for large datasets 6. Accessibility: High contrast between labels and background 7. RTL Support: Consider RTL text direction if needed

Complete Example

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

@Component({
  selector: 'app-labels-formatting',
  standalone: true,
  imports: [
    RangeNavigatorModule
  ],
  providers: [AreaSeriesService, DateTimeService],
  template: `
    <ejs-rangenavigator 
      id="rn-container"
      valueType="DateTime"
      [labelFormat]="'MMM dd, yyyy'"
      [labelStyle]="labelStyle"
      [majorGridLines]="majorGridLines"
      [intervalType]="'Months'">
      <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 LabelsFormattingComponent {
  chartData = [
    { date: new Date(2023, 0, 1), value: 50 },
    { date: new Date(2023, 1, 1), value: 65 },
    { date: new Date(2023, 2, 1), value: 75 },
    { date: new Date(2023, 3, 1), value: 60 }
  ];

  labelStyle = {
    color: '#2c3e50',
    fontFamily: 'Segoe UI, sans-serif',
    fontWeight: '500',
    size: '12px'
  };

  majorGridLines = {
    visible: true,
    width: 1,
    color: '#ecf0f1',
    dashArray: '2,2'
  };
}

Lightweight Mode

By default, when the dataSource for series is empty, a lightweight Range Selector will be displayed without the chart series. This mode is particularly useful for mobile devices, reduced data scenarios, or when you only need the range selection interface without data visualization.

Table of Contents

• What is Lightweight Mode?
• When to Use Lightweight Mode
• Basic Lightweight Implementation
• Lightweight with Numeric Data
• Lightweight with Customization
• Lightweight with Tooltip
• Lightweight with Period Selector
• Lightweight for Mobile Devices
• Lightweight with External Chart
• Configuration Requirements for Lightweight Mode
• For DateTime
• For Numeric
• Performance Benefits
• Complete Lightweight Example
• Lightweight vs Full Mode Comparison

What is Lightweight Mode?

Lightweight mode provides a simplified Range Navigator that:

• Displays only the range selection interface (sliders and axis)
• Removes the chart series visualization
• Reduces rendering overhead and improves performance
• Ideal for mobile devices with limited screen space
• Useful when data visualization is handled elsewhere

When to Use Lightweight Mode

Use lightweight mode when:

• Deploying on mobile devices where performance matters
• Chart data is displayed in a separate component
• You only need range selection functionality
• Minimizing UI complexity
• Reducing initial load time
• Screen space is constrained

Don't use lightweight mode when:

• Users need to see data distribution
• Visual context helps with range selection
• Desktop application with ample resources
• Data preview is essential for decision-making

Basic Lightweight Implementation

When no series or dataSource is provided, Range Navigator automatically enters lightweight mode:

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [DateTimeService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            valueType="DateTime"
            [minimum]="minDate"
            [maximum]="maxDate"
            [value]="value"
            labelFormat="MMM yyyy">
        </ejs-rangenavigator>`
})
export class AppComponent {
    public minDate: Date = new Date(2023, 0, 1);
    public maxDate: Date = new Date(2023, 11, 31);
    public value: Date[] = [new Date(2023, 2, 1), new Date(2023, 9, 1)];
}

Lightweight with Numeric Data

import { Component } from '@angular/core';
import { RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            valueType="Double"
            [minimum]="0"
            [maximum]="100"
            [interval]="10"
            [value]="value">
        </ejs-rangenavigator>`
})
export class AppComponent {
    public value: number[] = [20, 80];
}

Lightweight with Customization

You can still customize the appearance in lightweight mode:

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [DateTimeService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            valueType="DateTime"
            [minimum]="minDate"
            [maximum]="maxDate"
            [value]="value"
            labelFormat="MMM"
            [navigatorStyleSettings]="navigatorStyle"
            [navigatorBorder]="navigatorBorder">
        </ejs-rangenavigator>`
})
export class AppComponent {
    public minDate: Date = new Date(2023, 0, 1);
    public maxDate: Date = new Date(2023, 11, 31);
    public value: Date[] = [new Date(2023, 3, 1), new Date(2023, 8, 1)];

    public navigatorStyle: Object = {
        selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
        thumb: {
            type: 'Circle',
            width: 20,
            height: 20,
            fill: '#2196F3',
            border: { width: 2, color: '#ffffff' }
        }
    };

    public navigatorBorder: Object = { 
        width: 2, 
        color: '#2196F3' 
    };
}

Lightweight with Tooltip

import { Component } from '@angular/core';
import { 
    RangeNavigatorModule, 
    DateTimeService, 
    PeriodSelectorService 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [DateTimeService, PeriodSelectorService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            valueType="DateTime"
            [minimum]="minDate"
            [maximum]="maxDate"
            [value]="value"
            [periodSelectorSettings]="periodSettings">
        </ejs-rangenavigator>`
})
export class AppComponent {
    public minDate = new Date(2020, 0, 1);
    public maxDate = new Date(2023, 11, 31);
    public value = [new Date(2022, 0, 1), new Date(2023, 11, 31)];

    public periodSettings: Object = {
        position: 'Top',
        periods: [
            { intervalType: 'Months', interval: 1, text: '1M' },
            { intervalType: 'Months', interval: 3, text: '3M' },
            { intervalType: 'Years', interval: 1, text: '1Y' },
            { text: 'All' }
        ]
    };
}

Lightweight with Period Selector

Combine lightweight mode with period selector for a clean, button-based interface:

import { Component } from '@angular/core';
import { 
    RangeNavigatorModule, 
    DateTimeService, 
    PeriodSelectorService 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [DateTimeService, PeriodSelectorService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            valueType="DateTime"
            [minimum]="minDate"
            [maximum]="maxDate"
            [value]="value"
            [periodSelectorSettings]="periodSettings">
        </ejs-rangenavigator>`
})
export class AppComponent {
    public minDate = new Date(2020, 0, 1);
    public maxDate = new Date(2023, 11, 31);
    public value = [new Date(2022, 0, 1), new Date(2023, 11, 31)];

    public periodSettings: Object = {
        position: 'Top',
        periods: [
            { intervalType: 'Months', interval: 1, text: '1M' },
            { intervalType: 'Months', interval: 3, text: '3M' },
            { intervalType: 'Years', interval: 1, text: '1Y' },
            { text: 'All' }
        ]
    };
}

Lightweight for Mobile Devices

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule, CommonModule],
    providers: [DateTimeService, AreaSeriesService],
    template: `
        <ejs-rangenavigator id="responsiveRN" valueType="DateTime" [value]="value">
            <e-rangenavigator-series-collection *ngIf="!isMobile">
                <e-rangenavigator-series [dataSource]="data" xName="date" yName="value" type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public isMobile: boolean = window.innerWidth < 768;
    public value = [new Date(2023, 0, 1), new Date(2023, 5, 1)];
    public data = [{ date: new Date(2023, 0, 1), value: 100 }, /* ... */];

    @HostListener('window:resize', ['$event'])
    onResize() {
        this.isMobile = window.innerWidth < 768;
    }
}

Lightweight with External Chart

Use lightweight Range Navigator to control a separate chart component:

import { Component } from '@angular/core';
import { 
    ChartModule, 
    RangeNavigatorModule, 
    LineSeriesService, 
    DateTimeService, 
    RangeTooltipService
} from '@syncfusion/ej2-angular-charts';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [ChartModule, RangeNavigatorModule, CommonModule],
    providers: [LineSeriesService, DateTimeService, RangeTooltipService],
    template: `
        <div>
            <!-- Main Chart -->
            <ejs-chart [primaryXAxis]="xAxis" title="Sales Data">
                <e-series-collection>
                    <e-series [dataSource]="filteredData" xName="date" yName="value" type="Line">
                    </e-series>
                </e-series-collection>
            </ejs-chart>

            <!-- Lightweight Range Navigator -->
            <ejs-rangenavigator 
                id="rangeNavigator" 
                valueType="DateTime"
                [minimum]="minDate"
                [maximum]="maxDate"
                [value]="value"
                labelFormat="MMM"
                (changed)="handleRangeChange($event)">
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    public minDate: Date = new Date(2023, 0, 1);
    public maxDate: Date = new Date(2023, 11, 31);
    public value: Date[] = [new Date(2023, 0, 1), new Date(2023, 5, 1)];
    public xAxis: Object = { valueType: 'DateTime' };

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 },
        { date: new Date(2023, 4, 1), value: 120 },
        { date: new Date(2023, 5, 1), value: 125 },
        { date: new Date(2023, 6, 1), value: 130 },
        { date: new Date(2023, 7, 1), value: 128 },
        { date: new Date(2023, 8, 1), value: 135 },
        { date: new Date(2023, 9, 1), value: 140 },
        { date: new Date(2023, 10, 1), value: 138 },
        { date: new Date(2023, 11, 1), value: 145 }
    ];

    public filteredData: any[] = this.data.filter(
        item => item.date >= this.value[0] && item.date <= this.value[1]
    );

    public handleRangeChange(args: any): void {
        this.filteredData = this.data.filter(
            item => item.date >= (args.start as Date) && item.date <= (args.end as Date)
        );
    }
}

Configuration Requirements for Lightweight Mode

When using lightweight mode, you must explicitly set:

For DateTime

<ejs-rangenavigator
  valueType="DateTime"
  [minimum]="minDate"    <!-- Required -->
  [maximum]="maxDate"    <!-- Required -->
  [value]="value"         <!-- Optional initial range -->
  labelFormat="MMM yyyy"  <!-- Optional format -->
></ejs-rangenavigator>

For Numeric

<ejs-rangenavigator
  valueType="Double"
  [minimum]="0"          <!-- Required -->
  [maximum]="100"        <!-- Required -->
  [interval]="10"        <!-- Optional -->
  [value]="[20, 80]"     <!-- Optional initial range -->
></ejs-rangenavigator>

Performance Benefits

Lightweight mode provides:

• Faster Rendering: No series data to process or render
• Reduced Memory: Smaller memory footprint without chart data
• Smaller Bundle: Only core Range Navigator modules needed
• Better Mobile Experience: Simplified UI for small screens
• Quick Initialization: Instant load without data processing

Complete Lightweight Example

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
    RangeNavigatorModule, 
    DateTimeService, 
    RangeTooltipService 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule, CommonModule],
    providers: [DateTimeService, RangeTooltipService],
    template: `
        <div class="App">
            <h2>Lightweight Range Navigator</h2>
            <p>Performance-optimized for mobile devices</p>
            
            <ejs-rangenavigator 
                id="rangeNavigator" 
                valueType="DateTime"
                [minimum]="minDate"
                [maximum]="maxDate"
                [value]="initialValue"
                labelFormat="MMM yyyy"
                intervalType="Months"
                [tooltip]="tooltip"
                [navigatorStyleSettings]="navigatorStyle"
                (changed)="handleChange($event)">
            </ejs-rangenavigator>

            <div style="margin-top: 20px;">
                <h3>Selected Range:</h3>
                <!-- In Angular, we use class properties instead of useState -->
                <p>From: {{ selectedRange.start | date:'mediumDate' }}</p>
                <p>To: {{ selectedRange.end | date:'mediumDate' }}</p>
            </div>
        </div>`
})
export class AppComponent {
    public minDate: Date = new Date(2023, 0, 1);
    public maxDate: Date = new Date(2023, 11, 31);
    
    // Equivalent to initial state value
    public initialValue: Date[] = [new Date(2023, 0, 1), new Date(2023, 5, 1)];
    
    // Class property to track the "state" of the selection
    public selectedRange = {
        start: new Date(2023, 0, 1),
        end: new Date(2023, 5, 1)
    };

    public tooltip: Object = { 
        enable: true,
        displayMode: 'Always'
    };

    public navigatorStyle: Object = {
        selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
        thumb: {
            type: 'Circle',
            width: 20,
            height: 20,
            fill: '#2196F3',
            border: { width: 2, color: '#ffffff' }
        }
    };

    // Using 'any' to bypass the need for IChangedEventArgs import
    public handleChange(args: any): void {
        // Updating class properties triggers automatic UI updates in Angular
        this.selectedRange = {
            start: args.start,
            end: args.end
        };
        console.log('Selected:', args.start, 'to', args.end);
    }
}

Lightweight vs Full Mode Comparison

Period Selector & Range Selection

The Period Selector provides quick selection buttons for common date ranges, enhancing user experience for timeline navigation.

Table of Contents

• Enable Period Selector
• Basic Period Selector
• Available Periods
• Standard Periods
• Interval Types
• Period Selector with Styling
• Background and Button Colors
• Positioning Period Selector
• Top Position
• Bottom Position
• Handling Period Selection Events
• Track Period Changes
• Custom Periods
• Define Custom Date Ranges With interval
• Hide Period Selector
• Combining Period Selector with Other Features
• Period Selector with Tooltip
• Period Selector with Multiple Series
• Best Practices
• Complete Example with All Features

Enable Period Selector

Period Selector displays preset buttons like "1M", "3M", "6M", "1Y" for quick range selection.

Basic Period Selector

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts'
import { AreaSeriesService, DateTimeService, PeriodSelectorService} from '@syncfusion/ej2-angular-charts'




import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource'

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

providers: [ AreaSeriesService, DateTimeService, PeriodSelectorService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-rangenavigator id="rn-container" valueType='DateTime' [periodSelectorSettings]='periodsValue'>
            <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 AppComponent implements OnInit {
    public periodsValue?: Object[];
    public chartData?: Object[];
    public tooltip?: Object[];
    public labelFormat?: string;
    ngOnInit(): void {
        this.periodsValue = {
            periods: [
                { text: '1M', interval: 1, intervalType: 'Months' },{ text: '3M', interval: 3, intervalType:'Months'},
                { text: '6M', interval: 6, intervalType: 'Months' }, { text: 'YTD' },
                { text: '1Y', interval: 1, intervalType: 'Years' },
                { text: '2Y', interval: 2, intervalType: 'Years', selected: true },
                { text: 'All' }
            ]
        } as any;
        this.chartData = chartData;
    }
}

Available Periods

Standard Periods

export class StandardPeriodsComponent {
  periodSelector = {
    periods: [
      // 1 Day
      { text: '1D', interval: 1, intervalType: 'Days' },
      
      // 1 Week
      { text: '1W', interval: 1, intervalType: 'Weeks' },
      
      // 1 Month
      { text: '1M', interval: 1, intervalType: 'Months' },
      
      // 3 Months
      { text: '3M', interval: 3, intervalType: 'Months' },
      
      // 6 Months
      { text: '6M', interval: 6, intervalType: 'Months' },
      
      // 1 Year
      { text: '1Y', interval: 1, intervalType: 'Years' },
      
      // Year-to-Date
      { text: 'YTD', interval: 1, intervalType: 'Years' },
      
      // All data
      { text: 'All', interval: 1, intervalType: 'Years' }
    ]
  };
}

Interval Types

Available interval types for period selector:

Period Selector with Styling

Background and Button Colors

@Component({
  template: `
    <ejs-rangenavigator 
      [periodSelectorSettings]="periodSelector">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class StyledPeriodComponent {
  periodSelector = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ],
    height: 50,
    buttonStyle: {
      backgroundColor: '#f0f0f0',
      color: '#333',
      border: '1px solid #ccc',
      borderRadius: '4px'
    }
  };
}

Positioning Period Selector

Top Position

export class TopPeriodComponent {
  periodSelector = {
    periods: [...],
    position: 'Top'  // Default position
  };
}

Bottom Position

export class BottomPeriodComponent {
  periodSelector = {
    periods: [...],
    position: 'Bottom'
  };
}

Handling Period Selection Events

Track Period Changes

import { Component, ViewChild } from '@angular/core';
// Import the Component class for typing
import { RangeNavigatorComponent, RangeNavigatorModule, ChartModule, 
         AreaSeriesService, DateTimeService, PeriodSelectorService } from '@syncfusion/ej2-angular-charts';
import { CommonModule } from '@angular/common';

@Component({
  imports: [ChartModule, RangeNavigatorModule, CommonModule],
  providers: [AreaSeriesService, DateTimeService, PeriodSelectorService],
  standalone: true,
  selector: 'app-container',
  template: `
    <ejs-rangenavigator 
      #rangeNav
      valueType="DateTime"
      (periodSelectorChange)="onPeriodChange($event)"
      [periodSelectorSettings]="periodSelector">
      <!-- A series is required for the navigator to calculate ranges -->
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series [dataSource]="data" xName="x" yName="y" type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>

    <div *ngIf="selectedPeriod">
      Selected period: {{ selectedPeriod }}
    </div>
  `
})
export class AppComponent {
  // Fix 1: Correct type
  @ViewChild('rangeNav') rangeNav!: RangeNavigatorComponent;
  
  selectedPeriod: string = '';
  data = [{ x: new Date(2023, 0, 1), y: 10 }, { x: new Date(2023, 11, 31), y: 20 }];

  periodSelector = {
    periods: [
        { text: '1M', interval: 1, intervalType: 'Months' },
        { text: '3M', interval: 3, intervalType: 'Months' },
        { text: '1Y', interval: 1, intervalType: 'Years' }
      ]
  }

  onPeriodChange(args: any): void {
    // Fix 2: Use selectedPeriodText
    this.selectedPeriod = args.selectedPeriodText;
    console.log('Period changed to:', args.selectedPeriodText);
  }
}

Custom Periods

Define Custom Date Ranges With interval

@Component({
  template: `
    <ejs-rangenavigator 
      [periodSelectorSettings]="periodSelector">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class CustomPeriodComponent {
  periodSelector = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months' },
      { text: 'Q3', interval: 1, intervalType: 'Quarter' },
      { text: '6M', interval: 6, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' },
    ]
  };
}

Hide Period Selector

@Component({
  template: `
    <ejs-rangenavigator 
      [periodSelectorSettings]="{ periods: [] }">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class NoPeriodComponent { }

Combining Period Selector with Other Features

Period Selector with Tooltip

@Component({
  template: `
    <ejs-rangenavigator 
      [periodSelectorSettings]="periodSelector"
      [tooltip]="tooltipSettings">
      <!-- series -->
    </ejs-rangenavigator>
  `,
  providers: [RangeTooltipService]
})
export class CombinedFeaturesComponent {
  periodSelector = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '6M', interval: 6, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ]
  };

  tooltipSettings = {
    enable: true,
    format: '${valueX}: ${valueY}'
  };
}

Period Selector with Multiple Series

@Component({
  template: `
    <ejs-rangenavigator 
      [periodSelectorSettings]="periodSelector">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          xName="date" 
          yName="series1" 
          type="Area">
        </e-rangenavigator-series>
        <e-rangenavigator-series 
          xName="date" 
          yName="series2" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class MultiSeriesPeriodComponent {
  periodSelector = {
    periods: [
      { text: '1M', interval: 1, intervalType: 'Months' },
      { text: '3M', interval: 3, intervalType: 'Months' },
      { text: '1Y', interval: 1, intervalType: 'Years' }
    ]
  };
}

Best Practices

1. Sensible Defaults: Always provide commonly used periods (1M, 3M, 6M, 1Y) 2. Clear Labels: Use intuitive text labels (e.g., "1M" for 1 month) 3. Position: Place period selector above the chart for better visibility 4. Mobile Optimization: Ensure buttons are large enough to tap on mobile devices 5. Feedback: Highlight the currently selected period 6. Custom Periods: Add domain-specific periods relevant to your data

Complete Example with All Features

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

@Component({
  selector: 'app-period-selector-demo',
  standalone: true,
  imports: [
    RangeNavigatorModule
  ],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  template: `
    <ejs-rangenavigator 
      id="rn-container"
      valueType="DateTime"
      [periodSelectorSettings]="periodSelector"
      [tooltip]="tooltipSettings"
      (changed)="onRangeChanged($event)">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="chartData"
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
    <div style="margin-top: 20px;">
      <p>Selected Range: {{ selectedRange }}</p>
    </div>
  `
})
export class PeriodSelectorDemoComponent {
  chartData = [
    { date: new Date(2020, 0, 1), value: 50 },
    { date: new Date(2020, 6, 1), value: 100 },
    { date: new Date(2021, 0, 1), value: 80 },
    { date: new Date(2022, 0, 1), value: 120 },
    { date: new Date(2023, 0, 1), value: 90 }
  ];

  periodSelector = {
    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' },
      { text: 'All', interval: 1, intervalType: 'Years' }
    ]
  };

  tooltipSettings = {
    enable: true,
    format: 'Date: ${valueX}<br>Value: ${valueY}'
  };

  selectedRange = 'Select a period';

  onRangeChanged(args: any): void {
    this.selectedRange = `From ${args.start.toDateString()} to ${args.end.toDateString()}`;
  }
}

Export, Print & Accessibility

The Range Navigator component supports exporting to various image formats (PNG, JPEG, SVG, PDF), printing functionality, and comprehensive accessibility features including WCAG 2.2 compliance, keyboard navigation, and screen reader support.

Table of Contents

• Accessibility
• Accessibility Compliance
• WAI-ARIA Attributes
• Screen Reader Support
• Color Contrast
• Accessibility Testing
• Complete Accessible Example
• Export Formats
• Basic Export
• Export to PNG
• Export to JPEG
• Export to PDF
• Export with Custom Filename
• Print Functionality
• Basic Print
• Keyboard Shortcut for Print
• Multiple Export Options
• Format Comparison
• Browser Compatibility
• When to Use Each Format
• PNG
• JPEG
• SVG
• PDF
• Export Method Signature
• Print Method Signature
• Best Practices
• Common Use Cases
• Report Generation
• Web Sharing
• High-Quality Print
• Email Attachment

---

Accessibility

The Range Navigator component follows accessibility guidelines and standards, including ADA, Section 508, and WCAG 2.2, ensuring the component is usable by people with disabilities.

Accessibility Compliance

The Range Navigator component meets the following accessibility standards:

WAI-ARIA Attributes

The Range Navigator implements proper WAI-ARIA attributes for accessibility:

ARIA Roles

@Component({
  template: `
    <ejs-rangenavigator 
      id="rangeNavigator"
      valueType="DateTime">
      <e-rangenavigator-series-collection>
        <e-rangenavigator-series 
          [dataSource]="data" 
          xName="date" 
          yName="value" 
          type="Area">
        </e-rangenavigator-series>
      </e-rangenavigator-series-collection>
    </ejs-rangenavigator>
  `
})
export class AccessibleRangeNavigatorComponent {
  data = [
    { date: new Date(2023, 0, 1), value: 100 },
    { date: new Date(2023, 1, 1), value: 110 }
  ];
}

ARIA Attributes Used:

The Range Navigator automatically includes appropriate ARIA attributes for accessibility.

Screen Reader Support

The Range Navigator provides comprehensive screen reader support, ensuring users with visual impairments can navigate and interact with the component.

Screen Reader Announcements

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { 
  RangeNavigatorAllModule, // Using AllModule to resolve potential testing issues
  AreaSeriesService, 
  DateTimeService, 
  RangeTooltipService 
} from '@syncfusion/ej2-angular-charts';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RangeNavigatorAllModule],
  providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
  template: `
    <div role="main" aria-label="Data Visualization">
      <h2 id="chart-title">Sales Range Navigator</h2>
      
      <p id="chart-description">
        Select a date range to filter sales data from January to April 2023.
      </p>

      <ejs-rangenavigator
        id="rangeNavigator"
        valueType="DateTime"
        labelFormat="MMM"
        [tooltip]="tooltipSettings"
        aria-labelledby="chart-title"
        aria-describedby="chart-description">
        
        <e-rangenavigator-series-collection>
          <e-rangenavigator-series
            [dataSource]="data"
            xName="date"
            yName="value"
            type="Area">
          </e-rangenavigator-series>
        </e-rangenavigator-series-collection>
        
      </ejs-rangenavigator>
    </div>
  `
})
export class AppComponent {
  public data: Object[] = [
    { date: new Date(2023, 0, 1), value: 100 },
    { date: new Date(2023, 1, 1), value: 110 },
    { date: new Date(2023, 2, 1), value: 105 },
    { date: new Date(2023, 3, 1), value: 115 }
  ];

  public tooltipSettings: Object = {
    enable: true
  };
}

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

@Component({
    selector: 'app-screen-reader',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator"
            valueType="DateTime"
            (changed)="announceChange($event)">
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series 
                    [dataSource]="stockData" 
                    xName="date" 
                    yName="price" 
                    type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>
        <div aria-live="polite" aria-atomic="true" class="sr-only">
            {{ screenReaderMessage }}
        </div>`
})
export class ScreenReaderComponent {
    public stockData = [
        { date: new Date(2023, 0, 1), price: 100 },
        { date: new Date(2023, 6, 1), price: 150 }
    ];
    public screenReaderMessage = '';
    public announceChange(args: any): void {
        const startDate = args.start.toLocaleDateString();
        const endDate = args.end.toLocaleDateString();
        this.screenReaderMessage = `Range updated: from ${startDate} to ${endDate}`;
    }
}

Color Contrast

The Range Navigator maintains WCAG AA and AAA color contrast ratios:

@Component({
  template: `
    <ejs-rangenavigator 
      [labelStyle]="accessibleLabelStyle"
      theme="HighContrast"
      [navigatorStyleSettings]="accessibleStyle">
      <!-- series -->
    </ejs-rangenavigator>
  `
})
export class HighContrastComponent {
  // WCAG AA compliant colors (4.5:1 contrast ratio)
  accessibleLabelStyle = {
    color: '#212121',        // High contrast on white background
    size: '14px',
    fontWeight: '600'
  };

  accessibleStyle = {
    selectedRegionColor: 'rgba(33, 150, 243, 0.4)',
    thumb: {
      fill: '#1976D2',       // 4.5:1 contrast ratio
      border: { 
        color: '#ffffff', 
        width: 2 
      }
    }
  };
}

Accessibility Testing

The Range Navigator has been validated using:

Automated Testing Tools

1. Accessibility Checker

• NPM package: accessibility-checker
• Validates against WCAG 2.2 standards

2. Axe-core

• NPM package: axe-core
• Comprehensive accessibility testing

Using Axe-core

# Install axe-core
npm install --save-dev axe-core

# Install accessibility testing tools
npm install --save-dev @axe-core/puppeteer

Running Accessibility Tests

# Install testing tools
npm install --save-dev accessibility-checker axe-core

# Run accessibility tests
npm run accessibility-test

Complete Accessible Example

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

@Component({
    selector: 'app-accessible-range-navigator',
    standalone: true,
    imports: [RangeNavigatorModule,CommonModule],
    providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
    styles: [`
        .sr-only {
            position: absolute;
            left: -10000px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

    `],
    template: `
        <div>
            <h2 id="chart-title">Sales Data Range Selector</h2>
            <ejs-rangenavigator 
                id="rangeNavigator"
                valueType="DateTime"
                labelFormat="MMM yyyy"
                [value]="initialRange"
                [tooltip]="tooltipSettings"
                theme ="HighContrast"
                [labelStyle]="accessibleLabelStyle"
                [navigatorStyleSettings]="accessibleStyle"
                (changed)="onRangeChange($event)">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="salesData" 
                        xName="date" 
                        yName="sales" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
            <p id="chart-instructions" class="sr-only">
                Interactive range selector for sales data spanning January to December 2023.
            </p>
            <div aria-live="polite" aria-atomic="true" class="sr-only">
                {{ liveRegionMessage }}
            </div>
            <div aria-live="polite" style="margin-top: 20px;">
                <strong>Selected Range:</strong> 
                {{ selectedStart | date:'mediumDate' }} to {{ selectedEnd | date:'mediumDate' }}
            </div>
        </div>`
})
export class  AccessibleRangeNavigatorComponent  {
    public salesData = [
        { date: new Date(2023, 0, 1), sales: 150 },
        { date: new Date(2023, 1, 1), sales: 180 },
        { date: new Date(2023, 2, 1), sales: 160 },
        { date: new Date(2023, 3, 1), sales: 200 },
        { date: new Date(2023, 4, 1), sales: 190 },
        { date: new Date(2023, 5, 1), sales: 220 },
        { date: new Date(2023, 6, 1), sales: 210 },
        { date: new Date(2023, 7, 1), sales: 230 },
        { date: new Date(2023, 8, 1), sales: 215 },
        { date: new Date(2023, 9, 1), sales: 240 },
        { date: new Date(2023, 10, 1), sales: 235 },
        { date: new Date(2023, 11, 1), sales: 260 }
    ];

    public initialRange = [new Date(2023, 0, 1), new Date(2023, 11, 31)];
    public selectedStart = new Date(2023, 0, 1);
    public selectedEnd = new Date(2023, 11, 31);
    public liveRegionMessage = '';

    // High contrast, WCAG compliant styling
    public accessibleLabelStyle = {
        color: '#212121',
        size: '14px',
        fontWeight: '600'
    };

    public accessibleStyle = {
        selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
        thumb: {
            type: 'Circle',
            width: 24,
            height: 24,
            fill: '#1976D2',
            border: { width: 3, color: '#ffffff' }
        }
    };

    public tooltipSettings = {
        enable: true,
        displayMode: 'Always'
    };

    public onRangeChange(args: any): void {
        this.selectedStart = args.start;
        this.selectedEnd = args.end;
        
        // Update live region for screen readers
        this.liveRegionMessage = `Range updated: from ${args.start.toLocaleDateString()} to ${args.end.toLocaleDateString()}`;
}

---

Export Formats

The Range Navigator supports four export formats:

Basic Export

Export to PNG

import { Component, ViewChild } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService, 
    RangeNavigatorComponent 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div>
            <button (click)="handleExportPNG()">Export as PNG</button>
            <ejs-rangenavigator #rangeNavigator id="rangeNavigator" 
                valueType="DateTime" labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series [dataSource]="data" xName="date" yName="value" type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    @ViewChild('rangeNavigator') public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 5, 1), value: 125 }
    ];

    handleExportPNG() {
        this.rangeObj?.export('PNG', 'RangeNavigator');
    }
}

Export to JPEG

import { Component, ViewChild } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService,
    RangeNavigatorComponent,
    ExportType
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div>
            <button (click)="export('JPEG')">Export JPEG</button>
            <button (click)="export('SVG')">Export SVG</button>
            <button (click)="export('PDF')">Export PDF</button>
            
            <ejs-rangenavigator #rangeNavigator id="rangeNavigator" 
                valueType="DateTime" labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series [dataSource]="data" xName="date" yName="value" type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    @ViewChild('rangeNavigator') public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];

    public export(type: ExportType): void {
        // Arguments: format, fileName
        this.rangeObj?.export(type, 'RangeNavigator');
    }
}

Export to PDF

import { Component, ViewChild } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService,
    RangeNavigatorComponent 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div>
            <button (click)="handleExportPDF()">Export as PDF</button>
            
            <ejs-rangenavigator 
                #rangeNavigator 
                id="rangeNavigator" 
                valueType="DateTime" 
                labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="data" 
                        xName="date" 
                        yName="value" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    // Access the RangeNavigator instance (equivalent to useRef)
    @ViewChild('rangeNavigator')
    public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];

    public handleExportPDF(): void {
        // Call the export method directly on the component instance
        this.rangeObj?.export('PDF', 'RangeNavigator');
    }
}

Export with Custom Filename

Specify a custom filename when exporting:

import { Component, ViewChild } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService,
    RangeNavigatorComponent,
    ExportType
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div>
            <button (click)="handleExport('PNG')">Export PNG</button>
            <button (click)="handleExport('JPEG')">Export JPEG</button>
            <button (click)="handleExport('SVG')">Export SVG</button>
            <button (click)="handleExport('PDF')">Export PDF</button>
            
            <ejs-rangenavigator 
                #rangeNavigator 
                id="rangeNavigator" 
                valueType="DateTime" 
                labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="data" 
                        xName="date" 
                        yName="value" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    @ViewChild('rangeNavigator')
    public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];

    public handleExport(format: ExportType): void {
        const timestamp = new Date().toISOString().split('T')[0];
        const filename = `Sales_Report_${timestamp}`;
        
        // Accessing the component instance method
        this.rangeObj?.export(format, filename);
    }
}

Print Functionality

Basic Print

import { Component, ViewChild, HostListener } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService,
    RangeNavigatorComponent 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    // 2. Add PrintService to the providers array
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div>
            <button (click)="handlePrint()">Print (or press P)</button>
            <ejs-rangenavigator #rangeNavigator id="rangeNavigator" 
                valueType="DateTime" labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series [dataSource]="data" xName="date" yName="value" type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    @ViewChild('rangeNavigator') public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];

    @HostListener('window:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if ( event.key === 'p'|| event.key === 'P') {
            event.preventDefault();
            this.handlePrint();
        }
    }

    public handlePrint(): void {
        // 3. The print method now executes via the injected service
        this.rangeObj?.print();
    }
}

Keyboard Shortcut for Print

Print using keyboard shortcut (Ctrl+P):

import { Component, ViewChild, HostListener } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService, 
    RangeNavigatorComponent 
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    // 2. Provide the necessary services
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div>
            <button (click)="handlePrint()">Print (or press Ctrl+P)</button>
            
            <ejs-rangenavigator 
                #rangeNavigator 
                id="rangeNavigator" 
                valueType="DateTime" 
                labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="data" 
                        xName="date" 
                        yName="value" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    // 3. Create a reference to the component
    @ViewChild('rangeNavigator') public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];

    // 4. Handle the keyboard shortcut globally
    @HostListener('window:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (event.ctrlKey && (event.key === 'p' || event.key === 'P')) {
            event.preventDefault();
            this.handlePrint();
        }
    }

    public handlePrint(): void {
        // 5. Trigger the print method
        if (this.rangeObj) {
            this.rangeObj.print();
        }
    }
}

Multiple Export Options

Provide multiple export formats:

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [
        AreaSeriesService, 
        DateTimeService, 
        RangeTooltipService
    ],
    template: `
        <div>
            <div style="margin-bottom: 10px;">
                <button (click)="handleExport('PNG')">📷 PNG</button>
                <button (click)="handleExport('JPEG')">🖼️ JPEG</button>
                <button (click)="handleExport('SVG')">📐 SVG</button>
                <button (click)="handleExport('PDF')">📄 PDF</button>
                <button (click)="handlePrint()">🖨️ Print</button>
            </div>
            
            <ejs-rangenavigator 
                #rangeNavigator 
                id="rangeNavigator" 
                valueType="DateTime" 
                labelFormat="MMM yyyy"
                [tooltip]="{ enable: true }">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="data" 
                        xName="date" 
                        yName="value" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    @ViewChild('rangeNavigator') public rangeObj?: RangeNavigatorComponent;

    public data: any[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 },
        { date: new Date(2023, 4, 1), value: 120 },
        { date: new Date(2023, 5, 1), value: 125 }
    ];

    public handleExport(format: string): void {
        // format needs to be cast to ExportType (PNG, JPEG, SVG, or PDF)
        this.rangeObj?.export(format as ExportType, 'RangeNavigator');
    }

    public handlePrint(): void {
        this.rangeObj?.print();
    }
}

Format Comparison

Browser Compatibility

Export and print features are supported in:

• Chrome
• Firefox
• Safari
• Edge
• Opera

When to Use Each Format

PNG

• Web applications
• Presentations
• Need transparency support
• High-quality raster images

JPEG

• Email attachments (smaller file size)
• Compressed storage
• No transparency needed

SVG

• Print materials
• Responsive web design
• Infinite scaling needed
• Smallest file size for vector graphics

PDF

• Reports and documentation
• Professional printing
• Multi-page documents
• Archival purposes

Export Method Signature

export(
  type: 'PNG' | 'JPEG' | 'SVG' | 'PDF',
  fileName: string,
  orientation?: 'Portrait' | 'Landscape',
  controls?: RangeNavigatorComponent[],
  width?: number,
  height?: number,
  isVertical?: boolean
): void

Print Method Signature

print(id?: string | string[]): void

Best Practices

1. Filename Convention: Use descriptive names with timestamps 2. Format Selection: Choose based on use case (see comparison table) 3. Quality: PNG/PDF for high quality, JPEG for smaller size 4. User Choice: Provide multiple export options 5. Feedback: Show success/error messages after export 6. Accessibility: Include keyboard shortcuts (Ctrl+P) 7. Ref Management: Always use refs to access export methods

Common Use Cases

Report Generation

// Export as PDF for reports
this.RangeObj?.export('PDF', 'Monthly_Sales_Report');

Web Sharing

// Export as PNG for web sharing
this.RangeObj?.export('PNG', 'Range_Chart');

High-Quality Print

// Export as SVG for print
this.RangeObj?.export('SVG', 'Print_Ready_Chart');

Email Attachment

// Export as JPEG for smaller size
this.RangeObj?.export('JPEG', 'Chart_Summary');

Right-to-Left (RTL) Support

The Range Navigator supports right-to-left (RTL) rendering for languages that read from right to left, such as Arabic, Hebrew, Persian, and Urdu. RTL support ensures proper text direction, layout mirroring, and cultural appropriateness.\

Table of Contents

• Enabling RTL
• RTL Behavior
• RTL with Different Value Types
• DateTime with RTL
• Numeric with RTL
• RTL with Tooltip
• RTL with Period Selector
• Dynamic RTL Switching
• RTL with Localization
• Complete RTL Example
• RTL with Custom Styling
• Browser Compatibility
• When to Use RTL
• Best Practices
• Configuration Summary
• Key Points

Enabling RTL

Enable RTL mode using the enableRtl property:

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            [enableRtl]="true" 
            valueType="DateTime" 
            labelFormat="MMM">
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series 
                    [dataSource]="data" 
                    xName="date" 
                    yName="value" 
                    type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public data: Object[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 },
        { date: new Date(2023, 4, 1), value: 120 },
        { date: new Date(2023, 5, 1), value: 125 }
    ];
}

RTL Behavior

When RTL is enabled:

1. Layout Mirroring: The entire Range Navigator layout is mirrored horizontally 2. Slider Direction: Sliders move from right to left 3. Labels: Text labels maintain proper RTL text direction 4. Tooltip: Tooltip position adjusts for RTL layout 5. Period Selector: Buttons are arranged right to left

RTL with Different Value Types

DateTime with RTL

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            [enableRtl]="true" 
            valueType="DateTime" 
            labelFormat="MMM yyyy">
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series 
                    [dataSource]="data" 
                    xName="date" 
                    yName="value" 
                    type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public data: Object[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];
}

Numeric with RTL

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            [enableRtl]="true" 
            valueType="Double">
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series 
                    [dataSource]="data" 
                    xName="x" 
                    yName="y" 
                    type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public data: Object[] = [
        { x: 0, y: 10 },
        { x: 10, y: 30 },
        { x: 20, y: 25 },
        { x: 30, y: 45 },
        { x: 40, y: 35 }
    ];
}

RTL with Tooltip

import { Component } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService,
    RangeTooltipService // 1. Import the Tooltip service
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    // 2. Add services to providers
    providers: [AreaSeriesService, DateTimeService, RangeTooltipService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            [enableRtl]="true" 
            valueType="DateTime" 
            labelFormat="MMM"
            [tooltip]="tooltipSettings">
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series 
                    [dataSource]="data" 
                    xName="date" 
                    yName="value" 
                    type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public tooltipSettings: Object = { enable: true };
    
    public data: Object[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];
}

RTL with Period Selector

import { Component } from '@angular/core';
import { 
    RangeNavigatorModule, 
    AreaSeriesService, 
    DateTimeService,
    PeriodSelectorService // 1. Import the Period Selector service
} from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    // 2. Inject services into providers
    providers: [AreaSeriesService, DateTimeService, PeriodSelectorService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            [enableRtl]="true" 
            valueType="DateTime" 
            labelFormat="MMM yyyy"
            [periodSelectorSettings]="periodSettings">
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series 
                    [dataSource]="data" 
                    xName="date" 
                    yName="value" 
                    type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public data: Object[] = [
        { date: new Date(2020, 0, 1), value: 100 },
        { date: new Date(2020, 3, 1), value: 110 },
        { date: new Date(2020, 6, 1), value: 105 },
        { date: new Date(2020, 9, 1), value: 115 },
        { date: new Date(2021, 0, 1), value: 120 },
        { date: new Date(2021, 3, 1), value: 130 }
    ];

    public periodSettings: Object = {
        periods: [
            { intervalType: 'Months', interval: 3, text: '3M' },
            { intervalType: 'Months', interval: 6, text: '6M' },
            { intervalType: 'Years', interval: 1, text: '1Y' },
            { text: 'All' }
        ],
        position: 'Top'
    };
}

Dynamic RTL Switching

Allow users to toggle between LTR and RTL modes:

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div [dir]="rtlEnabled ? 'rtl' : 'ltr'">
            <div style="margin-bottom: 10px;">
                <button (click)="toggleRtl()">
                    Toggle RTL (Currently: {{ rtlEnabled ? 'RTL' : 'LTR' }})
                </button>
            </div>

            <ejs-rangenavigator 
                id="rangeNavigator"
                [enableRtl]="rtlEnabled"
                valueType="DateTime"
                labelFormat="MMM">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="data" 
                        xName="date" 
                        yName="value" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    public rtlEnabled: boolean = false;

    public data: Object[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];

    public toggleRtl(): void {
        this.rtlEnabled = !this.rtlEnabled;
    }
}

RTL with Localization

Combine RTL with localized content for complete internationalization:

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <div dir="rtl" lang="ar">
            <h2>مخطط المدى الزمني</h2>
            <p>اختر نطاقًا زمنيًا لعرض البيانات</p>

            <ejs-rangenavigator 
                id="rangeNavigator" 
                [enableRtl]="true" 
                valueType="DateTime" 
                labelFormat="MMM yyyy">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="data" 
                        xName="date" 
                        yName="value" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>
        </div>`
})
export class AppComponent {
    public data: Object[] = [
        { date: new Date(2023, 0, 1), value: 100 },
        { date: new Date(2023, 1, 1), value: 110 },
        { date: new Date(2023, 2, 1), value: 105 },
        { date: new Date(2023, 3, 1), value: 115 }
    ];
}

Complete RTL Example

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [
        AreaSeriesService, 
        DateTimeService, 
        RangeTooltipService, 
        PeriodSelectorService
    ],
    template: `
        <div dir="rtl" class="App">
            <h2>متصفح نطاق أسعار الأسهم</h2>
            
            <ejs-rangenavigator 
                id="rangeNavigator"
                [enableRtl]="true"
                valueType="DateTime"
                labelFormat="MMM yyyy"
                [value]="initialValue"
                [tooltip]="tooltipSettings"
                [periodSelectorSettings]="periodSettings">
                <e-rangenavigator-series-collection>
                    <e-rangenavigator-series 
                        [dataSource]="stockData" 
                        xName="date" 
                        yName="price" 
                        type="Area">
                    </e-rangenavigator-series>
                </e-rangenavigator-series-collection>
            </ejs-rangenavigator>

            <p>استخدم أشرطة التمرير لتحديد نطاق التاريخ</p>
        </div>`
})
export class AppComponent {
    public stockData: Object[] = [
        { date: new Date(2023, 0, 1), price: 100 },
        { date: new Date(2023, 1, 1), price: 110 },
        { date: new Date(2023, 2, 1), price: 105 },
        { date: new Date(2023, 3, 1), price: 115 },
        { date: new Date(2023, 4, 1), price: 120 },
        { date: new Date(2023, 5, 1), price: 125 },
        { date: new Date(2023, 6, 1), price: 130 },
        { date: new Date(2023, 7, 1), price: 128 },
        { date: new Date(2023, 8, 1), price: 135 },
        { date: new Date(2023, 9, 1), price: 140 },
        { date: new Date(2023, 10, 1), price: 138 },
        { date: new Date(2023, 11, 1), price: 145 }
    ];

    public initialValue: Date[] = [new Date(2023, 2, 1), new Date(2023, 9, 1)];

    public tooltipSettings: Object = { 
        enable: true, 
        displayMode: 'Always' 
    };

    public periodSettings: Object = {
        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: 'All' }
        ],
        position: 'Top'
    };
}

RTL with Custom Styling

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

@Component({
    selector: 'app-container',
    standalone: true,
    imports: [RangeNavigatorModule],
    providers: [AreaSeriesService, DateTimeService],
    template: `
        <ejs-rangenavigator 
            id="rangeNavigator" 
            [enableRtl]="true" 
            valueType="DateTime"
            [navigatorStyleSettings]="styleSettings"
            [navigatorBorder]="borderSettings">
            <!-- Series configuration here -->
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]="data" xName="x" yName="y" type="Area">
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>`
})
export class AppComponent {
    public data: any[] = [ /* your data */ ];

    // Define the style settings object
    public styleSettings: Object = {
        selectedRegionColor: 'rgba(33, 150, 243, 0.3)',
        thumb: {
            type: 'Circle',
            width: 20,
            height: 20,
            fill: '#2196F3',
            border: { width: 2, color: '#ffffff' }
        }
    };

    // Define the border settings object
    public borderSettings: Object = { 
        width: 2, 
        color: '#2196F3' 
    };
}

Browser Compatibility

RTL support is fully compatible with all modern browsers:

• Chrome
• Firefox
• Safari
• Edge
• Opera

When to Use RTL

Enable RTL when:

• Application targets RTL language users (Arabic, Hebrew, etc.)
• UI needs to match cultural reading patterns
• Compliance with regional accessibility standards

Key RTL Languages:

• Arabic (العربية)
• Hebrew (עברית)
• Persian/Farsi (فارسی)
• Urdu (اردو)
• Pashto (پښتو)
• Sindhi (سنڌي)

Best Practices

1. Container Direction: Set dir="rtl" on parent container 2. Language Attribute: Add lang attribute for proper language identification 3. Test Thoroughly: Verify all interactions work correctly in RTL mode 4. Consistent Application: Apply RTL across entire application, not just components 5. Text Content: Ensure all text content is properly localized 6. Icons and Images: Consider mirroring directional icons 7. Testing: Test with actual RTL language speakers

Configuration Summary

Key Points

1. Simple Enablement: Set enableRtl={true} to enable RTL mode 2. Full Support: All Range Navigator features work in RTL mode 3. Layout Mirroring: Entire layout is automatically mirrored 4. Works with All Features: Compatible with tooltips, period selector, all value types 5. Cultural Appropriateness: Ensures proper display for RTL language users 6. Accessibility: Maintains full accessibility in RTL mode 7. Dynamic Switching: Can toggle RTL mode at runtime 8. Browser Support: Works across all modern browsers