This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Allow snapping |
Property:allowSnapping
</br>
</br>
$("#range").ejRangeNavigator({
allowSnapping: true;
});
|
Property:allowSnapping
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
allowSnapping: true
});
range.appendTo('#element');
|
| Animation duration |
Not Applicable
|
Property:animationDuration
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
animationDuration: 2000
});
range.appendTo('#element');
|
| Allow snapping |
Property:allowSnapping
</br>
</br>
$("#range").ejRangeNavigator({
allowSnapping: true;
});
|
Property:allowSnapping
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
allowSnapping: true
});
range.appendTo('#element');
|
| Border for range navigator |
Property:allowSnapping
</br>
</br>
$("#range").ejRangeNavigator({
border: { color: 'red', width: 2, opacity: 0.5 }
});
|
Property:navigatorBorder
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
navigatorBorder:{ color: 'pink', width: 2}
});
range.appendTo('#element');
|
| dataSource for range navigator |
Property:dataSource
</br>
</br>
$("#range").ejRangeNavigator({
dataSource: [{}]
});
|
Property:dataSource
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
dataSource: []
});
range.appendTo('#element');
|
| enabling deffered update for range navigator |
Property:enableDeferedUpdate
</br>
</br>
$("#range").ejRangeNavigator({
enableDeferedUpdate: true
});
|
Property:enableDeferredUpdate
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
enableDeferredUpdate : false
});
range.appendTo('#element');
|
| multilevel level labels |
Property:labelSettings.higherLevelLabels
</br>
</br>
$("#range").ejRangeNavigator({
labelSettings.higherLevelLabels: { }
});
|
Property:enableGrouping
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
enableGrouping : false
});
range.appendTo('#element');
|
| enabling scroll bar |
Property:enableScrollBar
</br>
</br>
$("#range").ejRangeNavigator({
enablescrollBar: true
});
|
Not Applicable
|
| enabling auto resizing |
Property:enableAutoResize
</br>
</br>
$("#range").ejRangeNavigator({
enablescrollBar: true
});
|
Not Applicable
|
| responsive of range navigator |
Property:isResponsive
</br>
</br>
$("#range").ejRangeNavigator({
isResponsive: true
});
|
Not Applicable
|
| enabling RTL for range navigator |
Property:enableRtl
</br>
</br>
$("#range").ejRangeNavigator({
enableRtl: true
});
|
Property:enableRtl
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
enableRtl : false
});
range.appendTo('#element');
|
| interval for range navigator |
Property:valueAxisSettings.range.interval
</br>
</br>
$("#range").ejRangeNavigator({
valueAxisSettings.range.interval = 1
});
|
Property:interval
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
interval : 1
});
range.appendTo('#element');
|
| intervaltype for range navigator |
Property:valueAxisSettings.range.interval
</br>
</br>
$("#range").ejRangeNavigator({
valueAxisSettings.intervalType = 'Years'
});
|
Property:intervalType
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
intervalType : 'Months'
});
range.appendTo('#element');
|
| labelformat for range navigator |
Not applicable
|
Property:labelFormat
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
labelFormat : 'yMd'
});
range.appendTo('#element');
|
| label intersect action for range navigator |
Not applicable
|
Property:labelIntersectAction
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
labelIntersectAction : 'Hide'
});
range.appendTo('#element');
|
| labelStyle range navigator |
Property:valueAxisSettings.font
</br>
</br>
$("#range").ejRangeNavigator({
valueAxisSettings.font: { }
});
|
Property:labelStyle
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
labelStyle : 'Hide'
});
range.appendTo('#element');
|
| locale of range navigator |
Property:locale
</br>
</br>
$("#range").ejRangeNavigator({
locale: 'en-US'
});
|
Property:labelStyle
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
locale: 'en-US'
});
range.appendTo('#element');
|
| major grid lines of range navigator |
Property:valueAxisSettings.majorGridLines
</br>
</br>
$("#range").ejRangeNavigator({
valueAxisSettings: {
majorGridLines: {
width: 2,
color: 'red'
}
}
});
|
Property:majorGridLines
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
majorGridLines: {
width: 2, color: 'red'
}
});
range.appendTo('#element');
|
| margin of range navigator |
Not Applicable
|
Property:margin
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
margin: { }
});
range.appendTo('#element');
|
| maximum value of range navigator |
Property:valueAxisSettings.range.max
</br>
</br>
$("#range").ejRangeNavigator({
valueAxisSettings: {
range: {
max: 34
}
}
});
|
Property:maximum
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
maximum: 34
});
range.appendTo('#element');
|
| minimum value of range navigator |
Property:valueAxisSettings.range.min
</br>
</br>
$("#range").ejRangeNavigator({
valueAxisSettings: {
range: {
min: 34
}
}
});
|
Property:minimum
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
minimum: 4
});
range.appendTo('#element');
|
| query for data source of range navigator |
Not Applicable
|
Property:query
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
query: ''
});
range.appendTo('#element');
|
| Secondary label alignment of range navigator |
Not Applicable
|
Property:secondaryLabelAlignment
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
secondaryLabelAlignment: 'Far'
});
range.appendTo('#element');
|
| Skeleton of range navigator axis |
Not Applicable
|
Property:skeleton
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
skeleton: ''
});
range.appendTo('#element');
|
| skeletontype of range navigator axis |
Not Applicable
|
Property:skeletonType
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
skeletonType: ''
});
range.appendTo('#element');
|
| Theme of range navigator |
Property:theme
</br>
</br>
$("#range").ejRangeNavigator({
theme: ''
});
|
Property:theme
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
theme: ''
});
range.appendTo('#element');
|
| Default selector value range navigator |
Property:selectedRangeSettings
</br>
</br>
$("#range").ejRangeNavigator({
selectedRangeSettings: { start: 2, end: 20}
});
|
Property:value
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
value: [ 2, 10]
});
range.appendTo('#element');
|
| Value type of range navigator |
Property:valueType
</br>
</br>
$("#range").ejRangeNavigator({
valueType: 'DateTime'
});
|
Property:valueType
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
valueType: 'Logarithmic'
});
range.appendTo('#element');
|
| Width of range navigator |
Property:size.width
</br>
</br>
$("#range").ejRangeNavigator({
size: { width: '200'}
});
|
Property:width
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
width: '400'
});
range.appendTo('#element');
|
| Height of range navigator |
Property:size.height
</br>
</br>
$("#range").ejRangeNavigator({
size: { height: '200'}
});
|
Property:height
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
height: '400'
});
range.appendTo('#element');
|
| Series settings for range navigator |
Property:seriesSettings
</br>
</br>
$("#range").ejRangeNavigator({
seriesSettings: { }
});
|
Not Applicable
|
| Range settings for range navigator |
Property:rangeSettings
</br>
</br>
$("#range").ejRangeNavigator({
rangeSettings: { start: 3, end: 6 }
});
|
Not Applicable
|
| Scroll range settings for range navigator |
Property:scrollRangeSettings
</br>
</br>
$("#range").ejRangeNavigator({
scrollRangeSettings: { start: 3, end: 6 }
});
|
Not Applicable
|
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| animation |
Property:enableAnimation
</br>
</br>
$("#range").ejRangeNavigator({
enableAnimation: true
});
|
Property:animation
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
animation: { enable: true, duration: 2000 }
});
range.appendTo('#element');
|
| Border for range navigator series |
Not Applicable
|
Property:border
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{border:{ color: 'pink', width: 2}}]
});
range.appendTo('#element');
|
| dataSource for range navigator |
Property:series.dataSource
</br>
</br>
$("#range").ejRangeNavigator({
series: [{ dataSource: [{}] }]
});
|
Property:series.dataSource
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{ dataSource: [] }];
});
range.appendTo('#element');
|
| query for data source of range navigator |
Not Applicable
|
Property:query
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [ { query: '' }]
});
range.appendTo('#element');
|
| series type for range navigator |
Property:series.type
</br>
</br>
$("#range").ejRangeNavigator({
series: [{ type: '' }]
});
|
Property:series.type
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{type: '' }];
});
range.appendTo('#element');
|
| series xName for range navigator |
Property:series.xName
</br>
</br>
$("#range").ejRangeNavigator({
series: [{ xName: '' }]
});
|
Property:series.xName
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{ xName: '' }];
});
range.appendTo('#element');
|
| series yName for range navigator |
Property:series.yName
</br>
</br>
$("#range").ejRangeNavigator({
series: [{ yName: '' }]
});
|
Property:series.yName
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{ yName: '' }];
});
range.appendTo('#element');
|
| series fill color for range navigator |
Property:series.fill
</br>
</br>
$("#range").ejRangeNavigator({
series: [{ fill: '' }]
});
|
Property:series.fill
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{ fill: '' }];
});
range.appendTo('#element');
|
| series width for range navigator |
Property:series.width
</br>
</br>
$("#range").ejRangeNavigator({
series: [{ width: '' }]
});
|
Property:series.width
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{ width: '' }];
});
range.appendTo('#element');
|
| series dashArray for range navigator |
Not Applicable
|
Property:series.dashArray
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
series: [{ dashArray: '' }];
});
range.appendTo('#element');
|
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Style settings of range navigator |
Property:navigatorStyleSettings
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: { }
});
|
Property:styleSettings
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
styleSettings: {}
});
range.appendTo('#element');
|
| Selected region color of range navigator |
Property:selectedRegionColor
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
selectedRegionColor: 'red'
}
});
|
Property:selectedRegionColor
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
styleSettings: {
selectedRegionColor: 'red'
}
});
range.appendTo('#element');
|
| UnSeleted region color of range navigator |
Property:unselectedRegionColor
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
unselectedRegionColor: 'red'
}
});
|
Property:unselectedRegionColor
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
styleSettings: {
unselectedRegionColor: 'red'
}
});
range.appendTo('#element');
|
| Thumb color of range navigator |
Property:navigatorStyleSettings
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
thumbColor: ''red'
}
});
|
Property:thumbSettings
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
styleSettings: {
thumbSettings: 'pink'
}
});
range.appendTo('#element');
|
| Thumb color of range navigator |
Property:navigatorStyleSettings
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
thumbColor: ''red'
}
});
|
Property:thumbSettings
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
styleSettings: {
thumbSettings: 'pink'
}
});
range.appendTo('#element');
|
| Selected region opacity of range navigator |
Property:selectedRegionOpacity
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
selectedRegionOpacity: 0.4
}
});
|
Not Applicable
|
| Unselected region opacity of range navigator |
Property:unselectedRegionOpacity
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
unselectedRegionOpacity: 0.4
}
});
|
Not Applicable
|
| Background for thumb |
Property:background
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
background: 'red'
}
});
|
Not Applicable
|
| border for thumb |
Property:border
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
border: { color: 'red', width: 2}
}
});
|
Not Applicable
|
| Highlightsettings for range navigator |
Property:highlightSettings
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
highlightSettings: { }
}
});
|
Not Applicable
|
| Selected style settings for range navigator |
Property:selectionSettings
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
selectionSettings: { }
}
});
|
Not Applicable
|
| Left thumb template for range navigator |
Property:leftThumbTemplate
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
leftThumbTemplate: ''
}
});
|
Not Applicable
|
| Right thumb template for range navigator |
Property:rightThumbTemplate
</br>
</br>
$("#range").ejRangeNavigator({
navigatorStyleSettings: {
rightThumbTemplate: ''
}
});
|
Not Applicable
|
| Behaviour |
API in Essential JS 1 |
API in Essential JS 2 |
| Fires before loading the RangeNavigator. |
Property:load
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
load: () {
}
});
|
Property:load
</br>
</br>
let rangeNavigator: RangeNavigator = new RangeNavigator({
load: () => {
}
});
rangeNavigator.appendTo('#rangeNavigator');
|
| Fires before loading the RangeNavigator. |
Property:loaded
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
loaded: () {
}
});
|
Property:loaded
</br>
</br>
let rangeNavigator: RangeNavigator = new RangeNavigator({
loaded: () => {
}
});
rangeNavigator.appendTo('#rangeNavigator');
|
| Fires when the value changes in range navigator. |
Property:rangeChanged
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
rangeChanged: () {
}
});
|
Property:changed
</br>
</br>
let rangeNavigator: RangeNavigator = new RangeNavigator({
changed: () => {
}
});
rangeNavigator.appendTo('#rangeNavigator');
|
| Fires before after the RangeNavigator. |
Not Applicable
|
Property:changed
</br>
</br>
let rangeNavigator: RangeNavigator = new RangeNavigator({
resized: () => {
}
});
rangeNavigator.appendTo('#rangeNavigator');
|
| Fires before tooltip the RangeNavigator. |
Not Applicable
|
Property:tooltipRender
</br>
</br>
let rangeNavigator: RangeNavigator = new RangeNavigator({
tooltipRender: () => {
}
});
rangeNavigator.appendTo('#rangeNavigator');
|
| Fires before period render in the RangeNavigator. |
Not Applicable
|
Property:selectorRender
</br>
</br>
let rangeNavigator: RangeNavigator = new RangeNavigator({
selectorRender: () => {
}
});
rangeNavigator.appendTo('#rangeNavigator');
|
| Fires when scrollStart the RangeNavigator. |
Property:scrollStart
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
scrollStart: () {
}
});
|
Not Applicable
|
| Fires when scrollEnd the RangeNavigator. |
Property:scrollEnd
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
scrollEnd: () {
}
});
|
Not Applicable
|
| Fires when selected range Start the RangeNavigator. |
Property:selectedRangeStart
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
selectedRangeStart: () {
}
});
|
Not Applicable
|
| Fires when selected range ends the RangeNavigator. |
Property:selectedRangeEnd
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
selectedRangeEnd: () {
}
});
|
Not Applicable
|
| Fires when scroll range changed in the RangeNavigator. |
Property:scrollChanged
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
scrollChanged: () {
}
});
|
Not Applicable
|
| Fires when click in the RangeNavigator. |
Property:click
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
click: () {
}
});
|
Not Applicable
|
| Fires when right click in the RangeNavigator. |
Property:rightClick
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
rightClick: () {
}
});
|
Not Applicable
|
| Fires when double click in the RangeNavigator. |
Property:doubleClick
</br>
</br>
$("#rangeNavigator").ejRangeNavigator({
doubleClick: () {
}
});
|
Not Applicable
|