Contents
- RangeNavigator
- Series
- StyleSettings
- Tooltip
- Period Selector
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 TypeScript Range navigator control
26 Sep 20239 minutes to read
This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
RangeNavigator
| 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 |
Series
| 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');
|
StyleSettings
| 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 |
Tooltip
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| tooltip |
Property:visible
</br>
</br>
$("#range").ejRangeNavigator({
tooltip: { visible: true }
});
|
Property:enable
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { enable: true }
});
range.appendTo('#element');
|
| background color of tooltip |
Property:backgroundColor
</br>
</br>
$("#range").ejRangeNavigator({
tooltip: { backgroundColor: 'red' }
});
|
Property:fill
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { fill: 'pink' }
});
range.appendTo('#element');
|
| Font style of tooltip |
Property:font
</br>
</br>
$("#range").ejRangeNavigator({
tooltip: { font: 'red' }
});
|
Property:textStyle
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { textStyle: 'pink' }
});
range.appendTo('#element');
|
| Label format of tooltip |
Property:labelFormat
</br>
</br>
$("#range").ejRangeNavigator({
tooltip: { labelFormat: 'yMd' }
});
|
Property:format
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { format: 'yMd' }
});
range.appendTo('#element');
|
| Display mode of tooltip |
Property:tooltipDisplayMode
</br>
</br>
$("#range").ejRangeNavigator({
tooltip: { tooltipDisplayMode: 'always' }
});
|
Property:displayMode
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { displayMode: 'Always' }
});
range.appendTo('#element');
|
| Template of tooltip | Not Applicable |
Property:template
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { template: '
|
| Border of tooltip | Not Applicable |
Property:border
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { border: { color: 'red', width: 2} }
});
range.appendTo('#element');
|
| Opacity of tooltip | Not Applicable |
Property:opacity
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
tooltip: { opacity: 0.5 }
});
range.appendTo('#element');
|
Period Selector
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| tooltip | Not Applicable |
Property:enable
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
periodSelector: {
periods: [ {
interval: 1, intervalType: 'Months', text: '1M'
}],
position: 'Top'
}
});
range.appendTo('#element');
|
Methods
| Behaviour | API in Essential JS 1 | API in Essential JS 2 |
| Not Applicable |
Property:print()
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
});
range.print('chart');
|
|
| Export | Not Applicable |
Property:export()
</br>
</br>
let range: RangeNavigator = new RangeNavigator({
});
range.export('JPEG', 'chart');
|
Events
| 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 |