The period selector allows to select a range with specified 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:
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, PeriodSelector } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
this.periodselector = {
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' }
]
};
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip} periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip, PeriodSelector, RangeTooltipSettingsModel, PeriodSelectorSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
public periodselector: PeriodSelectorSettingsModel = {
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' }
]
};
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
tooltip={this.tooltip}
periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
To use the period selector feature, inject the
PeriodSelector
module using theRangeNavigator.Inject(PeriodSelector)
method.
The position
property allows the users to position the period selector at the Top or Bottom.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, PeriodSelector } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
this.periodselector = {
position: 'Bottom',
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' }
]
};
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip} periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip, PeriodSelector,RangeTooltipSettingsModel, PeriodSelectorSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
public periodselector: PeriodSelectorSettingsModel = {
position: 'Bottom',
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' }
]
};
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
tooltip={this.tooltip}
periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The height
property allows the users to specify the height of the period selector. The default value of the height property is 43px.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective, RangenavigatorSeriesDirective, RangeTooltip, PeriodSelector } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
this.periodselector = {
position: 'Top',
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' }
]
};
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} tooltip={this.tooltip} periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]}/>
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2}/>
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip, PeriodSelector,RangeTooltipSettingsModel, PeriodSelectorSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
public periodselector: PeriodSelectorSettingsModel = {
position: 'Top',
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' }
]
};
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
tooltip={this.tooltip}
periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]} />
<RangenavigatorSeriesCollectionDirective>
<RangenavigatorSeriesDirective dataSource={this.data} xName='x' yName='y' type='Area' width={2} />
</RangenavigatorSeriesCollectionDirective>
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
The disableRangeSelector
property allows the users to display only the period selector and not the Range Selector.
import { AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangeTooltip, PeriodSelector } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = bitCoinData;
this.tooltip = { enable: true };
this.periodselector = {
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' }
]
};
}
render() {
return <RangeNavigatorComponent id='charts' valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]} dataSource={this.data} xName='x' yName='y' disableRangeSelector={true} tooltip={this.tooltip} periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]}/>
</RangeNavigatorComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import {
AreaSeries, DateTime, Inject, RangeNavigatorComponent, RangenavigatorSeriesCollectionDirective,
RangenavigatorSeriesDirective,RangeTooltip, PeriodSelector,RangeTooltipSettingsModel, PeriodSelectorSettingsModel
} from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { bitCoinData } from 'default_data.ts';
class App extends React.Component<{}, {}> {
public data: object[] = bitCoinData;
public tooltip: RangeTooltipSettingsModel = { enable: true };
public periodselector: PeriodSelectorSettingsModel = {
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' }
]
};
render() {
return <RangeNavigatorComponent id='charts'
valueType='DateTime' labelFormat='MMM-yy' value={[new Date('2017-09-01'), new Date('2018-02-01')]}
dataSource={this.data} xName='x' yName='y'
disableRangeSelector={true}
tooltip={this.tooltip}
periodSelectorSettings={this.periodselector}>
<Inject services={[AreaSeries, DateTime, RangeTooltip, PeriodSelector]} />
</RangeNavigatorComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));