Having trouble getting help?
Contact Support
Contact Support
Selecting range in Angular Range navigator component
27 Apr 20244 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 { 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, ViewChild } from '@angular/core';
import { datasrc } from './datasource';
import {
DateTime, AreaSeries, IChangedEventArgs, Chart
} from '@syncfusion/ej2-charts';
@Component({
imports: [
ChartModule, RangeNavigatorModule
],
providers: [ AreaSeriesService, DateTimeService, RangeTooltipService ],
standalone: true,
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 as Chart).primaryXAxis.zoomFactor = args.zoomFactor;
(this.Chart as Chart).primaryXAxis.zoomPosition = args.zoomPosition;
(this.Chart as 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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));