Search results

Range in Angular Range Navigator component

30 Sep 2022 / 1 minute to read

The Range Selector’s left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways:

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and the end through the value property.
Copied to clipboard
import { Component, OnInit, ViewChild } from '@angular/core';
import { datasrc } from 'datasource.ts';
import {
DateTime, AreaSeries, IChangedEventArgs, Chart
} from '@syncfusion/ej2-charts';

selector: 'app-container',
`<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [tooltip]='tooltip'
[labelFormat]='labelFormat' (changed)='changed($event)'>
            <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
    <div align="center">
<ejs-chart #chart style='display:block;' id='chart' [primaryXAxis]='primaryXAxis'>
        <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' width='2'>
export class AppComponent implements OnInit {
public value: Object[];
public chartData: Object[];
public tooltip: Object[];
public labelFormat: string;
public primaryXAxis: Object;
public Chart: Chart;
public changed(args: IChangedEventArgs): void {
    this.Chart.primaryXAxis.zoomFactor = args.zoomFactor;
    this.Chart.primaryXAxis.zoomPosition = args.zoomPosition;
ngOnInit(): void {
    this.value = [new Date('2017-09-01'), new Date('2018-02-01')];
    this.chartData = datasrc;
    this.tooltip = { enable: true, displayMode: 'Always' };
    this.labelFormat = 'MMM-yy';
    this.primaryXAxis = {
      valueType: 'DateTime',
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule, RangeNavigatorModule } from '@syncfusion/ej2-angular-charts';
import { AreaSeriesService, DateTimeService, RangeTooltipService} from '@syncfusion/ej2-angular-charts';

 * Module
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';