Selecting range in Angular Range navigator component

20 Sep 20224 minutes 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.
import { Component, OnInit, ViewChild } from '@angular/core';
import { datasrc } from 'datasource.ts';
import {
    DateTime, AreaSeries, IChangedEventArgs, Chart
} from '@syncfusion/ej2-charts';

@Component({
    selector: 'app-container',
    template:
    `<ejs-rangenavigator id="rn-container" valueType='DateTime' [value]='value' [tooltip]='tooltip'
    [labelFormat]='labelFormat' (changed)='changed($event)'>
            <e-rangenavigator-series-collection>
                <e-rangenavigator-series [dataSource]='chartData' type='Area' xName='x' yName='y' width=2>
                </e-rangenavigator-series>
            </e-rangenavigator-series-collection>
        </ejs-rangenavigator>
        <div align="center">
    <ejs-chart #chart style='display:block;' id='chart' [primaryXAxis]='primaryXAxis'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' width='2'>
            </e-series>
        </e-series-collection>
        </ejs-chart>
    </div>`
})
export class AppComponent implements OnInit {
    public value: Object[];
    public chartData: Object[];
    public tooltip: Object[];
    public labelFormat: string;
    public primaryXAxis: Object;
    @ViewChild('chart')
    public Chart: Chart;
    public changed(args: IChangedEventArgs): void {
        this.Chart.primaryXAxis.zoomFactor = args.zoomFactor;
        this.Chart.primaryXAxis.zoomPosition = args.zoomPosition;
        this.Chart.dataBind();
    }
    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',
        };
    }
}
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
 */
@NgModule({
    imports: [
        BrowserModule, ChartModule, RangeNavigatorModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);