Migration from Essential JS 1

17 Feb 202224 minutes to read

This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.

Accumulation Chart

Behavior API in Essential JS 1 API in Essential JS 2
Annotations Property: e-annotations

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation>
</e-annotation>
</e-annotations>
</ej-chart> 		Property: e-accumulationchart-accumulationannotations

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
Background Property: background

<ej-chart id="chartContainer" background="#DDCCEE">
</ej-chart> 		Property: background

<ejs-accumulationchart id="container" background="#DDCCEE">
</ejs-accumulationchart>
Border Property: e-border

<ej-chart id="chartContainer">
<e-border color="red" width="2">
</e-border>
</ej-chart> 		Property: e-accumulationchart-accumulationannotations

<ejs-accumulationchart id="container">
<e-accumulationchart-border color="red" width="2">
</e-accumulationchart-border>
</ejs-accumulationchart>
DataSource Property: Not applicable Property: dataSource

<ejs-accumulationchart id="container" dataSource="">
</ejs-accumulationchart>
Animation after legend click Property: Not applicable Property: enableAnimation

<ejs-accumulationchart id="container" enableAnimation="true">
</ejs-accumulationchart>
Persisting component’s state between page reloads Property: Not applicable Property: enablePersistence

<ejs-accumulationchart id="container" enablePersistence="true">
</ejs-accumulationchart>
Enabling smart labels Property: enable-smart-labels

<ej-chart id="chartContainer">
<e-chart-series>
<e-series enable-smart-labels="true">
</e-series>
</e-chart-series>
</ej-chart> 		Property: enableSmartLabels

<ejs-accumulationchart id="container" enableSmartLabels="true">
</ejs-accumulationchart>
Height of Chart Property: height

<ej-chart id="chartContainer">
<e-size height="100">
</e-size>
</ej-chart> 		Property: height

<ejs-accumulationchart id="container" height="100">
</ejs-accumulationchart>
Multi selection Property: e-selection-settings

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
<e-selection-settings type="Multiple">
</e-selection-settings>
</e-series>
</e-chart-series>
</ej-chart> 		Property: isMultiSelect

<ejs-accumulationchart id="container" isMultiSelect="true">
</ejs-accumulationchart>
Legend Settings Property: e-legend

<ej-chart id="chartContainer">
<e-legend visible="true">
</e-legend>
</ej-chart> 		Property: e-accumulationchart-legendsettings

<ejs-accumulationchart id="container" >
<e-accumulationchart-legendsettings visible="true">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Margin for the chart Property: e-margin

<ej-chart id="chartContainer">
<e-margin top="10" bottom="10">
</e-margin>
</ej-chart> 		Property: e-accumulationchart-margin

<ejs-accumulationchart id="container" >
<e-accumulationchart-margin top="10" bottom="10">
</e-accumulationchart-margin>
</ejs-accumulationchart>
SelectedDataIndexes Property: e-selected-data-point-indexes

<ej-chart id="Container">
<e-selected-data-point-indexes series-index=0 point-index=1 >
</e-selected-data-point-indexes>
</ej-chart> 		Property: e-accumulationchart-selecteddataindexes

<ejs-accumulationchart id="container" >
<e-accumulationchart-selecteddataindexes >
<e-accumulationchart-selecteddataindex point="1" series="0">
</e-accumulationchart-selecteddataindex>
</e-accumulationchart-selecteddataindexes>
</ejs-accumulationchart>
Selection Mode Property: mode

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
<e-selection-settings mode="Point">
</e-selection-settings>
</e-series>
</e-chart-series>
</ej-chart> 		Property: selectionMode

<ejs-accumulationchart id="container" selectionMode="Point">
</ejs-accumulationchart>
Series Property: e-series

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulation-series

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Title text Property: e-title

<ej-chart id="chartContainer">
<e-title text="Pie Chart">
</e-title>
</ej-chart> 		Property: title

<ejs-accumulationchart id="container" title="title">
</ejs-accumulationchart>
Titlestyle Property: e-title

<ej-chart id="chartContainer">
<e-title text="Pie Chart">
</e-title>
</ej-chart> 		Property: e-accumulationchart-titlestyle

<ejs-accumulationchart id="container">
<e-accumulationchart-titlestyle color="red" size="10px">
</e-accumulationchart-titlestyle>
</ejs-accumulationchart>
Sub Title text Property: e-subtitle

<ej-chart id="chartContainer">
<e-title>
<e-subtitle text="Pie Chart">
</e-subtitle>
</e-title>
</ej-chart> 		Property: subTitle

<ejs-accumulationchart id="container" subTitle="pie">
</ejs-accumulationchart>
SubTitlestyle Property: e-subtitle

<ej-chart id="chartContainer">
<e-title>
<e-subtitle text="Pie Chart">
</e-subtitle>
</e-title>
</ej-chart> 		Property: e-accumulationchart-subtitlestyle

<ejs-accumulationchart id="container">
<e-accumulationchart-subtitlestyle color="red" size="10px">
</e-accumulationchart-subtitlestyle>
</ejs-accumulationchart>
Tooltip Property: e-chart-tooltip

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-chart-tooltip>
</e-chart-tooltip>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulationchart-tooltipsettings

<ejs-accumulationchart id="container">
<e-accumulationchart-tooltipsettings>
</e-accumulationchart-tooltipsettings>
</ejs-accumulationchart>
Width of Chart Property: width

<ej-chart id="chartContainer">
<e-size width="10">
</e-size>
</ej-chart> 		Property: width

<ejs-accumulationchart id="container" width="10">
</ejs-accumulationchart>

Annotation

Behavior API in Essential JS 1 API in Essential JS 2
Annotations Property: annotations

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation>
</e-annotation>
</e-annotations>
</ej-chart> 		Property: e-accumulationchart-accumulationannotations

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
Content Property: content

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation content="Chart">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: content

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation content="<div>Pie Chart</div>">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
CoordinateUnits Property: coordinate-unit

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation coordinate-unit="Pixel">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: coordinateUnits

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation coordinateUnits="Pixel">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
description Property: Not Applicable Property: description

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation description="Pixel">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
HorizontalAlignment for annotation Property: horizontal-alignment

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation horizontal-alignment="Left">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: horizontalAlignment

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation horizontalAlignment="Center">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
margin for annotation Property: e-margin

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation>
<e-margin right="5",left="5",top="5", bottom="5">
</e-margin>
</e-annotation>
</e-annotations>
</ej-chart> 		Property: Not applicable
margin for annotation Property: opacity

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation opacity="0.4">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: Not applicable
Region for annotation with respect to chart or series Property: region

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation region="chart">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: region

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation region="chart">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
verticalAlignment for annotation Property: vertical-alignment

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation vertical-alignment="Bottom">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: verticalAlignment

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation verticalAlignment="Bottom">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
Visibility of annotations Property: vertical-alignment

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation visible="true">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: Not applicable
X offset for annotation Property: x

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation x="100">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: x

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation x="100">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>
Y offset for annotation Property: y

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation y="100">
</e-annotation>
</e-annotations>
</ej-chart> 		Property: y

<ejs-accumulationchart id="container">
<e-accumulationchart-accumulationannotations>
<e-accumulationchart-accumulationannotation>
</e-accumulationchart-accumulationannotation y="100">
</e-accumulationchart-accumulationannotations>
</ejs-accumulationchart>

Series

Behavior API in Essential JS 1 API in Essential JS 2
Series Property: e-series

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulation-series

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
animation for series Property: enableAnimation

<ej-chart id="chartContainer">
<e-chart-series>
<e-series enableAnimation="true">
</e-series>
</e-chart-series>
</ej-chart> 		Property: enable

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
animation duration for series Property: animation-duration

<ej-chart id="chartContainer">
<e-chart-series>
<e-series animation-duration="1000">
</e-series>
</e-chart-series>
</ej-chart> 		Property: duration

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
animation delay for series Property: Not Applicable Property: delay

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Border for series Property: e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-border color="red" width="2">
</e-border>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulationseries-border

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-border color="red" width="2">
</e-accumulationseries-border>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
DataLabel for series Property: e-data-label

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulationseries-datalabel

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel fill="red">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
DataSource for series Property: datasource

<ej-chart id="chartContainer">
<e-chart-series>
<e-series datasource="">
</e-series>
</e-chart-series>
</ej-chart> 		Property: dataSource

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series dataSource="">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
enableTooltip for series Property: e-chart-tooltip

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-chart-tooltip visible="true">
</e-chart-tooltip>
</e-series>
</e-chart-series>
</ej-chart> 		Property: enableTooltip

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series enableTooltip="true">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
start angle Property: start-angle

<ej-chart id="chartContainer">
<e-chart-series>
<e-series start-angle="80">
</e-series>
</e-chart-series>
</ej-chart> 		Property: startAngle

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series startAngle="50">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
End angle Property: end-angle

<ej-chart id="chartContainer">
<e-chart-series>
<e-series end-angle="80">
</e-series>
</e-chart-series>
</ej-chart> 		Property: endAngle

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series endAngle="50">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
explode Property: explode

<ej-chart id="chartContainer">
<e-chart-series>
<e-series explode="true">
</e-series>
</e-chart-series>
</ej-chart> 		Property: explode

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series explode="true">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
explodeAll Property: explode-all

<ej-chart id="chartContainer">
<e-chart-series>
<e-series explode-all="true">
</e-series>
</e-chart-series>
</ej-chart> 		Property: explodeAll

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series explodeAll="true">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
explodeIndex Property: explode-index

<ej-chart id="chartContainer">
<e-chart-series>
<e-series explode-index="0">
</e-series>
</e-chart-series>
</ej-chart> 		Property: explodeIndex

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series explodeIndex="0">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
explodeOffset Property: explode-offset

<ej-chart id="chartContainer">
<e-chart-series>
<e-series explode-offset="30%">
</e-series>
</e-chart-series>
</ej-chart> 		Property: explodeOffset

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series explodeOffset="30%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
gapRatio Property: gap-ratio

<ej-chart id="chartContainer">
<e-chart-series>
<e-series gap-ratio="0.6">
</e-series>
</e-chart-series>
</ej-chart> 		Property: gapRatio

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series gapRatio="0.6">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
gapWidth Property: gap-width

<ej-chart id="chartContainer">
<e-chart-series>
<e-series gap-width="0.6">
</e-series>
</e-chart-series>
</ej-chart> 		Property: Not Applicable
inner radius of the accumulation chart Property: doughnut-coefficient

<ej-chart id="chartContainer">
<e-chart-series>
<e-series doughnut-coefficient="0.6">
</e-series>
</e-chart-series>
</ej-chart> 		Property: innerRadius

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series innerRadius="30%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Legend shape of the series Property: Not applicable Property: legendShape

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series legendShape="Rectangle">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
name of the series Property: name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series name="series">
</e-series>
</e-chart-series>
</ej-chart> 		Property: name

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series name="series">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
neck height for funnel series Property: funnel-height

<ej-chart id="chartContainer">
<e-chart-series>
<e-series funnel-height="30%">
</e-series>
</e-chart-series>
</ej-chart> 		Property: neckHeight

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series neckHeight="40%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
neck width for funnel series Property: funnel-width

<ej-chart id="chartContainer">
<e-chart-series>
<e-series funnel-width="30%">
</e-series>
</e-chart-series>
</ej-chart> 		Property: neckWidth

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series neckWidth="40%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
opacity for series Property: opacity

<ej-chart id="chartContainer">
<e-chart-series>
<e-series opacity="0.4">
</e-series>
</e-chart-series>
</ej-chart> 		Property: opacity

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series opacity="0.4">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
palettes for series Property: Not applicable Property: palettes

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series palettes="">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
point color mapping name for series Property: point-color-mapping-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series point-color-mapping-name="color">
</e-series>
</e-chart-series>
</ej-chart> 		Property: pointColorMapping

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series pointColorMapping="color">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Mode of pyramid series Property: pyramid-mode

<ej-chart id="chartContainer">
<e-chart-series>
<e-series pyramid-mode="Surface">
</e-series>
</e-chart-series>
</ej-chart> 		Property: pyramidMode

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series pyramidMode="Surface">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
query for datasource for series Property: query

<ej-chart id="chartContainer">
<e-chart-series>
<e-series query="">
</e-series>
</e-chart-series>
</ej-chart> 		Property: query

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series query="">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Radius of Pie series Property: pie-coefficient

<ej-chart id="chartContainer">
<e-chart-series>
<e-series pie-coefficient="0.5">
</e-series>
</e-chart-series>
</ej-chart> 		Property: radius

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series radius="40%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Selection Style of Accumulation chart Property: Not applicable Property: selectionStyle

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series selectionStyle="">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
tooltip Mapping name Property: Not applicable Property: tooltipMappingName

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series tooltipMappingName="">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Type of series Property: type

<ej-chart id="chartContainer">
<e-chart-series>
<e-series type="Pie">
</e-series>
</e-chart-series>
</ej-chart> 		Property: type

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series type="Pie">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Name of the property in the datasource that contains x value for the series Property: x-name

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

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series xName="x">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Name of the property in the datasource that contains y value for the series Property: y-name

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

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series yName="y">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Grouping Property: Not applicable Property: groupTo

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series groupTo="10">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
GroupMode Property: Not applicable Property: GroupMode

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series GroupMode="Point">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

DataLabel

Behavior API in Essential JS 1 API in Essential JS 2
DataLabel for series Property: e-data-label

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulationseries-datalabel

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel fill="red">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
border of dataLabel Property: e-data-label.e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-border color="red" width="2">
</e-border>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-accumulationseries-datalabel-border

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel>
<e-accumulationseries-datalabel color="red" width="2">
</e-accumulationseries-datalabel>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
connector style for dataLabel connector line Property: e-data-label.e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-connector-line color="red" width="2">
</e-connector-line>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-connectorstyle

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel>
<e-connectorstyle color="red" width="2">
</e-connectorstyle>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Fill for dataLabel Property: fill

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label fill="red">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: fill

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel fill="red">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
font for dataLabel Property: e-font

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-font>
</e-font>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: e-font

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel>
<e-font>
</e-font>
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
position Property: position

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label position="Inside">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: position

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel position="Inside">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Rounded corner radius X Property: Not Applicable Property: rx

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel rx="10">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Rounded corner radius y Property: Not Applicable Property: ry

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel ry="10">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
HTML template in dataLabel Property: template

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label template="<div>Chart</div>">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart> 		Property: template

<ejs-accumulationchart id="container">
<e-accumulation-series-collection>
<e-accumulation-series>
<e-accumulationseries-datalabel template="<div>Chart</div>">
</e-accumulationseries-datalabel>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

Legend

Behavior API in Essential JS 1 API in Essential JS 2
Default legend Property: visible

<ej-chart id="chartContainer">
<e-legend visible="true">
</e-legend>
</ej-chart> 		Property: visible

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings visible="true">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Legend height Property: e-size.height

<ej-chart id="chartContainer">
<e-legend>
<e-size height="100" >
</e-size>
</e-legend>
</ej-chart> 		Property: height

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings height="30">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Legend width Property: e-size.width

<ej-chart id="chartContainer">
<e-legend>
<e-size width="100" >
</e-size>
</e-legend>
</ej-chart> 		Property: width

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings width="30">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Legend location Property: e-location

<ej-chart id="chartContainer">
<e-legend>
<e-location x=3 y=45>
</e-location>
</e-legend>
</ej-chart> 		Property: e-legendsettings-location

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings >
<e-legendsettings-location x="10" y="10">
</e-legendsettings-location>
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Legend position Property: position

<ej-chart id="chartContainer">
<e-legend position="Top">
</e-legend>
</ej-chart> 		Property: position

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings position="Top">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Legend padding Property: Not applicable Property: padding

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings padding="8">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Legend alignment Property: alignment

<ej-chart id="chartContainer">
<e-legend alignment="Center">
</e-legend>
</ej-chart> 		Property: alignment

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings alignment="Center">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
text style for legend Property: e-font

<ej-chart id="chartContainer">
<e-legend>
<e-font font-family="Segoe UI" font-style="Normal" font-weight="Bold" font-size="15px">
</e-font>
</e-legend>
</ej-chart> 		Property: e-legendsettings-textstyle

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings>
<e-legendsettings-textstyle color="red">
</e-legendsettings-textstyle>
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
shape height of legend Property: height

<ej-chart id="chartContainer">
<e-legend>
<e-item-style height="10">
</e-item-style>
</e-legend>
</ej-chart> 		Property: shapeHeight

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings shapeHeight="10">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
shape width of legend Property: width

<ej-chart id="chartContainer">
<e-legend>
<e-item-style width="10">
</e-item-style>
</e-legend>
</ej-chart> 		Property: shapeWidth

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings shapeWidth="10">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
shape border of legend Property: e-border

<ej-chart id="chartContainer">
<e-legend>
<e-item-style>
<e-border color="red">
</e-border>
</e-item-style>
</e-legend>
</ej-chart> 		Property: Not Applicable
shape padding of legend Property: item-padding

<ej-chart id="chartContainer">
<e-legend item-padding="10">
</e-legend>
</ej-chart> 		Property: shapePadding

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings shapePadding="10">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Background of legend Property: background

<ej-chart id="chartContainer">
<e-legend background="transparent">
</e-legend>
</ej-chart> 		Property: background

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings background="transparent">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
opacity of legend Property: opacity

<ej-chart id="chartContainer">
<e-legend opacity="0.4">
</e-legend>
</ej-chart> 		Property: opacity

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings opacity="0.4">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Toggle visibility of series while legend click Property: toggle-series-visibility

<ej-chart id="chartContainer">
<e-legend toggle-series-visibility="true">
</e-legend>
</ej-chart> 		Property: toggleVisibility

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings toggleVisibility="true">
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Title for legend Property: e-title

<ej-chart id="chartContainer">
<e-legend>
<e-title text="Countries">
</e-title>
</e-legend>
</ej-chart> 		Property: Not applicable
Text Overflow for legend Property: text-overflow

<ej-chart id="chartContainer">
<e-legend text-overflow="Trim">
</e-legend>
</ej-chart> 		Property: textOverflow

<ejs-accumulationchart id="container">
<e-accumulationchart-legendsettings>
<e-legendsettings-textstyle textOverflow="Trim">
</e-legendsettings-textstyle>
</e-accumulationchart-legendsettings>
</ejs-accumulationchart>
Text width for legend while setting text overflow Property: text-width

<ej-chart id="chartContainer">
<e-legend text-width="34">
</e-legend>
</ej-chart> 		Property: Not applicable
Scroll bar for legend Property: enable-scrollbar

<ej-chart id="chartContainer">
<e-legend enable-scrollbar="true">
</e-legend>
</ej-chart> 		Property: Not applicable
Row count for legend Property: row-count

<ej-chart id="chartContainer">
<e-legend row-count="4">
</e-legend>
</ej-chart> 		Property: Not applicable
Column count for legend Property: column-count

<ej-chart id="chartContainer">
<e-legend column-count="4">
</e-legend>
</ej-chart> 		Property: Not applicable
Color for legend items Property: fill

<ej-chart id="chartContainer">
<e-legend fill="#EEFFCC">
</e-legend>
</ej-chart> 		Property: Not applicable

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Animation for series Property: chart.animate

<ej-chart id="chart">
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.animate(); </script> 		Not applicable
Redraw for chart Property chart.redraw

<ej-chart id="chart">
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.redraw();
</script> 		Property: chart.refresh()

<ejs-accumulationchart id="chart">
</ejs-accumulationchart>
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.refresh();
</script>
Export Property chart.export

<ej-chart id="chart" >
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.export();
</script> 		Property: chart.export()

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

<ej-chart id="chart" >
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.print();
</script> 		Property: chart.print()

<ejs-accumulationchart id="chart">
</ejs-accumulationchart >
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.print();
</script>
AddSeries Property Not Applicable Property: chart.addSeries()

<ejs-accumulationchart id="chart">
</ejs-accumulationchart >
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.addSeries();
</script>
RemoveSeries Property Not Applicable Property: chart.removeSeries()

<ejs-accumulationchart id="chart">
</ejs-accumulationchart >
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.removeSeries();
</script>

Events

Behavior API in Essential JS 1 API in Essential JS 2
Fires on annotation click Property: annotation-click

<ej-chart id="chart" annotation-click="annotaionclick">
</ej-chart>
<script>
function annotaionclick(args) {
}
</script> 		Not applicable
Fires after animation Property: animation-complete

<ej-chart id="chart" animation-complete="animationcomplete">
</ej-chart>
<script>
function animationcomplete(args) {
}
</script> 		Property: animationComplete

<ejs-accumulationchart id="chart" animationComplete="animationComplete">
</ejs-accumulationchart >
<script>
function animationComplete(args) {
}
</script>
Fires on after chart resize Property: after-resize

<ej-chart id="chart" after-resize="afterResize">
</ej-chart>
<script>
function afterResize(args) {
}
</script> 		Property: Not applicable
Fires on before chart resize Property: before-resize

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

<ejs-accumulationchart id="chart" resized="beforeResize">
</ejs-accumulationchart >
<script>
function beforeResize(args) {
}
</script>
Fires on chart click Property: chart-click

<ej-chart id="chart" chart-click="chartMouseClick">
</ej-chart>
<script>
function chartMouseClick(args) {
}
</script> 		Property: chartMouseClick

<ejs-accumulationchart id="chart" chartMouseClick="chartMouseClick">
</ejs-accumulationchart >
<script>
function chartMouseClick(args) {
}
</script>
Fires on chart mouse move Property: chart-mouse-move

<ej-chart id="chart" chart-mouse-move="chartMouseMove">
</ej-chart>
<script>
function chartMouseMove(args) {
}
</script> 		Property: chartMouseMove

<ejs-accumulationchart id="chart" chartMouseMove="chartMouseMove">
</ejs-accumulationchart >
<script>
function chartMouseMove(args) {
}
</script>
Fires on chart mouse leave Property: chart-mouse-leave

<ej-chart id="chart" chart-mouse-leave="chartMouseLeave">
</ej-chart>
<script>
function chartMouseLeave(args) {
}
</script> 		Property: chartMouseLeave

<ejs-accumulationchart id="chart" chartMouseLeave="chartMouseLeave">
</ejs-accumulationchart >
<script>
function chartMouseLeave(args) {
}
</script>
Fires on before chart double click Property: chart-double-click

<ej-chart id="chart" chart-double-click="chartDoubleClick">
</ej-chart>
<script>
function chartDoubleClick(args) {
}
</script> 		Property: Not applicable
Fires on chart mouse up Property: Not Applicable Property: chartmouseUp

<ejs-accumulationchart id="chart" chartmouseUp="chartmouseUp">
</ejs-accumulationchart >
<script>
function chartmouseUp(args) {
}
</script>
Fires on chart mouse down Property: Not Applicable Property: chartmouseDown

<ejs-accumulationchart id="chart" chartmouseDown="chartmouseDown">
</ejs-accumulationchart >
<script>
function chartmouseDown(args) {
}
</script>
Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area Property: chart-area-bounds-calculate

<ej-chart id="chart" chart-area-bounds-calculate="chartAreaBoundsCalculate">
</ej-chart>
<script>
function chartAreaBoundsCalculate(args) {
}
</script> 		Property: Not applicable
Fires when chart is destroyed completely Property: destroy

<ej-chart id="chart" destroy="destroy">
</ej-chart>
<script>
function destroy(args) {
}
</script> 		Property: Not applicable
Fires after chart is created Property: create

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

<ejs-accumulationchart id="chart" loaded="loaded">
</ejs-accumulationchart >
<script>
function loaded(args) {
}
</script>
Fires before rendering the data labels Property: display-text-rendering

<ej-chart id="chart" display-text-rendering="textRender">
</ej-chart>
<script>
function textRender(args) {
}
</script> 		Property: textRender

<ejs-accumulationchart id="chart" textRender="textRender">
</ejs-accumulationchart >
<script>
function textRender(args) {
}
</script>
Fires on clicking the legend item Property: legend-item-click

<ej-chart id="chart" legend-item-click="legendItemClick">
</ej-chart>
<script>
function legendItemClick(args) {
}
</script> 		Property: Not applicable
Fires when moving mouse over legend item Property: legend-item-mouse-move

<ej-chart id="chart" legend-item-mouse-move="legendItemMouseMove">
</ej-chart>
<script>
function legendItemMouseMove(args) {
}
</script> 		Property: Not applicable
Fires before rendering the legend item Property: legend-item-rendering

<ej-chart id="chart" legend-item-rendering="legendItemRendering">
</ej-chart>
<script>
function legendItemRendering(args) {
}
</script> 		Property: legendRender

<ejs-accumulationchart id="chart" legendRender="legendItemRendering">
</ejs-accumulationchart >
<script>
function legendItemRendering(args) {
}
</script>
Fires before loading the chart Property: load

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

<ejs-accumulationchart id="chart" load="load">
</ejs-accumulationchart >
<script>
function load(args) {
}
</script>
Fires on clicking a point in chart Property: point-region-click

<ej-chart id="chart" point-region-click="pointRegionClick">
</ej-chart>
<script>
function pointRegionClick(args) {
}
</script> 		Property: pointClick

<ejs-accumulationchart id="chart" pointClick="pointClick">
</ejs-accumulationchart >
<script>
function pointClick(args) {
}
</script>
Fires when mouse is moved over a point Property: point-region-click

<ej-chart id="chart" point-region-click="pointRegionMouseMove">
</ej-chart>
<script>
function pointRegionMouseMove(args) {
}
</script> 		Property: pointMove

<ejs-accumulationchart id="chart" pointMove="pointRegionMouseMove">
</ejs-accumulationchart >
<script>
function pointRegionMouseMove(args) {
}
</script>
Fires before rendering chart Property: pre-render

<ej-chart id="chart" pre-render="preRender">
</ej-chart>
<script>
function preRender(args) {
}
</script> 		Property: Not applicable
Fires when point render Property: Not Applicable Property: pointRender

<ejs-accumulationchart id="chart" pointRender="pointRender">
</ejs-accumulationchart >
<script>
function pointRender(args) {
}
</script>
Fires before rendering a series Property: series-rendering

<ej-chart id="chart" series-rendering="seriesRendering">
</ej-chart>
<script>
function seriesRendering(args) {
}
</script> 		Property: seriesRender

<ejs-accumulationchart id="chart" seriesRender="seriesRendering">
</ejs-accumulationchart >
<script>
function seriesRendering(args) {
}
</script>
Fires before rendering the Chart title Property: title-rendering

<ej-chart id="chart" title-rendering="titleRendering">
</ej-chart>
<script>
function titleRendering(args) {
}
</script> 		Property: Not applicable
Fires before rendering the Chart subtitle Property: subtitle-rendering

<ej-chart id="chart" subtitle-rendering="subtitleRendering">
</ej-chart>
<script>
function subtitleRendering(args) {
}
</script> 		Property: Not applicable
Fires before rendering the tooltip Property: tool-tip-initialize

<ej-chart id="chart" tool-tip-initialize="tooltipRender">
</ej-chart>
<script>
function tooltipRender(args) {
}
</script> 		Property: tooltipRender

<ejs-accumulationchart id="chart" tooltipRender="tooltipRender">
</ejs-accumulationchart >
<script>
function tooltipRender(args) {
}
</script>