Migration from Essential JS 1

17 Feb 202220 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: allow-snapping

<ej-range-navigator id="range" allow-snapping="true">
</ej-range-navigator> 		Property: allowSnapping

<ejs-rangenavigator id="range" allowSnapping="true">
</ejs-rangenavigator>
Animation duration Property: Not Applicable Property: animationDuration

<ejs-rangenavigator id="range" animationDuration="1000">
</ejs-rangenavigator>
Border for range navigator Property: e-border

<ej-range-navigator id="range">
<e-border color="red" width="2">
</e-border>
</ej-range-navigator> 		Property: allowSnapping

<ejs-rangenavigator id="range">
<e-rangenavigator-navigatorborder color="red">
</e-rangenavigator-navigatorborder>
</ejs-rangenavigator>
dataSource for range navigator Property: dataSource

<ej-range-navigator id="range" dataSource="">
</ej-range-navigator> 		Property: dataSource

<ejs-rangenavigator id="range" dataSource="">
</ejs-rangenavigator>
enabling deffered update for range navigator Property: enable-deferred-update

<ej-range-navigator id="range" enable-deferred-update="true">
</ej-range-navigator> 		Property: enableDeferredUpdate

<ejs-rangenavigator id="range" enableDeferredUpdate="true">
</ejs-rangenavigator>
multilevel level labels Property: e-lower-level

<ej-range-navigator id="range">
<e-label-settings>
<e-lower-level>
</e-lower-level>
</e-label-settings>
</ej-range-navigator> 		Property: enableGrouping

<ejs-rangenavigator id="range" enableGrouping="true">
</ejs-rangenavigator>
enabling scroll bar Property: enable-scrollbar

<ej-range-navigator id="range" enable-scrollbar="true">
</ej-range-navigator> 		Property: Not Applicable
enabling auto resizing Property: enable-auto-resizing

<ej-range-navigator id="range" enable-auto-resizing="true">
</ej-range-navigator> 		Property: Not Applicable
responsive of range navigator Property: is-responsive

<ej-range-navigator id="range" is-responsive="true">
</ej-range-navigator> 		Property: Not Applicable
enabling RTL for range navigator Property: enable-rtl

<ej-range-navigator id="range" enable-rtl="true">
</ej-range-navigator> 		Property: enableRtl

<ejs-rangenavigator id="range" enableRtl="true">
</ejs-rangenavigator>
interval for range navigator Property: interval

<ej-range-navigator id="range">
<e-value-axis-settings interval="5" size="2" width="2">
</e-value-axis-settings>
</ej-range-navigator> 		Property: interval

<ejs-rangenavigator id="range" interval="1">
</ejs-rangenavigator>
intervaltype for range navigator Property: interval-type

<ej-range-navigator id="range">
<e-value-axis-settings interval-type="Years">
</e-value-axis-settings>
</ej-range-navigator> 		Property: intervalType

<ejs-rangenavigator id="range" intervalType="Years">
</ejs-rangenavigator>
labelformat for range navigator Property: Not applicable Property: labelFormat

<ejs-rangenavigator id="range" labelFormat="yMd">
</ejs-rangenavigator>
label intersect action for range navigator Property: Not applicable Property: labelIntersectAction

<ejs-rangenavigator id="range" labelIntersectAction="Hide">
</ejs-rangenavigator>
labelStyle range navigator Property: e-font

<ej-range-navigator id="range">
<e-value-axis-settings>
<e-font>
</e-font>
</e-value-axis-settings>
</ej-range-navigator> 		Property: e-rangenavigator-labelstyle

<ejs-rangenavigator id="range">
<e-rangenavigator-labelstyle>
</e-rangenavigator-labelstyle>
</ejs-rangenavigator>
locale of range navigator Property: locale

<ej-range-navigator id="range" locale="en-US">
</ej-range-navigator> 		Property: locale

<ejs-rangenavigator id="range" locale="en-US">
</ejs-rangenavigator>
major grid lines of range navigator Property: e-major-grid-lines

<ej-range-navigator id="range">
<e-value-axis-settings>
<e-major-grid-lines width="2" color="red">
</e-major-grid-lines>
</e-value-axis-settings>
</ej-range-navigator> 		Property: e-rangenavigator-majorgridlines

<ejs-rangenavigator id="range">
<e-rangenavigator-majorgridlines color="red" width="2">
</e-rangenavigator-majorgridlines>
</ejs-rangenavigator>
margin of range navigator Property: Not applicable Property: e-rangenavigator-margin

<ejs-rangenavigator id="range">
<e-rangenavigator-margin top="10" bottom="10">
</e-rangenavigator-margin>
</ejs-rangenavigator>
maximum value of range navigator Property: max

<ej-range-navigator id="range">
<e-value-axis-settings max="30">
</e-value-axis-settings>
</ej-range-navigator> 		Property: maximum

<ejs-rangenavigator id="range" maximum="30">
</ejs-rangenavigator>
minimum value of range navigator Property: min

<ej-range-navigator id="range">
<e-value-axis-settings min="30">
</e-value-axis-settings>
</ej-range-navigator> 		Property: minimum

<ejs-rangenavigator id="range" minimum="30">
</ejs-rangenavigator>
query for data source of range navigator Property: Not Applicable Property: query

<ejs-rangenavigator id="range" query="">
</ejs-rangenavigator>
Secondary label alignment of range navigator Property: Not Applicable Property: secondaryLabelAlignment

<ejs-rangenavigator id="range" secondaryLabelAlignment="Far">
</ejs-rangenavigator>
Skeleton of range navigator axis Property: Not Applicable Property: skeleton

<ejs-rangenavigator id="range" skeleton="">
</ejs-rangenavigator>
skeletontype of range navigator axis Property: Not Applicable Property: skeletonType

<ejs-rangenavigator id="range" skeletonType="">
</ejs-rangenavigator>
Theme of range navigator Property: theme

<ej-range-navigator id="range" theme="">
</ej-range-navigator> 		Property: theme

<ejs-rangenavigator id="range" theme="">
</ejs-rangenavigator>
Default selector value range navigator Property: e-selected-range-settings

<ej-range-navigator id="range">
<e-selected-range-settings start="10" end="10">
</e-selected-range-settings>
</ej-range-navigator> 		Property: value

<ejs-rangenavigator id="range" value="">
</ejs-rangenavigator>
Value type of range navigator Property: value-type

<ej-range-navigator id="range" value-type="DateTime">
</ej-range-navigator> 		Property: valueType

<ejs-rangenavigator id="range" valueType="DateTime">
</ejs-rangenavigator>
Width of range navigator Property: Width

<ej-range-navigator id="range">
<e-size-settings width="10">
</e-size-settings>
</ej-range-navigator> 		Property: Width

<ejs-rangenavigator id="range" width="100">
</ejs-rangenavigator>
Height of range navigator Property: height

<ej-range-navigator id="range">
<e-size-settings height="10">
</e-size-settings>
</ej-range-navigator> 		Property: height

<ejs-rangenavigator id="range" height="100">
</ejs-rangenavigator>
Series settings for range navigator Property: e-series-settings

<ej-range-navigator id="range">
<e-series-settings>
</e-series-settings>
</ej-range-navigator> 		Property: Not Applicable
Range settings for range navigator Property: e-range-settings

<ej-range-navigator id="range">
<e-range-settings start="10" end="20">
</e-range-settings>
</ej-range-navigator> 		Property: Not Applicable
Scroll range settings for range navigator Property: e-scroll-range-settings

<ej-range-navigator id="range">
<e-scroll-range-settings start="10" end="20">
</e-scroll-range-settings>
</ej-range-navigator> 		Property: Not Applicable

Series

Behavior API in Essential JS 1 API in Essential JS 2
animation Property: enable-animation

<ej-range-navigator id="range">
<e-chart-series>
<e-series enable-animation="false">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: e-rangenavigator-series-animation

<ejs-rangenavigator id="range">
<e-rangenavigator-series-animation duration="10" enable="true">
</e-rangenavigator-series-animation>
</ejs-rangenavigator>
Border for range navigator series Property: Not Applicable Property: e-rangenavigator-series-border

<ejs-rangenavigator id="range">
<e-rangenavigator-series-border color="red">
</e-rangenavigator-series-border>
</ejs-rangenavigator>
dataSource for range navigator Property: dataSource

<ej-range-navigator id="range">
<e-chart-series>
<e-series dataSource="">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: dataSource

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries datasource="">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
query for data source of range navigator Property: Not Applicable

<ej-range-navigator id="range">
<e-chart-series>
<e-series dataSource="">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: query

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries query="">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
series type for range navigator Property: type

<ej-range-navigator id="range">
<e-chart-series>
<e-series type="">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: type

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries type="">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
series xName for range navigator Property: x-name

<ej-range-navigator id="range">
<e-chart-series>
<e-series x-name="">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: xName

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
series yName for range navigator Property: y-name

<ej-range-navigator id="range">
<e-chart-series>
<e-series y-name="">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: yName

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries yName="">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
series fill color for range navigator Property: fill

<ej-range-navigator id="range">
<e-chart-series>
<e-series fill="red">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: fill

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries fill="red">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
series width color for range navigator Property: width

<ej-range-navigator id="range">
<e-chart-series>
<e-series width="10">
</e-series>
</e-chart-series>
</ej-range-navigator> 		Property: width

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries width="10">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>
series dashArray for range navigator Property: Not Applicable Property: dashArray

<ejs-rangenavigator id="range">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries dashArray="4,5">
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>

StyleSettings

Behavior API in Essential JS 1 API in Essential JS 2
Style settings of range navigator Property: e-rangenavigator-navigatorstylesettings

<ej-range-navigator id="range">
<e-navigator-style-settings opacity="0.7">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: e-rangenavigator-navigatorstylesettings

<ejs-rangenavigator id="range">
<e-rangenavigator-navigatorstylesettings>
</e-rangenavigator-navigatorstylesettings>
</ejs-rangenavigator>
Selected region color of range navigator Property: selected-region-color

<ej-range-navigator id="range">
<e-navigator-style-settings selected-region-color="red">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: selectedRegionColor

<ejs-rangenavigator id="range">
<e-rangenavigator-navigatorstylesettings selectedRegionColor="red">
</e-rangenavigator-navigatorstylesettings>
</ejs-rangenavigator>
UnSeleted region color of range navigator Property: unselected-region-color

<ej-range-navigator id="range">
<e-navigator-style-settings unselected-region-color="red">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: unselectedRegionColor

<ejs-rangenavigator id="range">
<e-rangenavigator-navigatorstylesettings unselectedRegionColor="red">
</e-rangenavigator-navigatorstylesettings>
</ejs-rangenavigator>
Thumb color of range navigator Property: thumb-color

<ej-range-navigator id="range">
<e-navigator-style-settings thumb-color="red">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: thumbColor

<ejs-rangenavigator id="range">
<e-rangenavigator-navigatorstylesettings thumbColor="red">
</e-rangenavigator-navigatorstylesettings>
</ejs-rangenavigator>
Selected region opacity of range navigator Property: selected-region-opacity

<ej-range-navigator id="range">
<e-navigator-style-settings selected-region-opacity="0.5">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
Unselected region opacity of range navigator Property: unselected-region-opacity

<ej-range-navigator id="range">
<e-navigator-style-settings unselected-region-opacity="0.5">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
Background for thumb Property: background

<ej-range-navigator id="range">
<e-navigator-style-settings background="red">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
border for thumb Property: e-border

<ej-range-navigator id="range">
<e-navigator-style-settings>
<e-border color="red">
</e-border>
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
Highlightsettings for range navigator Property: e-highlight-settings

<ej-range-navigator id="range">
<e-navigator-style-settings>
<e-highlight-settings>
</e-highlight-settings>
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
Selected style settings for range navigator Property: e-highlight-settings

<ej-range-navigator id="range">
<e-navigator-style-settings>
<e-selection-settings>
</e-selection-settings>
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
Left thumb template for range navigator Property: left-thumb-template

<ej-range-navigator id="range">
<e-navigator-style-settings left-thumb-template="">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable
Right thumb template for range navigator Property: right-thumb-template

<ej-range-navigator id="range">
<e-navigator-style-settings right-thumb-template="">
</e-navigator-style-settings>
</ej-range-navigator> 		Property: Not Applicable

Tooltip

Behavior API in Essential JS 1 API in Essential JS 2
tooltip Property: visible

<ej-range-navigator id="range">
<e-range-tooltip-settings visible="true">
</e-range-tooltip-settings>
</ej-range-navigator> 		Property: enable

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip enable="true">
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
background color of tooltip Property: background-color

<ej-range-navigator id="range">
<e-range-tooltip-settings background-color="red">
</e-range-tooltip-settings>
</ej-range-navigator> 		Property: fill

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip fill="red">
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
Font style of tooltip Property: font

<ej-range-navigator id="range">
<e-range-tooltip-settings font="">
</e-range-tooltip-settings>
</ej-range-navigator> 		Property: fill

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip>
<e-rangetooltipsettings-textstyle color="">
</e-rangetooltipsettings-textstyle>
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
Label format of tooltip Property: label-format

<ej-range-navigator id="range">
<e-range-tooltip-settings label-format="yMd">
</e-range-tooltip-settings>
</ej-range-navigator> 		Property: format

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip format="yMd">
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
Display mode of tooltip Property: tooltip-display-mode

<ej-range-navigator id="range">
<e-range-tooltip-settings tooltip-display-mode="Always">
</e-range-tooltip-settings>
</ej-range-navigator> 		Property: displayMode

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip displayMode="Always">
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
Template of tooltip Property: Not Applicable

<ej-range-navigator id="range">
<e-range-tooltip-settings tooltip-display-mode="Always">
</e-range-tooltip-settings>
</ej-range-navigator> 		Property: template

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip template="<div>Chart</div>">
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
Border of tooltip Property: Not Applicable Property: e-rangetooltipsettings-border

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip>
<e-rangetooltipsettings-border color="red">
</e-rangetooltipsettings-border>
</e-rangenavigator-tooltip>
</ejs-rangenavigator>
Opacity of tooltip Property: Not Applicable Property: e-rangetooltipsettings-border

<ejs-rangenavigator id="range">
<e-rangenavigator-tooltip opacity="0.5">
</e-rangenavigator-tooltip>
</ejs-rangenavigator>

Period Selector

Behavior API in Essential JS 1 API in Essential JS 2
Period Selector Property: Not Applicable Property: e-rangetooltipsettings-border

<ejs-rangenavigator id="range">
<e-rangenavigator-periodselectorsettings>
<e-periods>
<e-period interval="1" intervalType="Months">
</e-period>
</e-periods>
</e-rangenavigator-periodselectorsettings>
</ejs-rangenavigator>

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Export Property Not Applicable Property: chart.export()

<ejs-rangenavigator id="range" >
</ejs-rangenavigator >
<script>
var chartobj= document.getElementById('range').ej2_instances[0];
chartobj.export('JPEG', 'chart');
</script>
Print Property Not Applicable Property: chart.print()

<ejs-rangenavigator id="range">
</ejs-rangenavigator >
<script>
var chartobj= document.getElementById('range').ej2_instances[0];
chartobj.print();
</script>

Events

Behavior API in Essential JS 1 API in Essential JS 2
Fires before loading the RangeNavigator Property: load

<ej-rangenavigator id="range" load="load">
</ej-rangenavigator>
<script>
function load(args) {
}
</script> 		Property: load

<ejs-rangenavigator id="range" load="load">
</ejs-rangenavigator >
<script>
function load(args) {
}
</script>
Fires before loading the RangeNavigator Property: create

<ej-rangenavigator id="range" create="create">
</ej-rangenavigator>
<script>
function create(args) {
}
</script> 		Property: loaded

<ejs-rangenavigator id="range" loaded="loaded">
</ejs-rangenavigator >
<script>
function loaded(args) {
}
</script>
Fires on before range navigator resize Property: before-resize

<ej-rangenavigator id="range" before-resize="beforeResize">
</ej-rangenavigator>
<script>
function beforeResize(args) {
}
</script> 		Property: resized

<ejs-rangenavigator id="range" resized="beforeResize">
</ejs-rangenavigator >
<script>
function beforeResize(args) {
}
</script>
Fires when the value changes in range navigator Property: rangeChanged

<ej-rangenavigator id="range" rangeChanged="rangeChanged">
</ej-rangenavigator>
<script>
function rangeChanged(args) {
}
</script> 		Property: changed

<ejs-rangenavigator id="range" changed="changed">
</ejs-rangenavigator >
<script>
function changed(args) {
}
</script>
Fires before tooltip the RangeNavigator Property: Not Applicable Property: tooltipRender

<ejs-rangenavigator id="range" tooltipRender="tooltipRender">
</ejs-rangenavigator >
<script>
function tooltipRender(args) {
}
</script>
Fires before period render in the RangeNavigator Property: Not Applicable Property: selectorRender

<ejs-rangenavigator id="range" selectorRender="selectorRender">
</ejs-rangenavigator >
<script>
function selectorRender(args) {
}
</script>
Fires when scrollStart the RangeNavigator Property: scroll-start

<ej-rangenavigator id="range" scroll-start="scrollStart">
</ej-rangenavigator>
<script>
function scrollStart(args) {
}
</script> 		Property: Not Applicable
Fires when scrollEnd the RangeNavigator Property: scroll-end

<ej-rangenavigator id="range" scroll-end="scrollEnd">
</ej-rangenavigator>
<script>
function scrollEnd(args) {
}
</script> 		Property: Not Applicable
Fires when scroll range changed in the RangeNavigator Property: scroll-changed

<ej-rangenavigator id="range" scroll-changed="scrollChanged">
</ej-rangenavigator>
<script>
function scrollChanged(args) {
}
</script> 		Property: Not Applicable
Fires when click in the RangeNavigator Property: click

<ej-rangenavigator id="range" click="click">
</ej-rangenavigator>
<script>
function click(args) {
}
</script> 		Property: Not Applicable
Fires when right click in the RangeNavigator Property: right-click

<ej-rangenavigator id="range" right-click="rightclick">
</ej-rangenavigator>
<script>
function rightclick(args) {
}
</script> 		Property: Not Applicable
Fires when double click in the RangeNavigator Property: double-click

<ej-rangenavigator id="range" double-click="doubleclick">
</ej-rangenavigator>
<script>
function doubleclick(args) {
}
</script> 		Property: Not Applicable