This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
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 |
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> |
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 } |
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 = { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
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]);} |
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 |