syncfusion-javascript-range-navigator

# Implementing Range Navigator in Syncfusion TypeScript and JavaScript The Syncfusion EJ2 Range Navigator is a data visualization control for selecting a specific range from DateTime, numeric, category, or logarithmic data. It can display an overview series, provide predefined period buttons, show selection tooltips, synchronize with an EJ2 Chart, export the rendered visualization, and print the component. This skill covers only the following implementations: - EJ2 TypeScript using `@syncfusion/ej2-charts` - EJ2 JavaScript using the global `ej.charts` namespace - Package-based TypeScript projects - CDN-based JavaScript projects Do not generate Vue, React, Angular, Composition API, directive, provider, or Single File Component code when this skill is used. ## Platform Support ### TypeScript Use TypeScript when the project requires: - Static typing - IDE IntelliSense - Compile-time validation - ES module imports - Bundler-based application setup - Explicit feature-module injection - Type-safe event argument interfaces Import the component and required modules from: ```typescript import { AreaSeries, DateTime, RangeNavigator } from '@syncfusion/ej2-charts'; ``` Inject every required feature before creating the component: ```typescript RangeNavigator.Inject( AreaSeries, DateTime ); ``` Create and render the component: ```typescript const rangeNavigator: RangeNavigator = new RangeNavigator(configuration); rangeNavigator.appendTo('#range-navigator'); ``` ### JavaScript Use JavaScript when the project requires: - Direct browser execution - CDN-based script loading - No TypeScript compilation - No module bundler - Global EJ2 namespace access Create the component through: ```javascript var rangeNavigator = new ej.charts.RangeNavigator(configuration); rangeNavigator.appendTo('#range-navigator'); ``` When the complete EJ2 global bundle is loaded, separate TypeScript-style imports and `RangeNavigator.Inject(...)` calls are not required. ## When to Use This Skill Use this skill when the user needs to: - Create an EJ2 Range Navigator. - Install and initialize the Range Navigator. - Bind local or remote data. - Select DateTime or numeric ranges. - Configure Line, Area, or StepLine series. - Configure DateTime, Double, Category, or Logarithmic axes. - Set the initial selected range. - Update the selected range programmatically. - Handle range-selection changes. - Configure deferred range updates. - Enable selection tooltips. - Configure a Period Selector. - Synchronize a Range Navigator with an EJ2 Chart. - Customize labels, grid lines, ticks, regions, thumbs, or borders. - Configure responsive rendering. - Enable right-to-left rendering. - Export the Range Navigator. - Print the Range Navigator. - Optimize large datasets through sampling or aggregation. - Diagnose rendering, injection, data-binding, or interaction issues. Do not use unsupported properties or features from other EJ2 controls merely because their names appear similar. ## Validation Workflow Before generating any code, complete the following validation. ### Step 1: Identify the Implementation Determine whether the requested output is: - TypeScript - JavaScript - Both TypeScript and JavaScript Do not substitute a framework-specific implementation. ### Step 2: Identify the Axis Type Determine the correct `valueType`. | Data | valueType | Required Axis Module | |---|---|---| | JavaScript `Date` objects | `DateTime` | `DateTime` | | Numbers | `Double` | No additional axis module | | Text categories | `Category` | `Category` | | Positive logarithmic values | `Logarithmic` | `Logarithmic` | Use `Double`, not `Numeric`, for a numeric axis. ### Step 3: Identify Every Series Type The Range Navigator supports: - `Line` - `Area` - `StepLine` Required modules: - `Line` requires `LineSeries`. - `Area` requires `AreaSeries`. - `StepLine` requires `StepLineSeries`. Do not configure these unsupported Range Navigator series types: - `Spline` - `SplineArea` - `Column` - `Bar` - `Scatter` - `Candle` - `Hilo` - `HiloOpenClose` Use the EJ2 Chart or Stock Chart when one of those visualization types is required. ### Step 4: Identify Optional Features Validate every optional feature before generating the example. | Feature | Required Module | |---|---| | Range tooltip | `RangeTooltip` | | Period Selector | `PeriodSelector` | | DateTime axis | `DateTime` | | Category axis | `Category` | | Logarithmic axis | `Logarithmic` | ### Step 5: Validate Imports Before Code Generation For TypeScript, every feature used in the configuration must have its required import. Example with an Area series, DateTime axis, tooltip, and Period Selector: ```typescript import { AreaSeries, DateTime, IChangedEventArgs, PeriodSelector, RangeNavigator, RangeTooltip } from '@syncfusion/ej2-charts'; ``` ### Step 6: Validate Module Injection Before Code Generation The injection list must match the enabled features: ```typescript RangeNavigator.Inject( AreaSeries, DateTime, PeriodSelector, RangeTooltip ); ``` Never generate the configuration first and verify its modules afterward. ### Step 7: Validate Data Mapping Confirm that: - `xName` matches the datasource x-field. - `yName` matches the datasource y-field. - The x-field type matches `valueType`. - `value` contains values compatible with `valueType`. - DateTime data uses valid JavaScript `Date` objects. - Logarithmic x-values are positive. - The selected range lies within the available data domain. ### Step 8: Validate Rendering Confirm that: - The target element exists. - The target element ID matches `appendTo(...)`. - The parent has an available width. - A suitable height is configured. - The EJ2 theme stylesheet is loaded. - Hidden containers are refreshed after becoming visible. ## Reference Navigation Choose the reference that matches the task. ### Getting Started and Setup Read: ```text references/getting-started.md ``` Use it for: - Package installation - Dependency setup - Theme loading - HTML container setup - TypeScript initialization - JavaScript initialization - Local data binding - Remote data binding - Initial range selection - Basic troubleshooting ### Series Types and Axes Read: ```text references/series-and-axes.md ``` Use it for: - Line series - Area series - StepLine series - DateTime axis - Double axis - Category axis - Logarithmic axis - Multiple series - Runtime series switching - Supported series properties - Axis and data-type validation ### Range Selection and Interaction Read: ```text references/selection-and-interaction.md ``` Use it for: - Initial range selection - Programmatic range updates - Slider interaction - Deferred updates - Snapping - Interval selection - Period Selector configuration - Range tooltip configuration - `changed` event handling - Selection validation - Chart synchronization ### Customization and Styling Read: ```text references/customization-and-styling.md ``` Use it for: - Major grid lines - Major tick lines - Label formats - Label position - Label style - Smart labels - Grouped DateTime labels - Selected and unselected region colors - Slider thumb styling - Navigator border - Background - Themes - Right-to-left rendering - Responsive design ### Advanced Features and Integration Read: ```text references/advanced-features.md ``` Use it for: - PNG export - JPEG export - SVG export - PDF export - PDF orientation - Printing - Chart integration - Accessibility-oriented markup - Range announcements - Large-data optimization - Data sampling - Data aggregation - Real-time updates - Component cleanup - Advanced troubleshooting ## Installation Install the charts package: ```bash npm install @syncfusion/ej2-charts ``` The required package dependencies are resolved through the package installation process. Do not require users to install every transitive dependency separately unless their package manager reports a specific unresolved dependency. ## Theme Setup The configured component theme should correspond. Example: ```typescript theme: 'Material' ``` ## HTML Container Create the target element before initializing the component. ```html <div class="range-container"> <div id="range-navigator"></div> </div> ``` ```css .range-container { width: 100%; min-height: 250px; } ``` The parent must have an available width when the component is rendered. ## Quick Start Example ### TypeScript #### index.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>EJ2 Range Navigator</title> <style> #range-container { width: 100%; min-height: 250px; } </style> </head> <body> <div id="range-container"> <div id="range-navigator"></div> </div> <script scr="index.js"></script> </body> </html> ``` #### index.ts ```typescript import { AreaSeries, DateTime, RangeNavigator } from '@syncfusion/ej2-charts'; interface RangeData { date: Date; value: number; } RangeNavigator.Inject( AreaSeries, DateTime ); const data: RangeData[] = [ { 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: 48 }, { date: new Date(2023, 6, 1), value: 62 } ]; const rangeNavigator: RangeNavigator = new RangeNavigator({ width: '100%', height: '250px', valueType: 'DateTime', value: [ new Date(2023, 1, 1), new Date(2023, 5, 1) ], labelFormat: 'MMM-yy', series: [ { dataSource: data, xName: 'date', yName: 'value', type: 'Area', fill: '#2563EB', width: 2 } ] }); rangeNavigator.appendTo('#range-navigator'); ``` ### JavaScript ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <title>EJ2 Range Navigator</title> <script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js"></script> <style> #range-container { width: 100%; min-height: 250px; } </style> </head> <body> <div id="range-container"> <div id="range-navigator"></div> </div> <script> var 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: 48 }, { date: new Date(2023, 6, 1), value: 62 } ]; var rangeNavigator = new ej.charts.RangeNavigator({ width: '100%', height: '250px', valueType: 'DateTime', value: [ new Date(2023, 1, 1), new Date(2023, 5, 1) ], labelFormat: 'MMM-yy', series: [ { dataSource: data, xName: 'date', yName: 'value', type: 'Area', fill: '#2563EB', width: 2 } ] }); rangeNavigator.appendTo( '#range-navigator' ); </script> </body> </html> ``` ## Common Patterns ### DateTime Range Selection Required modules: ```typescript import { DateTime, LineSeries, RangeNavigator } from '@syncfusion/ej2-charts'; RangeNavigator.Inject( DateTime, LineSeries ); ``` Configuration: ```typescript const rangeNavigator: RangeNavigator = new RangeNavigator({ valueType: 'DateTime', value: [ new Date(2023, 0, 1), new Date(2023, 6, 1) ], labelFormat: 'MMM-yy', series: [ { dataSource: data, xName: 'date', yName: 'value', type: 'Line', width: 2 } ] }); ``` ### Numeric Range Selection Use `Double`, not `Numeric`. ```typescript import { LineSeries, RangeNavigator } from '@syncfusion/ej2-charts'; RangeNavigator.Inject(LineSeries); const numericData = [ { x: 10, y: 21 }, { x: 20, y: 24 }, { x: 30, y: 36 },