React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React Accumulation Chart component

23 Feb 2021 / 15 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: annotations.content

annotations: [{ content: “watermark” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.content

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective content='<div>Highest Medal Count</div>'>
</AccumulationAnnotationDirective>
</AccumulationChartComponent>
background Property: background

<EJ.Chart
background='#DDCCEE'>
</EJ.Chart>		 Property: annotations.content

<AccumulationChartComponent id='charts' background='DDCCEE'>
</AccumulationChartComponent>
border Property: border

<EJ.Chart
border: { }>
</EJ.Chart>		 Property: border

<AccumulationChartComponent id='charts' border: { color: 'red', width: 2}>
</AccumulationChartComponent>
dataSource Not applicable Property: dataSource

<AccumulationChartComponent id='charts' dataSource: [ ];>
</AccumulationChartComponent>
Animation after legend click Not applicable Property: enableAnimation

<AccumulationChartComponent id='charts' enableAnimation= true;>
</AccumulationChartComponent>
Persisting component’s state between page reloads Not applicable Property: enablePersistance

<AccumulationChartComponent id='charts' enablePersistance={true};>
</AccumulationChartComponent>
Enabling smart labels Property: series.enableSmartLabels

var series= [{ enableSmartLabels: true }],
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: series.enableSmartLabels

<AccumulationChartComponent id='charts';>
<AccumulationSeriesDirective
enableSmartLabels={true}>
</AccumulationSeriesDirective><br/>`
Height of Chart Property: size.height

<EJ.Chart
size={ height: '400' }>
</EJ.Chart>		 Property: height

<AccumulationChartComponent id='charts' height='400';>
</AccumulationChartComponent>
Multi selection Property: selectionSettings.type

var selectionSettings= [{ type: ‘multiple’}],
<EJ.Chart
selectionSettings={selectionSettings}>
</EJ.Chart>		 Property: isMultiSelect

<AccumulationChartComponent id='charts' isMultiSelect: true;>
</AccumulationChartComponent>
legend Settings Property: legend

<EJ.Chart
legend: { }>
</EJ.Chart>		 Property: isMultiSelect

public legendSettings: LegendSettingsModel = { visible: true };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Margin for the chart Property: margin

<EJ.Chart
margin: { top: 20, bottom: 23, right: 15, left: 10 }>
</EJ.Chart>		 Property: isMultiSelect

public margin: { top: 20, bottom: 23, right: 15, left: 10 };
<AccumulationChartComponent id='charts' margin={this.margin};>
</AccumulationChartComponent>
SelectedDataIndexes Property: selectedDataPointIndexes

<EJ.Chart
selectedDataPointIndexes : [{}]>
</EJ.Chart>		 Property: selectedDataIndexes

public selectedDataIndexes : [ { series: 0, point: 1}];
<AccumulationChartComponent id='charts' selectedDataIndexes={this.selectedDataIndexes};>
</AccumulationChartComponent>
Selection Mode Property: selectionSettings.mode

<EJ.Chart
selectionSettings: { mode: 'Point'}>
</EJ.Chart>		 Property: selectedDataIndexes

<AccumulationChartComponent id='charts' selectionMode : 'Point';>
</AccumulationChartComponent>
Series Property: series

<EJ.Chart
series: []>
</EJ.Chart>		 Property: series

<AccumulationChartComponent id='charts';>
<AccumulationSeriesDirective>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Title text Property: title.text

<EJ.Chart
title: { text: 'Pie Chart' }>
</EJ.Chart>		 Property: title

<AccumulationChartComponent id='charts' title: 'Pie Chart';>
</AccumulationChartComponent>
Title Styles Property: title

<EJ.Chart
title: { text: 'Pie Chart' }>
</EJ.Chart>		 Property: titleStyle

<AccumulationChartComponent id='charts' titleStyle: { fontFamily: 'SegoeUI'};>
</AccumulationChartComponent>
Title Styles Property: title

<EJ.Chart
title: { text: 'Pie Chart' }>
</EJ.Chart>		 Property: titleStyle

<AccumulationChartComponent id='charts' titleStyle: { fontFamily: 'SegoeUI'};>
</AccumulationChartComponent>
Sub Title text Property: subTitle.text

var subTitle={ text: ‘Pie Chart’ }
<EJ.Chart
subTitle={subTitle}>
</EJ.Chart>		 Property: subTitle

public subTitle=‘Pie Chart’;
<AccumulationChartComponent id='charts' subTitle={this.subTitle};>
</AccumulationChartComponent>
Sub title Styles Property: subTitleStyle

var subTitleStyle={ fontFamily: ‘SegoeUI’ }
<EJ.Chart
subTitleStyle={subTitleStyle}>
</EJ.Chart>		 Property: subTitleStyle

public subTitleStyle={ fontFamily: ‘SegoeUI’ };
<AccumulationChartComponent id='charts' subTitleStyle={this.subTitleStyle};>
</AccumulationChartComponent>
tooltip Property: series.toolTip

var series=[ { tooltip: { }}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: tooltip

<AccumulationChartComponent id='charts' tooltip={enable: true };>
</AccumulationChartComponent>
Width of Chart Property: size.width

<EJ.Chart
size={ width: '400' }>
</EJ.Chart>		 Property: width

<AccumulationChartComponent id='charts' width='400';>
</AccumulationChartComponent>

Annotation

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

annotations: [{ content: “watermark” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.content

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective content='<div>Highest Medal Count</div>'>
</AccumulationAnnotationDirective>
</AccumulationChartComponent>
coordinate unit for annotation Property: annotations.coordinateUnit

annotations: [{ coordinateUnit : “pixels” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.coordinateUnits

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective coordinateUnits='Pixels'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
description Not Applicable Property: description

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective description='Pixel'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
horizontalAlignment for annotation Property: annotations.horizontalAlignment

annotations=[{ horizontalAlignment: “middle” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.horizontalAlignment

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective horizontalAlignment='Near'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
margin for annotation Property: annotations.margin

annotations: [ margin: { right: 40 } }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Not applicable
Opacity for annotation Property: annotations.opacity

annotations: [{ opacity: 0.4 }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Not applicable
Region for annotation with respect to chart or series Property: annotations.region

annotations: [{ region: “series” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.region

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective region='Series'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
verticalAlignment for annotation Property: annotations.verticalAlignment

annotations: [{ verticalAlignment: “middle” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.verticalAlignment

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective verticalAlignment='Middle'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
Visibility of annotations Property: annotations.visible

annotations: [{ visible: true }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Not applicable
X offset for annotation Property: annotations.x

annotations: [{ x: 170 }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.x

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective x={170}>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
X axis name in which annotation to be rendered Property: annotations.xAxisName

annotations: [{ xAxisName :“xAxis” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.xAxisName

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective xAxisName='xAxis'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
Y offset for annotation Property: annotations.y

annotations: [{ y: 170 }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.y

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective y={170}>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>
Y axis name in which annotation to be rendered Property: annotations.yAxisName

annotations: [{ yAxisName :“yAxis” }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Property: annotations.yAxisName

<AccumulationChartComponent id='charts'>
<AccumulationAnnotationDirective yAxisName='yAxis'>
</AccumulationAnnotationsDirective>
</AccumulationChartComponent>

Series

Behavior API in Essential JS 1 API in Essential JS 2
series Property: series

var series =[{ bearFillColor: ‘red’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: series

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective bearFillColor='red'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Enable animation for series Property: enableAnimation

var series =[{enableAnimation : true}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: animation.enable

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective animation={ enable={false}}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Animation duration for series Property: animationDuration

var series =[{animationDuration: 1000}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: animation.duration

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective animation={ duration={1000} }>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Animation delay for series Not Applicable Property: animation.delay

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective animation={ delay={100} }>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Border Property: border

var series =[{ border: {color: ‘red’, width: 2}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: border

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective border={ color: 'red', width: 2}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
DataLabel for series Property: dataLabel

var series =[{ dataLabel: {}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: dataLabel

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective dataLabel: {}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
DataSource for series Property: dataSource

var series =[{ dataSource: [{}] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: dataSource

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective dataSource: [{}]>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
enableTooltip for series Property: tooltip.visible

var series =[{ tooltip: { visible: true } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: maxRadius

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective enableTooltip: true>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
start angle Property: startAngle

var series =[{ startAngle: 80}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: startAngle

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective startAngle: 90 >
</AccumulationSeriesDirective>
</AccumulationChartComponent>
end angle Property: endAngle

var series =[{ endAngle: 80}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: endAngle

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective endAngle: 90>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
explode Property: explode

var series =[{ explode: true}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: explode

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective explode: true>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
explodeAll Property: explodeAll

var series =[{ explodeAll: true}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: explodeAll

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective explodeAll=true>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
explodeIndex Property: explodeIndex

var series =[{ explodeIndex: 0}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: explodeIndex

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective explodeIndex={1}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
explodeOffset Property: explodeOffset

var series =[{ explodeOffset: ‘30%‘}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: explodeOffset

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective explodeOffset='30%'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
gapRatio Property: gapRatio

var series =[{ gapRatio: 0.6}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: gapRatio

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective gapRatio={0.6}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
gapWidth Property: gapWidth

var series =[{ gapWidth: 0.6}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
inner radius of the accumulation chart Property: innerRadius

var series =[{ innerRadius : ‘30%’ }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: innerRadius

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective innerRadius='30%'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Legend shape of the series Not applicable Property: legendShape

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective legendShape ='Rectangle'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
name of the series Property: name

var series =[{ name : ‘30%‘}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: name

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective name= '30%'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
neck height for funnel series Property: neckHeight

var series =[{ neckHeight=‘30%‘}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: neckHeight

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective neckHeight='30%'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
neck width for funnel series Property: neckWidth

var series =[{neckWidth=‘30%’ }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: neckWidth

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective neckWidth='30%'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
opacity for series Property: opacity

var series =[{ opacity : 0.4 }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: opacity

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective opacity =0.5>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
palettes for series Property: palette

var series =[{palette : [] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: palettes

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective palettes=[]>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
point color mapping name for series Property: pointColorMappingName

var series =[{pointColorMappingName : ‘color’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: pointColorMapping

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective pointColorMappingName= 'color'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Mode of pyramid series Property: pyramidMode

var series =[{pyramidMode : ‘Surface’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: pyramidMode

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective pyramidMode : 'Linear'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
query for datasource for series Property: query

var series =[{query: ”}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: query

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective query= ''>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Radius of Pie series Property: pieCoefficient

var series =[{pieCoefficient : 0.5}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: radius

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective radius='50%'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Selection Style of Accumulation chart Not applicable Property: selectionStyle

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective selectionStyle=''>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
tooltip Mapping name Not applicable Property: tooltipMappingName

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective tooltipMappingName=''>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Type of series Property: type

var series =[{type : ‘Pie’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: type

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective type='Pie'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Name of the property in the datasource that contains x value for the series Property: xName

var series =[{xName : ‘x’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: xName

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective xName='x'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Name of the property in the datasource that contains x value for the series. Property: xName

var series =[{xName : ‘x’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: xName

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective xName='x'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection. Property: yAxisName

var series =[{yAxisName : ‘secondaryYAxis’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: yAxisName

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective yAxisName='secondaryYAxis'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Name of the property in the datasource that contains y value for the series. Property: yName

var series =[{yName : ‘y’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: yName

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective yName='y'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Width of funnel series. Property: funnelWidth

var series =[{funnelWidth : ‘100’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: width

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective width='100'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Grouping Not Applicable Property: groupTo

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective groupTo='100'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
GroupMode Not Applicable Property: groupMode

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective groupMode='Point'>
</AccumulationSeriesDirective>
</AccumulationChartComponent>

DataLabel

Behavior API in Essential JS 1 API in Essential JS 2
DataLabelSettings of marker Property: marker.dataLabel

var series =[{marker:{ dataLabel: { }} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: marker.dataLabel

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: { }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
border of dataLabel Property: marker.dataLabel.border

var series =[{marker:{ dataLabel: { border: {} } } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: dataLabel.border

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: {border: {} }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
connector style for dataLabel connector line Property: marker.dataLabel.connectorLine

var series =[{marker:{ dataLabel: { connectorLine: {} } } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: connectorStyle

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: {connectorStyle: {} }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Fill for dataLabel Property: marker.dataLabel.fill

var series =[{marker:{ dataLabel: { fill: ‘red’ } } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: fill

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: {fill: 'pink' }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
font for dataLabel Property: marker.dataLabel.font

var series =[{marker:{ dataLabel: { font: {} } } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: font

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: {font: { } }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
position for dataLabel Property: marker.dataLabel.position

var series =[{marker:{ dataLabel: { position: ‘Inside’} } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: position

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: {position: 'Outside' }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Rounded corner radius X Not Applicable Property: dataLabel.rx

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: { rx: 10 }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
Rounded corner radius Y Not Applicable Property: dataLabel.ry

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: { ry: 10 }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>
HTML template in dataLabel Property: dataLabel.template

var series =[{marker:{ dataLabel: { template: ’
Chart
’} } }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: dataLabel.template

<AccumulationChartComponent id='charts'>
<AccumulationSeriesDirective marker={ dataLabel: {template: '<div>Chart</div>' }}>
</AccumulationSeriesDirective>
</AccumulationChartComponent>

Legend

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

<EJ.Chart
legend: { visible: true }>
</EJ.Chart>		 Property: visible

public legendSettings: LegendSettingsModel = { visible: true };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Legend height Property: size.height

<EJ.Chart
legend: { size : { height: 50 } }>
</EJ.Chart>		 Property: height

public legendSettings: LegendSettingsModel = { height: ‘30’ };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Legend width Property: size.width

<EJ.Chart
legend: { size : { width: 50 } }>
</EJ.Chart>		 Property: width

public legendSettings: LegendSettingsModel = { width: ‘30’ };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Legend location Property: size.location

<EJ.Chart
legend: { location: { x: 3, y: 45} }>
</EJ.Chart>		 Property: location

public legendSettings: LegendSettingsModel = { location: { x: 3, y: 45} };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Legend position Property: size.position

<EJ.Chart
legend: { position: 'top' }>
</EJ.Chart>		 Property: position

public legendSettings: LegendSettingsModel = { position: ‘top’ };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Legend padding Not applicable Property: padding

public legendSettings: LegendSettingsModel = { padding: 8 };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Legend alignment Property: alignment

<EJ.Chart
legend: { alignment: 'center' }>
</EJ.Chart>		 Property: alignment

public legendSettings: LegendSettingsModel = { alignment: ‘center’ };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
text style for legend Property: font

<EJ.Chart
legend: { font: { fontFamily: ''} }>
</EJ.Chart>		 Property: textStyle

public legendSettings: LegendSettingsModel = { textStyle: { size: ‘12’} };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
shape height of legend Property: itemStyle.height

<EJ.Chart
legend: { itemStyle: { height: 20 } }>
</EJ.Chart>		 Property: shapeHeight

public legendSettings: LegendSettingsModel = { shapeHeight: 20 };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
shape width of legend Property: itemStyle.width

<EJ.Chart
legend: { itemStyle: { width: 20 } }>
</EJ.Chart>		 Property: shapeWidth

public legendSettings: LegendSettingsModel = { shapeWidth: 20 };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
shape border of legend Property: itemStyle.border

<EJ.Chart
legend: { itemStyle: { border: { width: 2} } }>
</EJ.Chart>		 Not Applicable
shape padding of legend Property: itemPadding

<EJ.Chart
legend: { itemPadding: 10} }>
</EJ.Chart>		 Property: shapePadding

public legendSettings: LegendSettingsModel = { shapePadding: 20 };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Background of legend Property: background

<EJ.Chart
legend: { background: 'transparent'} }>
</EJ.Chart>		 Property: backgorund

public legendSettings: LegendSettingsModel = { background: ‘transparent’ };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Opacity of legend Property: opacity

<EJ.Chart
legend: { opacity: 0.3}>
</EJ.Chart>		 Property: opacity

public legendSettings: LegendSettingsModel = { opacity: 0.4 };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Toggle visibility of series while legend click Property: toggleSeriesVisibility

<EJ.Chart
legend: { toggleSeriesVisibility: true}>
</EJ.Chart>		 Property: toggleVisibility

public legendSettings: LegendSettingsModel = { toggleVisibility: true };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Title for legend Property: title

<EJ.Chart
legend: { title: { text: 'LegendTitle'}}>
</EJ.Chart>		 Not applicable
Text Overflow for legend Property: textOverFlow

<EJ.Chart
legend={ textOverFlow: 'trim'}>
</EJ.Chart>		 Property: textStyle.textOverFlow

public legendSettings: LegendSettingsModel = { text: { textOverFlow: ‘trim’ } };
<AccumulationChartComponent id='charts' legendSettings={this.legendSettings};>
</AccumulationChartComponent>
Text width for legend while setting text overflow Property: textWidth

<EJ.Chart
legend={ textWidth: 20}>
</EJ.Chart>		 Not applicable
Scroll bar for legend Property: enableScrollBar

<EJ.Chart
legend={ enableScrollBar: true}>
</EJ.Chart>		 Not applicable
Row count for legend Property: rowCount

<EJ.Chart
legend={ rowCount: 2}>
</EJ.Chart>		 Not applicable
Column count for legend Property: columnCount

<EJ.Chart
legend={ columnCount: 2}>
</EJ.Chart>		 Not applicable
Color for legend items Property: fill

<EJ.Chart
legend={ fill: '#EEFFCC'}>
</EJ.Chart>		 Not applicable

Methods

Behavior API in Essential JS 1 API in Essential JS 2
animation for series Property: animate()

var chartobj= document.getElementById(‘chart’);
<EJ.Chart
id= chart>
</EJ.Chart>
chartobj.animate();		 Not applicable
Redraw for chart Property: redraw()

var chartobj= document.getElementById(‘chart’);
<EJ.Chart
id= chart>
</EJ.Chart>
chartobj.redraw();		 Property: refresh()

public loaded(args: ILoadedEventArgs): void {
function () => {
args.chart.refresh();
<AccumulationChartComponent id='charts'>
</AccumulationChartComponent>
Export Property: chart.export()

var chartObj = $(“#chartcontainer”).ejChart(“instance”);
chartObj.export(“chartcontainer”);
<EJ.Chart
id= chartcontainer>
</EJ.Chart>		 Property: chart.export()

public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.export();
<AccumulationChartComponent id='charts'>
</AccumulationChartComponent>
Print Property: chart.print()

var chartObj = $(“#chartcontainer”).ejChart(“instance”);
chartObj.print(“chartcontainer”);
<EJ.Chart
id= chartcontainer>
</EJ.Chart>		 Property: chart.print()

public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.print();
<AccumulationChartComponent id='charts'>
</AccumulationChartComponent>
AddSeries Not Applicable Property: chart.addSeries()

public add() {
this.chartInstance.addSeries([{ }]) };
<AccumulationChartComponent id='charts'>
</AccumulationChartComponent>
RemoveSeries Not Applicable Property: chart.removeSeries()

public add() {
this.chartInstance.removeSeries([{ }]) };
<AccumulationChartComponent id='charts'>
</AccumulationChartComponent>

Events

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

<EJ.Chart
id= chartcontainer annotationClick = {annotationClick}>
</EJ.Chart>
function annotationClick(){};		 Not applicable
Fires after animation Property: animationComplete()

<EJ.Chart
id= chartcontainer animationComplete = {animationComplete}>
</EJ.Chart>
function animationComplete(){ };		 Property: animationComplete()

<AccumulationChartComponent
id='charts animationComplete={this.animationComplete.bind(this)}'>
</AccumulationChartComponent>
public animationComplete(args:IAnimationCompleteEventArgs): void {};
Fires on axis label click Property: axisLabelClick

<EJ.Chart
id= chartcontainer axisLabelClick = {axisLabelClick}>
</EJ.Chart>
function axisLabelClick(){ };		 Not applicable
Fires before axis label render Property: axisLabelRendering

<EJ.Chart
id= chartcontainer axisLabelRendering = {axisLabelRendering}>
</EJ.Chart>
function axisLabelRendering(){ };		 Property: axisLabelRender()

<AccumulationChartComponent
id='charts axisLabelRender={this.axisLabelRender.bind(this)}'>
</AccumulationChartComponent>
public axisLabelRender(): void {};
Fires on axis label mouseMove Property: axisLabelMouseMove

<EJ.Chart
id= chartcontainer axisLabelMouseMove = {axisLabelMouseMove}>
</EJ.Chart>
function axisLabelRendering(){ };		 Not applicable
Fires on axis label initialize Property: axisLabelInitialize

<EJ.Chart
id= chartcontainer axisLabelInitialize = {axisLabelInitialize}>
</EJ.Chart>
function axisLabelInitialize(){ };		 Not applicable
Fires before axis range calculation Property: axesRangeCalculate

<EJ.Chart
id= chartcontainer axesRangeCalculate = {axesRangeCalculate}>
</EJ.Chart>
function axesRangeCalculate(){ };		 Property: axisRangeCalculated

<AccumulationChartComponent
id='charts axisRangeCalculated={this.axisRangeCalculated.bind(this)}>
</AccumulationChartComponent>
public axisRangeCalculated(): void {};
Fires on axis title rendering Property: axisTitleRendering

<EJ.Chart
id= chartcontainer axisTitleRendering = {axisTitleRendering}>
</EJ.Chart>
function axisTitleRendering(){ };		 Not applicable
Fires on after chart resize Property: afterResize

<EJ.Chart
id= chartcontainer afterResize = {afterResize}>
</EJ.Chart>
function afterResize(){ };		 Not applicable
Fires on before chart resize Property: beforeResize

<EJ.Chart
id= chartcontainer beforeResize = {beforeResize}>
</EJ.Chart>
function beforeResize(){ };		 Property: resized

<AccumulationChartComponent
id='charts resized={this.resized.bind(this)}>
</AccumulationChartComponent>
public resized(): void {};
Fires on chart click Property: chartClick

<EJ.Chart
id= chartcontainer chartClick= {chartClick}>
</EJ.Chart>
function chartClick(){ };		 Property: chartMouseClick

<AccumulationChartComponent
id='charts chartMouseClick={this.chartMouseClick.bind(this)}>
</AccumulationChartComponent>
public chartMouseClick(): void {};
Fires on chart mouse move Property: chartMouseMove

<EJ.Chart
id= chartcontainer chartMouseMove= {chartMouseMove}>
</EJ.Chart>
function chartMouseMove(){ };		 Property: chartMouseMove

<AccumulationChartComponent
id='charts chartMouseMove={this.chartMouseMove.bind(this)}>
</AccumulationChartComponent>
public chartMouseMove(): void {};
Fires on chart mouse leave Property: chartMouseLeave

<EJ.Chart
id= chartcontainer chartMouseLeave= {chartMouseLeave}>
</EJ.Chart>
function chartMouseLeave(){ };		 Property: chartMouseLeave

<AccumulationChartComponent
id='charts chartMouseLeave={this.chartMouseLeave.bind(this)}>
</AccumulationChartComponent>
public chartMouseLeave(): void {};
Fires on before chart double click Property: chartDoubleClick

<EJ.Chart
id= chartcontainer chartDoubleClick= {chartDoubleClick}>
</EJ.Chart>
function chartDoubleClick(){ };		 Not applicable
Fires on chart mouse up Not Applicable Property: chartmouseUp

<AccumulationChartComponent
id='charts chartmouseUp={this.chartmouseUp.bind(this)}>
</AccumulationChartComponent>
public chartmouseUp(): void {};
Fires on chart mouse down Not Applicable Property: chartmouseDown

<AccumulationChartComponent
id='charts chartmouseDown={this.chartmouseDown.bind(this)}>
</AccumulationChartComponent>
public chartmouseDown(): void {};
Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area Property: chartAreaBoundsCalculate

<EJ.Chart
id= chartcontainer chartAreaBoundsCalculate= {chartAreaBoundsCalculate}>
</EJ.Chart>
function chartAreaBoundsCalculate(){ };		 Not applicable
Fires when the dragging is started Property: dragStart

<EJ.Chart
id= chartcontainer dragStart= {dragStart}>
</EJ.Chart>
function dragStart(){ };		 Not applicable
Fires while dragging Property: dragging

<EJ.Chart
id= chartcontainer dragging= {dragging}>
</EJ.Chart>
function dragging(){ };		 Not applicable
Fires when the dragging is completed Property: dragEnd

<EJ.Chart
id= chartcontainer dragEnd= {dragEnd}>
</EJ.Chart>
function dragEnd(){ };		 Property: dragComplete

<AccumulationChartComponent
id='charts dragComplete={this.dragComplete.bind(this)}>
</AccumulationChartComponent>
public dragComplete(): void {};
Fires when chart is destroyed completely Property: destroy

<EJ.Chart
id= chartcontainer destroy= {destroy}>
</EJ.Chart>
function destroy(){ };		 Not applicable
Fires after chart is created. Property: create

<EJ.Chart
id= chartcontainer create= {create}>
</EJ.Chart>
function create(){ };		 Property: loaded

<AccumulationChartComponent
id='charts loaded={this.loaded.bind(this)}>
</AccumulationChartComponent>
public loaded(): void {};
Fires before rendering the data labels. Property: displayTextRendering

<EJ.Chart
id= chartcontainer displayTextRendering= {displayTextRendering}>
</EJ.Chart>
function displayTextRendering(){ };		 Property: textRender

<AccumulationChartComponent
id='charts textRender={this.textRender.bind(this)}>
</AccumulationChartComponent>
public textRender(): void {};
Fires, when error bar is rendering Property: errorBarRendering

<EJ.Chart
id= chartcontainer errorBarRendering= {errorBarRendering}>
</EJ.Chart>
function errorBarRendering(){ };		 Not applicable
Fires during the calculation of legend bounds Property: legendBoundsCalculate

<EJ.Chart
id= chartcontainer legendBoundsCalculate= {legendBoundsCalculate}>
</EJ.Chart>
function legendBoundsCalculate(){ };		 Not applicable
Fires on clicking the legend item. Property: legendItemClick

<EJ.Chart
id= chartcontainer legendItemClick= {legendItemClick}>
</EJ.Chart>
function legendItemClick(){ };		 Not applicable
Fires when moving mouse over legend item Property: legendItemMouseMove

<EJ.Chart
id= chartcontainer legendItemMouseMove= {legendItemMouseMove}>
</EJ.Chart>
function legendItemMouseMove(){ };		 Not applicable
Fires before rendering the legend item. Property: legendItemRendering

<EJ.Chart
id= chartcontainer legendItemRendering= {legendItemRendering}>
</EJ.Chart>
function legendItemRendering(){ };		 Property: legendRender

<AccumulationChartComponent
id='charts legendRender={this.legendRender.bind(this)}>
</AccumulationChartComponent>
public legendRender(): void {};
Fires before loading the chart. Property: load

<EJ.Chart
id= chartcontainer load= {load}>
</EJ.Chart>
function load(){ };		 Property: load

<AccumulationChartComponent
id='charts load={this.load.bind(this)}>
</AccumulationChartComponent>
public load(): void {};
Fires, when multi level labels are rendering. Property: multiLevelLabelRendering

<EJ.Chart
id= chartcontainer multiLevelLabelRendering= {multiLevelLabelRendering}>
</EJ.Chart>
function multiLevelLabelRendering(){ };		 Property: axisMultiLabelRender

<AccumulationChartComponent
id='charts' axisMultiLabelRender={this.axisMultiLabelRender.bind(this)}>
</AccumulationChartComponent>
public axisMultiLabelRender(): void {};
Fires on clicking a point in chart. Property: pointRegionClick

<EJ.Chart
id= 'chartcontainer' pointRegionClick= {pointRegionClick}>
</EJ.Chart>
function pointRegionClick(){ };		 Property: pointClick

<AccumulationChartComponent
id='charts' pointClick={this.pointClick.bind(this)}>
</AccumulationChartComponent>
public pointClick(): void {};
Fires when mouse is moved over a point. Property: pointRegionMouseMove

<EJ.Chart
id= 'chartcontainer' pointRegionMouseMove= {pointRegionMouseMove}>
</EJ.Chart>
function pointRegionMouseMove(){ };		 Property: pointMove

<AccumulationChartComponent
id='charts pointMove={this.pointMove.bind(this)}>
</AccumulationChartComponent>
public pointMove(): void {};
Fires before rendering chart. Property: preRender

<EJ.Chart
id= 'chartcontainer' preRender= {preRender}>
</EJ.Chart>
function preRender(){ };		 Not applicable
Fires when point render. Not Applicable Property: pointRender

<AccumulationChartComponent
id='charts' pointRender={this.pointRender.bind(this)}>
</AccumulationChartComponent>
public pointRender(): void {};
Fires after selected the data in chart Property: rangeSelected

<EJ.Chart
id= 'chartcontainer' rangeSelected= {rangeSelected}>
</EJ.Chart>
function rangeSelected(){ };		 Not applicable
Fires after selecting a series. Property: seriesRegionClick

<EJ.Chart
id= 'chartcontainer' seriesRegionClick= {seriesRegionClick}>
</EJ.Chart>
function seriesRegionClick(){ };		 Not applicable
Fires before rendering a series. Property: seriesRendering

<EJ.Chart
id= 'chartcontainer' seriesRendering= {seriesRendering}>
</EJ.Chart>
function seriesRendering(){ };		 Property: seriesRender

<AccumulationChartComponent
id='charts' seriesRender={this.seriesRender.bind(this)}>
</AccumulationChartComponent>
public seriesRender(): void {};
Fires before rendering the marker symbols. Property: symbolRendering

<EJ.Chart
id= 'chartcontainer' symbolRendering= {symbolRendering}>
</EJ.Chart>
function symbolRendering(){ };		 Not applicable
Fires before rendering the trendline Property: trendlineRendering

<EJ.Chart
id= 'chartcontainer' trendlineRendering= {trendlineRendering}>
</EJ.Chart>
function trendlineRendering(){ };		 Not applicable
Fires before rendering the Chart title. Property: titleRendering

<EJ.Chart
id= 'chartcontainer' titleRendering= {titleRendering}>
</EJ.Chart>
function titleRendering(){ };		 Not applicable
Fires before rendering the Chart sub title. Property: subTitleRendering

<EJ.Chart
id= 'chartcontainer' subTitleRendering= {subTitleRendering}>
</EJ.Chart>
function subTitleRendering(){ };		 Not applicable
Fires before rendering the tooltip. Property: toolTipInitialize

<EJ.Chart
id= 'chartcontainer' toolTipInitialize= {toolTipInitialize}>
</EJ.Chart>
function toolTipInitialize(){ };		 Property: tooltipRender

<AccumulationChartComponent
id='charts' tooltipRender={this.tooltipRender.bind(this)}>
</AccumulationChartComponent>
public tooltipRender(): void {};
Previous
Next