Migration from Essential JS 1 in Angular Range Navigator component

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

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: ’ Chart ’ }
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

Contents

RangeNavigator
Series
StyleSettings
Tooltip
Period Selector
Methods
Events

Contents

RangeNavigator
Series
StyleSettings
Tooltip
Period Selector
Methods
Events

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Migration from Essential JS 1 in Angular Range Navigator component

RangeNavigator

Series

StyleSettings

Tooltip

Period Selector

Methods

Events