React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React Range Navigator component

02 Feb 2023 / 8 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

<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

Series

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>

StyleSettings

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

Tooltip

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>

Period Selector

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>

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Print 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>

Events

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
Previous
Next