The period selector allows to select a range with specified periods.
Periods is an array of objects that allows users to specify the range of periods. The “interval” property specifies the count value of the button, and the “text” property specifies the text to be displayed on button. The “intervalType” property allows users to customize the intervals of the buttons. The “intervalType” property supports the following interval types:
import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';
RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
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' }
]
};
let range: RangeNavigator = new RangeNavigator(
{
valueType: 'DateTime',
series: [
{
dataSource: chartData,
xName: 'x', yName: 'close', type: 'Area', width: 2,
}
], periodSelectorSettings: periodsValue,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
<!--style reference from the Calendar component-->
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 120px">
<div id='element'></div>
</div>
</body>
</html>
Note: To use the period selector feature, inject the PeriodSelector module using the RangeNavigator.Inject(PeriodSelector) method.
The “position” property allows users to position the period selector either at the “top” or “bottom”.
import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';
RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: 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' }
]
};
let range: RangeNavigator = new RangeNavigator(
{
valueType: 'DateTime',
series: [
{
dataSource: chartData,
xName: 'x', yName: 'close', type: 'Area', width: 2,
}
], periodSelectorSettings: periodsValue,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
<!--style reference from the Calendar component-->
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 120px">
<div id='element'></div>
</div>
</body>
</html>
The “height” property allows users to specify the height for period selector. The default value of the height property is 43.
import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';
RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
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' }
]
};
let range: RangeNavigator = new RangeNavigator(
{
valueType: 'DateTime',
series: [
{
dataSource: chartData,
xName: 'x', yName: 'close', type: 'Area', width: 2,
}
], periodSelectorSettings: periodsValue,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
<!--style reference from the Calendar component-->
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 120px">
<div id='element'></div>
</div>
</body>
</html>
The “disableRangeSelector” property allows users to render the period selector without range navigator.
import { RangeNavigator, Chart, IChangedEventArgs, PeriodSelector, AreaSeries, DateTime, PeriodSelectorSettingsModel } from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';
RangeNavigator.Inject(
PeriodSelector, DateTime, AreaSeries
);
import { chartData } from './datasource.ts';
let periodsValue: PeriodSelectorSettingsModel = {
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' }
]
};
let range: RangeNavigator = new RangeNavigator(
{
disableRangeSelector: true,
valueType: 'DateTime',
series: [
{
dataSource: chartData,
xName: 'x', yName: 'close', type: 'Area', width: 2,
}
], periodSelectorSettings: periodsValue,
}, '#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-charts/styles/material.css" rel="stylesheet" />
<!--style reference from the Calendar component-->
<link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 120px">
<div id='element'></div>
</div>
</body>
</html>