- RangeNavigator
- Series
- StyleSettings
- Tooltip
- Period Selector
- Methods
- Events
Contact Support
Ej1 api migration in Angular Range navigator component
4 Apr 20236 minutes to read
This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
RangeNavigator
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Allow snapping| Property: allowSnapping <ej:RangeNavigator
[allowSnapping]="true">
</ej:RangeNavigator>
|Property: allowSnapping <ejs-rangenavigator [allowSnapping]='allowSnapping'>
</ejs-rangenavigator>
this.allowSnapping= true; |
|Animation duration| Not Applicable|Property: animationDuration <ejs-rangenavigator [animationDuration]='animationDuration''>
</ejs-rangenavigator>
this.animationDuration= 2000;|
|Border for range navigator| Property: border <ej:RangeNavigator
border.color="green" [border.opacity]="0.5" [border.width]="2">
</ej:RangeNavigator>
|Property: navigatorBorder <ejs-rangenavigator [navigatorBorder]='navigatorBorder'>
</ejs-rangenavigator>
this.navigatorBorder = { width: 4, color: ‘green’}|
|dataSource for range navigator| Property: dataSource
this.rangeData = function GetData(){};<ej:RangeNavigator
[dataSource]="rangeData">
</ej:RangeNavigator>
|Property: dataSource <e-rangenavigator-series dataSource={data}>
</e-rangenavigator-series>
|
|enabling deffered update for range navigator| Property: enableDeferedUpdate <ej:RangeNavigator
[enableDeferredUpdate]="true">
</ej:RangeNavigator>
|Property: enableDeferredUpdate <ejs-rangenavigator [enableDeferredUpdate]='enableDeferredUpdate'>
</ejs-rangenavigator>
this.enableDeferredUpdate = true|
|multilevel level labels| Property: labelSettings.higherLevelLabels
this.labelSettings= { higherLevel: { } };<ej:RangeNavigator
[labelSettings]="labelSettings">
</ej:RangeNavigator>
|Property: enableGrouping <ejs-rangenavigator [enableGrouping]='grouping'>
</ejs-rangenavigator>
this.grouping = true;|
|enabling scroll bar| Property: enableScrollBar <ej:RangeNavigator
[enableScrollbar]= "true">
</ej:RangeNavigator>
|Not Applicable|
|enabling auto resizing| Property: enableAutoResizing <ej:RangeNavigator
enableAutoResizing="true"}>
</ej:RangeNavigator>
|Not Applicable|
|enabling isResponsive| Property: isResponsive <ej:RangeNavigator
isResponsive="true">
</ej:RangeNavigator>
|Not Applicable|
|enabling RTL for range navigator| Property: enableRtl <ej:RangeNavigator
enableRtl="true">
</ej:RangeNavigator>
|Property: enableRtl <ejs-rangenavigator [enableRtl]='enableRtl'>
</ejs-rangenavigator>
this.enableRtl = true;|
|interval for range navigator| Property: valueAxisSettings.interval
this.valueAxisSettings= {Interval: 5 };<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>
|Property: interval <ejs-rangenavigator Interval=5 }'>
</ejs-rangenavigator>
|
|intervaltype for range navigator| Property: valueAxisSettings.intervalType
this.valueAxisSettings= {intervalType: ‘Years’};<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>
|Property: intervalType <ejs-rangenavigator intervalType='Years'>
</ejs-rangenavigator>
|
|labelformat for range navigator| Not applicable|Property: labelFormat <ejs-rangenavigator [labelFormat]='labelFormat'>
</ejs-rangenavigator>
this.labelFormat = ‘MMM’;|
|label intersect action for range navigator| Not applicable|Property: labelIntersectAction <ejs-rangenavigator labelIntersectAction='Hide'>
</ejs-rangenavigator>
|
|labelStyle range navigator| Property: valueAxisSettings.font
this.valueAxisSettings= {font: { } };<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>
|Property: labelStyle <ejs-rangenavigator [labelStyle]='labelStyle'>
</ejs-rangenavigator>
this.labelStyle= { color: ‘red’, size:’10px’};|
|locale of range navigator| Property: locale <ej:RangeNavigator
locale="fr-FR">
</ej:RangeNavigator>
|Property: locale <ejs-rangenavigator locale='en-US'>
</ejs-rangenavigator>
|
|major grid lines of range navigator| Property: valueAxisSettings.majorGridLines
this.valueAxisSettings= { majorGridLines: { width: 2, color: ‘red’ } };<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>
|Property: majorGridLines <ejs-rangenavigator [majorGridLines]='majorGridLines'>
</ejs-rangenavigator>
this.majorGridLines={ width: 4, color: ‘blue’, dashArray: ‘5,5’ };|
|margin of range navigator|Not Applicable|Property: margin <ejs-rangenavigator [margin]='margin'>
</ejs-rangenavigator>
this.margin={ };|
|maximum value of range navigator| Property: valueAxisSettings.range.max
this.valueAxisSettings= { range: { max: 2 } };<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>
|Property: maximum <ejs-rangenavigator maximum={34}>
</ejs-rangenavigator>
|
|minimum value of range navigator| Property: valueAxisSettings.range.min
this.valueAxisSettings= { range: { min: 2 } };<ej:RangeNavigator
[valueAxisSettings]="this.valueAxisSettings">
</ej:RangeNavigator>
|Property: minimum <ejs-rangenavigator minimum={4}>
</ejs-rangenavigator>
|
|query for data source of range navigator| Not Applicable|Property: query <ejs-rangenavigator query=''>
</ejs-rangenavigator>
|
|Secondary label alignment of range navigator| Not Applicable|Property: secondaryLabelAlignment <ejs-rangenavigator secondaryLabelAlignment='Far'>
</ejs-rangenavigator>
|
|Skeleton of range navigator axis| Not Applicable|Property: skeleton <ejs-rangenavigator skeleton=''>
</ejs-rangenavigator>
|
|skeletontype of range navigator axis| Not Applicable|Property: skeletonType <ejs-rangenavigator skeletonType=''>
</ejs-rangenavigator>
|
|Theme of range navigator| Property: theme <ej:RangeNavigator
theme=''>
</ej:RangeNavigator>
|Property: theme <ejs-rangenavigator theme=''>
</ejs-rangenavigator>
|
|Default selector value range navigator| Property: selectedRangeSettings
this.selectedRangeSettings= {start:’’, end:’’};<ej:RangeNavigator
[selectedRangeSettings]="selectedRangeSettings">
</ej:RangeNavigator>
|Property: value <ejs-rangenavigator value=[ 2, 10]>
</ejs-rangenavigator>
|
|Value type of range navigator| Property: valueType <ej:RangeNavigator
valueType='DateTime'>
</ej:RangeNavigator>
|Property: valueType <ejs-rangenavigator valueType='Logarithmic'>
</ejs-rangenavigator>
|
|Width of range navigator| Property: size.width <ej:RangeNavigator
size={ width: '200'}>
</ej:RangeNavigator>
|Property: width <ejs-rangenavigator width='400'>
</ejs-rangenavigator>
|
|Height of range navigator| Property: size.height <ej:RangeNavigator
size={ height: '200'}>
</ej:RangeNavigator>
|Property: height <ejs-rangenavigator height='400'>
</ejs-rangenavigator>
|
|Series settings for range navigator| Property: seriesSettings
this.seriesSettings= { };<ej:RangeNavigator
seriesSettings={seriesSettings}>
</ej:RangeNavigator>
|Not Applicable|
|Range settings for range navigator| Property: rangeSettings
this.rangeSettings= { start: 3, end: 6 };<ej:RangeNavigator
rangeSettings={rangeSettings}>
</ej:RangeNavigator>
|Not Applicable|
|Scroll range settings for range navigator| Property: scrollRangeSettings
this.scrollRangeSettings= { start: 3, end: 6 };<ej:RangeNavigator
scrollRangeSettings={scrollRangeSettings}>
</ej:RangeNavigator>
|Not Applicable|
Series
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|animation| Property: enableAnimation <ej:RangeNavigator
enableAnimation="true">
</ej:RangeNavigator>
|Property: animation.enable <ejs-rangenavigator [animation]='animation'>
</ejs-rangenavigator>
this.animation={ enable: true}|
|Border for range navigator series| Property: border
this.series = [{ border: { color: ‘transparent’, width: 2 } }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: border <e-rangenavigator-series
border={ color: 'pink', width: 2}>
</e-rangenavigator-series>
|
|dataSource for range navigator| Property: series.dataSource
this.series = [{ dataSource: [{}] }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: series.dataSource <e-rangenavigator-series
dataSource={data}>
</e-rangenavigator-series>
|
|query for data source of range navigator| Not Applicable|Property: query <e-rangenavigator-series
dataSource={data} query=''>
</e-rangenavigator-series>
|
|series type for range navigator| Property: series.type
this.series = [{ type: ‘’ }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: series.type <e-rangenavigator-series
type=''>
</e-rangenavigator-series>
|
|series xName for range navigator| Property: series.xName
this.series = [{ xName: ‘’ }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: series.xName <e-rangenavigator-series
xName=''>
</e-rangenavigator-series>
|
|series yName for range navigator| Property: series.yName
this.series = [{ yName: ‘’ }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: series.yName <e-rangenavigator-series
yName=''>
</e-rangenavigator-series>
|
|series fill color for range navigator| Property: series.fill
this.series = [{ fill: ‘’ }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: series.fill <e-rangenavigator-series
fill=''>
</e-rangenavigator-series>
|
|series width for range navigator| Property: series.width
this.series = [{ width: ‘2’ }];<ej:RangeNavigator
series={series}>
</ej:RangeNavigator>
|Property: series.width <e-rangenavigator-series
width=''>
</e-rangenavigator-series>
|
|series dashArray for range navigator|Not Applicable|Property: series.dashArray <e-rangenavigator-series
dashArray='10,5'>
</e-rangenavigator-series>
|
StyleSettings
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Style settings of range navigator| Property: navigatorStyleSettings
this.navigatorStyleSettings = { leftThumbTemplate: ‘left’ };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Property: navigatorStyleSettings <ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings'
</ejs-rangenavigator>
this.navigatorStyleSettings = { leftThumbTemplate: ‘left’ };|
|Selected region color of range navigator| Property: selectedRegionColor
this.navigatorStyleSettings = { selectedRegionColor: ‘red’ };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Property: selectedRegionColor <ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings'
</ejs-rangenavigator>
this.navigatorStyleSettings = { selectedRegionColor: ‘red’ };|
|UnSelected region color of range navigator| Property: unselectedRegionColor
this.navigatorStyleSettings = { unselectedRegionColor: ‘red’ };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Property: unselectedRegionColor <ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings'
</ejs-rangenavigator>
this.navigatorStyleSettings = { unselectedRegionColor: ‘red’ };|
|Thumb color of range navigator| Property: thumbColor
this.navigatorStyleSettings = { thumbColor: ‘red’ };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Property: thumbSettings <ejs-rangenavigator
[navigatorStyleSettings]='navigatorStyleSettings' }
</ejs-rangenavigator>
this.navigatorStyleSettings = {thumbSettings: ‘red’};|
|Selected region opacity of range navigator| Property: selectedRegionOpacity
this.navigatorStyleSettings = { selectedRegionOpacity: 0.4 };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|Unselected region opacity of range navigator| Property: UnselectedRegionOpacity
this.navigatorStyleSettings = { UnselectedRegionOpacity: 0.4 };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|Background for thumb| Property: background
this.navigatorStyleSettings = { background: ‘red’ };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|border for thumb| Property: border
this.navigatorStyleSettings = { border: { color: ‘red’, width: 2} };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|Highlightsettings for range navigator| Property: highlightSettings
this.navigatorStyleSettings = { highlightSettings: { } };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|Selected style settings for range navigator| Property: selectionSettings
this.navigatorStyleSettings = { selectionSettings: { } };<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|Left thumb template for range navigator| Property: leftThumbTemplate
this.navigatorStyleSettings = { leftThumbTemplate: ‘’};<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
|Right thumb template for range navigator| Property: rightThumbTemplate
this.navigatorStyleSettings = { rightThumbTemplate: ‘’};<ej:RangeNavigator
[navigatorStyleSettings]="navigatorStyleSettings">
</ej:RangeNavigator>
|Not Applicable|
Tooltip
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|tooltip| Property: visible
this.tooltipSettings = { visible: true};<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>
|Property: enable <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { enable: true }|
|background color of tooltip| Property: backgroundColor
this.tooltipSettings = { backgroundColor: ‘red’};<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>
|Property: fill <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { fill: ‘pink’ }|
|Font style of tooltip| Property: font
this.tooltipSettings = { font: ‘red’};<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>
|Property: textStyle <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { textStyle: ‘pink’ }|
|Label format of tooltip| Property: labelFormat
this.tooltipSettings = {labelFormat: ‘yMd’};<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>
|Property: format <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { format: ‘yMd’}|
|Display mode of tooltip| Property: tooltipDisplayMode
this.tooltipSettings = { tooltipDisplayMode: ‘always’};<ej:RangeNavigator
[tooltipSettings]= "Tooltip">
</ej:RangeNavigator>
|Property: displayMode <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { displayMode: ‘Always’ }|
|Template of tooltip| Not Applicable|Property: template <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { template: ‘<div>Chart</div>’ }|
|Border of tooltip|Not Applicable|Property: border <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { border: { color: ‘red’, width: 2} }|
|Border of tooltip|Not Applicable|Property: opacity <ejs-rangenavigator
[tooltip]='tooltip'
</ejs-rangenavigator>
this.tooltip= { opacity: 0.5 }|
Period Selector
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|period Selector position|Not Applicable|Property: periodSelectorSettings.position <ejs-rangenavigator
[periodSelectorSettings]='periodsValue'
</ejs-rangenavigator>
this.periodsValue = { }|
Methods
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Print|Not Applicable|Property: print() <ejs-rangenavigator
#range id="range"
</ejs-rangenavigator>
print(){
this.RangeObj.print();}|
|Export|Not Applicable|Property: export() <ejs-rangenavigator
#range id="range"
</ejs-rangenavigator>
export(){
this.RangeObj.export(‘PNG’, ‘result’, null, [this.RangeObj]);}|
Events
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Fires before loading the RangeNavigator.| Property: load <ej:RangeNavigator
(load)="load($event)">
</ej:RangeNavigator>
load(sender){ };|Property: load <ejs-rangenavigator
load={this.load.bind(this)}
</ejs-rangenavigator>
public load(): void { };|
|Fires before loading the RangeNavigator.| Property: loaded <ej:RangeNavigator
(loaded)="onLoaded($event)">
</ej:RangeNavigator>
loaded(sender){ };|Property: loaded <ejs-rangenavigator
loaded={this.loaded.bind(this)}
</ejs-rangenavigator>
public loaded(): void { };|
|Fires when the value changes in range navigator| Property: rangeChanged <ej:RangeNavigator
(rangeChanged)="onRangeChanged($event)">
</ej:RangeNavigator>
onRangeChanged(sender){ };|Property: changed <ejs-rangenavigator
changed={this.changed.bind(this)}
</ejs-rangenavigator>
public changed(): void { };|
|Fires after the RangeNavigator|Not Applicable|Property: resized <ejs-rangenavigator
resized={this.resized.bind(this)}
</ejs-rangenavigator>
public resized(): void { };|
|Fires before tooltip in RangeNavigator|Not Applicable|Property: tooltipRender <ejs-rangenavigator
tooltipRender={this.tooltipRender.bind(this)}
</ejs-rangenavigator>
public tooltipRender(): void { };|
|Fires before period render in the RangeNavigator|Not Applicable|Property: selectorRender <ejs-rangenavigator
selectorRender={this.selectorRender.bind(this)}
</ejs-rangenavigator>
public selectorRender(): void { };|
|Fires when scrollStart the RangeNavigator|Property: scrollStart <ej:RangeNavigator
(scrollStart)="onScrollStart($event)">
</ej:RangeNavigator>
onScrollStart(sender){ };|Not Applicable|
|Fires when scrollEnd the RangeNavigator|Property: scrollEnd <ej:RangeNavigator
(scrollEnd)="onScrollEnd($event)">
</ej:RangeNavigator>
onScrollEnd(sender){ };|Not Applicable|
|Fires when selected range Start the RangeNavigator|Property: selectedRangeStart <ej:RangeNavigator
(selectedRangeStart)="onSelectedRangeStart($event)">
</ej:RangeNavigator>
onSelectedRangeStart(sender)(){ };|Not Applicable|
|Fires when selected range ends the RangeNavigator|Property: selectedRangeEnd <ej:RangeNavigator
(selectedRangeEnd)="onSelectedRangeEnd($event)">
</ej:RangeNavigator>
onSelectedRangeEnd(sender)(){ };|Not Applicable|
|Fires when scroll range changed in the RangeNavigator|Property: scrollChanged <ej:RangeNavigator
(scrollChanged)="onScrollChanged($event)">
</ej:RangeNavigator>
onScrollChanged(){ };|Not Applicable|
|Fires when click in the RangeNavigator|Property: click <ej:RangeNavigator
(click)="onClick($event)">
</ej:RangeNavigator>
onClick(){ };|Not Applicable|
|Fires when right click in the RangeNavigator|Property: rightClick <ej:RangeNavigator
(rightClick)="onRightClick($event)">
</ej:RangeNavigator>
onRightClick(){ };|Not Applicable|
|Fires when double click in the RangeNavigator|Property: doubleClick <ej:RangeNavigator
(doubleClick)="onDoubleClick($event)">
</ej:RangeNavigator>
onDoubleClick(){ };|Not Applicable|