This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
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> |
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> |
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> |
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> |
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 |
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); </script> |
Not applicable |
Redraw for chart | Property chart.redraw <ej-chart id="chart"> </ej-chart> <script> var chartobj= $(“#chart”).ejchart(instance); </script> |
Property: chart.refresh() <ejs-accumulationchart id="chart"> </ejs-accumulationchart> <script> var chartobj= document.getElementById(‘chart’).ej2_instances[0]; </script> |
Export | Property chart.export <ej-chart id="chart" > </ej-chart> <script> var chartobj= $(“#chart”).ejchart(instance); </script> |
Property: chart.export() <ejs-accumulationchart id="chart" > </ejs-accumulationchart > <script> var chartobj= document.getElementById(‘chart’).ej2_instances[0]; </script> |
Property chart.print <ej-chart id="chart" > </ej-chart> <script> var chartobj= $(“#chart”).ejchart(instance); </script> |
Property: chart.print() <ejs-accumulationchart id="chart"> </ejs-accumulationchart > <script> var chartobj= document.getElementById(‘chart’).ej2_instances[0]; </script> |
|
AddSeries | Property Not Applicable | Property: chart.addSeries() <ejs-accumulationchart id="chart"> </ejs-accumulationchart > <script> var chartobj= document.getElementById(‘chart’).ej2_instances[0]; </script> |
RemoveSeries | Property Not Applicable | Property: chart.removeSeries() <ejs-accumulationchart id="chart"> </ejs-accumulationchart > <script> var chartobj= document.getElementById(‘chart’).ej2_instances[0]; </script> |
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> |