Period selector in Angular Range navigator component
27 Apr 202413 minutes to read
The period selector allows to select a range with specified periods.
Periods
An array of objects that allows the users to specify pre-defined time intervals. The interval
property specifies the count value of the button, and the text
property specifies the text to be displayed on the button. The intervaltype
property allows the users to customize the interval type, and it supports the following types:
- Auto
- Years
- Quarter
- Months
- Weeks
- Days
- Hours
- Minutes
- Seconds
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;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
To use the period selector feature, inject the
PeriodSelectorService
into the@NgModule.providers
.
Positioning period selector
The position
property allows the users to position the period selector at the Top or Bottom.
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[];
ngOnInit(): void {
this.periodsValue = {
position: 'Top',
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;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Height
The height
property allows the users to specify the height of the period selector. The default value of the height property is 43px.
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[];
ngOnInit(): void {
this.periodsValue = {
height: 65,
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;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Visibility of range navigator
The disableRangeSelector
property allows the users to display only the period selector and not the Range 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' [disableRangeSelector]='visibility' [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 visibility?: boolean;
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;
this.visibility = true;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));