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 <RangeNavigatorComponent id='charts' allowSnapping={true}> </RangeNavigatorComponent> |
Animation duration | Not Applicable | Property: allowSnapping <RangeNavigatorComponent id='charts' animationDuration='2000'> </RangeNavigatorComponent> |
Border for range navigator | Property: border var border = { color:‘blue’, width:2, opacity:0.5 }; <EJ.RangeNavigator border ={border}> </EJ.RangeNavigator> |
Property: navigatorBorder <RangeNavigatorComponent id='charts' navigatorBorder={ width: 4, color: 'green'}> </RangeNavigatorComponent> |
dataSource for range navigator | Property: dataSource var series = { type: ‘line’, dataSource: data }; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: dataSource <RangenavigatorSeriesDirective dataSource={data}> </RangenavigatorSeriesDirective> |
enabling deffered update for range navigator | Property: enableDeferedUpdate <EJ.RangeNavigator enableDeferedUpdate={true}> </EJ.RangeNavigator> |
Property: enableDeferredUpdate <RangeNavigatorComponent id='charts' enableDeferredUpdate={false}> </RangeNavigatorComponent> |
multilevel level labels | Property: labelSettings.higherLevelLabels var labelSettings= { higherLevel: { } }; <EJ.RangeNavigator labelSettings = {labelSettings}> </EJ.RangeNavigator> |
Property: enableGrouping <RangeNavigatorComponent id='charts' enableGrouping={false}> </RangeNavigatorComponent> |
enabling scroll bar | Property: enableScrollBar var labelSettings= { higherLevel: { } }; <EJ.RangeNavigator enableScrollBar={true}> </EJ.RangeNavigator> |
Not Applicable |
enabling auto resizing | Property: enableAutoResize <EJ.RangeNavigator enableAutoResize={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 <RangeNavigatorComponent id='charts' enableRtl={false}> </RangeNavigatorComponent> |
interval for range navigator | Property: valueAxisSettings.range.interval var valueAxisSettings= {Interval: 5 }; <EJ.RangeNavigator valueAxisSettings={valueAxisSettings}> </EJ.RangeNavigator> |
Property: interval <RangeNavigatorComponent id='charts' interval={1}> </RangeNavigatorComponent> |
intervaltype for range navigator | Property: valueAxisSettings.range.intervalType var valueAxisSettings= {intervalType: ‘Years’}; <EJ.RangeNavigator valueAxisSettings={valueAxisSettings}> </EJ.RangeNavigator> |
Property: intervalType <RangeNavigatorComponent id='charts' intervalType='Months'> </RangeNavigatorComponent> |
labelformat for range navigator | Not applicable | Property: labelFormat <RangeNavigatorComponent id='charts' labelFormat='yMd'> </RangeNavigatorComponent> |
label intersect action for range navigator | Not applicable | Property: labelIntersectAction <RangeNavigatorComponent id='charts' labelIntersectAction='Hide'> </RangeNavigatorComponent> |
labelStyle range navigator | Property: valueAxisSettings.font var valueAxisSettings= {font: { } }; <EJ.RangeNavigator valueAxisSettings={valueAxisSettings}> </EJ.RangeNavigator> |
Property: labelStyle <RangeNavigatorComponent id='charts' labelStyle='Hide'> </RangeNavigatorComponent> |
locale of range navigator | Property: locale <EJ.RangeNavigator locale='en-US'> </EJ.RangeNavigator> |
Property: locale <RangeNavigatorComponent id='charts' locale='en-US'> </RangeNavigatorComponent> |
major grid lines of range navigator | Property: valueAxisSettings.majorGridLines var valueAxisSettings= { majorGridLines: { width: 2, color: ‘red’ } }; <EJ.RangeNavigator locale='en-US'> </EJ.RangeNavigator> |
Property: majorGridLines <RangeNavigatorComponent id='charts' majorGridLines={ width: 2, color: 'red'}> </RangeNavigatorComponent> |
margin of range navigator | Not Applicable | Property: margin <RangeNavigatorComponent id='charts' margin={ }> </RangeNavigatorComponent> |
maximum value of range navigator | Property: valueAxisSettings.range.max var valueAxisSettings= { range: { max: 2 } }; <EJ.RangeNavigator locale='en-US'> </EJ.RangeNavigator> |
Property: maximum <RangeNavigatorComponent id='charts' maximum={34}> </RangeNavigatorComponent> |
minimum value of range navigator | Property: valueAxisSettings.range.min var valueAxisSettings= { range: { min: 2 } }; <EJ.RangeNavigator locale='en-US'> </EJ.RangeNavigator> |
Property: minimum <RangeNavigatorComponent id='charts' minimum={4}> </RangeNavigatorComponent> |
query for data source of range navigator | Not Applicable | Property: query <RangeNavigatorComponent id='charts' query=''> </RangeNavigatorComponent> |
Secondary label alignment of range navigator | Not Applicable | Property: secondaryLabelAlignment <RangeNavigatorComponent id='charts' secondaryLabelAlignment='Far'> </RangeNavigatorComponent> |
Skeleton of range navigator axis | Not Applicable | Property: skeleton <RangeNavigatorComponent id='charts' skeleton=''> </RangeNavigatorComponent> |
skeletontype of range navigator axis | Not Applicable | Property: skeletonType <RangeNavigatorComponent id='charts' skeletonType=''> </RangeNavigatorComponent> |
Theme of range navigator | Property: theme <EJ.RangeNavigator theme=''> </EJ.RangeNavigator> |
Property: theme <RangeNavigatorComponent id='charts' theme=''> </RangeNavigatorComponent> |
Default selector value range navigator | Property: selectedRangeSettings var selectedRangeSettings= {start:”, end:”}; <EJ.RangeNavigator selectedRangeSettings={selectedRangeSettings}> </EJ.RangeNavigator> |
Property: value <RangeNavigatorComponent id='charts' value=[ 2, 10]> </RangeNavigatorComponent> |
Value type of range navigator | Property: valueType <EJ.RangeNavigator valueType='DateTime'> </EJ.RangeNavigator> |
Property: valueType <RangeNavigatorComponent id='charts' valueType='Logarithmic'> </RangeNavigatorComponent> |
Width of range navigator | Property: size.width <EJ.RangeNavigator size={ width: '200'}> </EJ.RangeNavigator> |
Property: width <RangeNavigatorComponent id='charts' width='400'> </RangeNavigatorComponent> |
Height of range navigator | Property: size.height <EJ.RangeNavigator size={ height: '200'}> </EJ.RangeNavigator> |
Property: height <RangeNavigatorComponent id='charts' height='400'> </RangeNavigatorComponent> |
Series settings for range navigator | Property: seriesSettings var seriesSettings= { }; <EJ.RangeNavigator seriesSettings={seriesSettings}> </EJ.RangeNavigator> |
Not Applicable |
Range settings for range navigator | Property: rangeSettings var rangeSettings= { start: 3, end: 6 }; <EJ.RangeNavigator rangeSettings={rangeSettings}> </EJ.RangeNavigator> |
Not Applicable |
Scroll range settings for range navigator | Property: scrollRangeSettings var 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 <RangeNavigatorComponent id='charts' animation={ enable: true}> </RangeNavigatorComponent> |
Border for range navigator series | Property: border var series = [{ border: { color: ‘transparent’, width: 2 } }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: border <RangenavigatorSeriesDirective border={ color: 'pink', width: 2}> </RangenavigatorSeriesDirective> |
dataSource for range navigator | Property: series.dataSource var series = [{ dataSource: [{}] }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: series.dataSource <RangenavigatorSeriesDirective dataSource={data}> </RangenavigatorSeriesDirective> |
query for data source of range navigator | Not Applicable | Property: query <RangenavigatorSeriesDirective dataSource={data} query=''> </RangenavigatorSeriesDirective> |
series type for range navigator | Property: series.type var series = [{ type: ” }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: series.type <RangenavigatorSeriesDirective type=''> </RangenavigatorSeriesDirective> |
series xName for range navigator | Property: series.xName var series = [{ xName: ” }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: series.xName <RangenavigatorSeriesDirective xName=''> </RangenavigatorSeriesDirective> |
series yName for range navigator | Property: series.yName var series = [{ yName: ” }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: series.yName <RangenavigatorSeriesDirective yName=''> </RangenavigatorSeriesDirective> |
series fill color for range navigator | Property: series.fill var series = [{ fill: ” }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: series.fill <RangenavigatorSeriesDirective fill=''> </RangenavigatorSeriesDirective> |
series width for range navigator | Property: series.width var series = [{ width: ‘2’ }]; <EJ.RangeNavigator series={series}> </EJ.RangeNavigator> |
Property: series.width <RangenavigatorSeriesDirective width=''> </RangenavigatorSeriesDirective> |
series dashArray for range navigator | Not Applicable | Property: series.dashArray <RangenavigatorSeriesDirective dashArray='10,5'> </RangenavigatorSeriesDirective> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Style settings of range navigator | Property: navigatorStyleSettings var navigatorStyleSettings = { leftThumbTemplate: ‘left’ }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Property: navigatorStyleSettings <RangeNavigatorComponent id='charts' navigatorStyleSettings={ unselectedRegionColor: 'transparent' } </RangeNavigatorComponent> |
Selected region color of range navigator | Property: selectedRegionColor var navigatorStyleSettings = { selectedRegionColor: ‘red’ }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Property: selectedRegionColor <RangeNavigatorComponent id='charts' navigatorStyleSettings={selectedRegionColor: 'red' } </RangeNavigatorComponent> |
UnSelected region color of range navigator | Property: unselectedRegionColor var navigatorStyleSettings = { unselectedRegionColor: ‘red’ }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Property: unselectedRegionColor <RangeNavigatorComponent id='charts' navigatorStyleSettings={unselectedRegionColor: 'red' } </RangeNavigatorComponent> |
Thumb color of range navigator | Property: thumbColor var navigatorStyleSettings = { thumbColor: ‘red’ }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Property: thumbSettings <RangeNavigatorComponent id='charts' navigatorStyleSettings={thumbSettings: 'red' } </RangeNavigatorComponent> |
Selected region opacity of range navigator | Property: selectedRegionOpacity var navigatorStyleSettings = { selectedRegionOpacity: 0.4 }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Unselected region opacity of range navigator | Property: UnselectedRegionOpacity var navigatorStyleSettings = { UnselectedRegionOpacity: 0.4 }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Background for thumb | Property: background var navigatorStyleSettings = { background: ‘red’ }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
border for thumb | Property: border var navigatorStyleSettings = { border: { color: ‘red’, width: 2} }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Highlightsettings for range navigator | Property: highlightSettings var navigatorStyleSettings = { highlightSettings: { } }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Selected style settings for range navigator | Property: selectionSettings var navigatorStyleSettings = { selectionSettings: { } }; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Left thumb template for range navigator | Property: leftThumbTemplate var navigatorStyleSettings = { leftThumbTemplate: ”}; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Right thumb template for range navigator | Property: rightThumbTemplate var navigatorStyleSettings = { rightThumbTemplate: ”}; <EJ.RangeNavigator navigatorStyleSettings={navigatorStyleSettings}> </EJ.RangeNavigator> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
tooltip | Property: visible var tooltipSettings = { visible: true}; <EJ.RangeNavigator tooltipSettings = {tooltipSettings}> </EJ.RangeNavigator> |
Property: enable <RangeNavigatorComponent id='charts' tooltip= { enable: true } </RangeNavigatorComponent> |
background color of tooltip | Property: backgroundColor var tooltipSettings = { backgroundColor: ‘red’}; <EJ.RangeNavigator tooltipSettings = {tooltipSettings}> </EJ.RangeNavigator> |
Property: fill <RangeNavigatorComponent id='charts' tooltip= { fill: 'pink' } </RangeNavigatorComponent> |
Font style of tooltip | Property: font var tooltipSettings = { font: ‘red’}; <EJ.RangeNavigator tooltipSettings = {tooltipSettings}> </EJ.RangeNavigator> |
Property: textStyle <RangeNavigatorComponent id='charts' tooltip= { textStyle: 'pink' } </RangeNavigatorComponent> |
Label format of tooltip | Property: labelFormat var tooltipSettings = {labelFormat: ‘yMd’}; <EJ.RangeNavigator tooltipSettings = {tooltipSettings}> </EJ.RangeNavigator> |
Property: format <RangeNavigatorComponent id='charts' tooltip= { format: 'yMd' } </RangeNavigatorComponent> |
Display mode of tooltip | Property: tooltipDisplayMode var tooltipSettings = { tooltipDisplayMode: ‘always’}; <EJ.RangeNavigator tooltipSettings = {tooltipSettings}> </EJ.RangeNavigator> |
Property: displayMode <RangeNavigatorComponent id='charts' tooltip= {displayMode: 'Always'} </RangeNavigatorComponent> |
Template of tooltip | Not Applicable | Property: template <RangeNavigatorComponent id='charts' tooltip= {template: '<div>Chart</div>'} </RangeNavigatorComponent> |
Border of tooltip | Not Applicable | Property: border <RangeNavigatorComponent id='charts' tooltip= {border: { color: 'red', width: 2} } </RangeNavigatorComponent> |
Border of tooltip | Not Applicable | Property: opacity <RangeNavigatorComponent id='charts' tooltip= {opacity: 0.5 } </RangeNavigatorComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
period Selector position | Not Applicable | Property: periodSelectorSettings.position <RangeNavigatorComponent id='charts' periodSelectorSettings= { position:'Top'} </RangeNavigatorComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Not Applicable | Property: print() public clickHandler(){ this.range.print();} <RangeNavigatorComponent id='charts' ref={g => this.range = g} </RangeNavigatorComponent> |
|
Export | Not Applicable | Property: export() public clickHandler(){ this.range.export(‘PNG’,‘export’);} <RangeNavigatorComponent id='charts' ref={g => this.range = g} </RangeNavigatorComponent> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fires before loading the RangeNavigator. | Property: load <EJ.RangeNavigator load = {Load}> </EJ.RangeNavigator> function Load(){ }; |
Property: load <RangeNavigatorComponent id='charts' load={this.load.bind(this)} </RangeNavigatorComponent> public load(): void { }; |
Fires before loading the RangeNavigator. | Property: loaded <EJ.RangeNavigator loaded = {loaded}> </EJ.RangeNavigator> function Loaded(){ }; |
Property: loaded <RangeNavigatorComponent id='charts' loaded={this.loaded.bind(this)} </RangeNavigatorComponent> public loaded(): void { }; |
Fires when the value changes in range navigator | Property: rangeChanged <EJ.RangeNavigator rangeChanged = {rangeChanged}> </EJ.RangeNavigator> function rangeChanged(){ }; |
Property: changed <RangeNavigatorComponent id='charts' changed={this.changed.bind(this)} </RangeNavigatorComponent> public changed(): void { }; |
Fires after the RangeNavigator | Not Applicable | Property: resized <RangeNavigatorComponent id='charts' resized={this.resized.bind(this)} </RangeNavigatorComponent> public resized(): void { }; |
Fires before tooltip in RangeNavigator | Not Applicable | Property: tooltipRender <RangeNavigatorComponent id='charts' tooltipRender={this.tooltipRender.bind(this)} </RangeNavigatorComponent> public tooltipRender(): void { }; |
Fires before period render in the RangeNavigator | Not Applicable | Property: selectorRender <RangeNavigatorComponent id='charts' selectorRender={this.selectorRender.bind(this)} </RangeNavigatorComponent> public selectorRender(): void { }; |
Fires when scrollStart the RangeNavigator | Property: scrollStart <EJ.RangeNavigator scrollStart = {scrollStart}> </EJ.RangeNavigator> function scrollStart(){ }; |
Not Applicable |
Fires when scrollEnd the RangeNavigator | Property: scrollEnd <EJ.RangeNavigator scrollEnd = {scrollEnd}> </EJ.RangeNavigator> function scrollEnd(){ }; |
Not Applicable |
Fires when selected range Start the RangeNavigator | Property: selectedRangeStart <EJ.RangeNavigator selectedRangeStart = {selectedRangeStart}> </EJ.RangeNavigator> function selectedRangeStart(){ }; |
Not Applicable |
Fires when selected range ends the RangeNavigator | Property: selectedRangeEnd <EJ.RangeNavigator selectedRangeEnd = {selectedRangeEnd}> </EJ.RangeNavigator> function selectedRangeEnd(){ }; |
Not Applicable |
Fires when scroll range changed in the RangeNavigator | Property: scrollChanged <EJ.RangeNavigator scrollChanged = {scrollChanged}> </EJ.RangeNavigator> function scrollChanged(){ }; |
Not Applicable |
Fires when click in the RangeNavigator | Property: click <EJ.RangeNavigator click = {click}> </EJ.RangeNavigator> function click(){ }; |
Not Applicable |
Fires when right click in the RangeNavigator | Property: rightClick <EJ.RangeNavigator rightClick = {rightClick}> </EJ.RangeNavigator> function rightClick(){ }; |
Not Applicable |
Fires when double click in the RangeNavigator | Property: doubleClick <EJ.RangeNavigator doubleClick = {doubleClick}> </EJ.RangeNavigator> function doubleClick(){ }; |
Not Applicable |