Ej1 api migration in Angular Accumulation chart component

20 Sep 202224 minutes to read

This article describes the API migration process of {Component Name} component from Essential JS 1 to Essential JS 2.

Accumulation Chart

Behavior API in Essential JS 1 API in Essential JS 2
Annotation Property: annotation

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation>
</e-annotations>
</ej-chart> 		Property: e-annotation

<ejs-accumulationchart>
<e-annotations>
<e-annotation>
<e-annotation>
</e-annotations>
</ejs-accumulationchart>
Background Property: background

<ej-chart background='red'>
</ej-chart> 		Property: background

<ejs-accumulationchart background='red'>
</ejs-accumulationchart>
border of the chart Property: border

<ej-chart [border]='border'>
</ej-chart>

this.border = { width: 2, color: ‘red’}		 Property: border

<ejs-accumulationchart [border]='border'>
</ejs-accumulationchart>

this.border = { width: 2, color: ‘red’}
dataSource Property: Not applicable Property: dataSource

<ejs-accumulationchart [dataSource]='data'>
</ejs-accumulationchart>

this.data = ‘data’
Persisting component’s state between page reloads. Property: Not applicable Property: enablePersistance

<ejs-accumulationchart [enablePersistance]='enablepersistance'>
</ejs-accumulationchart>

this.enablepersistance = true
Animation after legend click Property: Not applicable Property: enableAnimation

<ejs-accumulationchart [enableAnimation]= 'enableAnimation'>
</ejs-accumulationchart>

this.enableAnimation = true
Enabling smart labels Property: enableSmartLabels

<ej-chart [enableSmartLabels ]='enableSmartLabels '>
</ej-chart>

this.enableSmartLabels = true		 Property: enableSmartLabels

<ejs-accumulationchart [enableSmartLabels]='enablesmartlabels'>
</ejs-accumulationchart>

this.enablesmartlabels = true
Height of chart Property: size.height

<ej-chart [size]='size'>
</ej-chart>

this.size = { height: ‘300’}		 Property: height

<ejs-accumulationchart [height]='height'>
</ejs-accumulationchart>

this.height = ‘300’
Width of chart Property: size.width

<ej-chart [size]='size'>
</ej-chart>

this.size = { width: ‘300’}		 Property: width

<ejs-accumulationchart [width]='width'>
</ejs-accumulationchart>

this.width = ‘300’
Multi selection of chart Not Applicable Property: isMultiSelect

<ejs-accumulationchart [isMultiSelect]='select'>
</ejs-accumulationchart>

this.select = true
legend Settings Property: legend.visible

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { visible: true }		 Property: legend.visible

<ejs-accumulationchart [legend]='legend'>
</ejs-accumulationchart>

this.legend = { visible: true }
Margin for the chart Property: margin

<ej-chart [margin]='margin'>
</ej-chart>

this.margin = { top: 20, bottom: 23, right: 15, left: 10 }		 Property: margin

<ejs-accumulationchart [margin]='margin'>
</ejs-accumulationchart>

this.margin = { top: 20, bottom: 23, right: 15, left: 10 }
Selected Data Indexes Property: selectedDataPointIndexes

<ej-chart [selectedDataPointIndexes]='selectData'>
</ej-chart>

this.selectedData = [ { seriesIndex: 2, pointIndex: 2}]		 Property: selectedDataIndexes

<ejs-accumulationchart [selectedDataIndexes]='selectData'>
</ejs-accumulationchart>

this.selectData = [ { series: 0, point: 1}]
Selection Mode Property: commonSeriesOptions.selectionSettings.mode

<ej-chart [commonSeriesOptions.selectionSettings.mode]='selectData'>
</ej-chart>

this.selectData =’Point’		 Property: selectionMode

<ejs-accumulationchart [selectionMode]='selectionmode'>
</ejs-accumulationchart>

this.selectionmode =’Point’
Series Property: series

<ej-chart>
<e-series-collection>
<e-series>
</e-series>
</e-series-collection>
</ej-chart> 		Property: e-accumulation-series

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Title text Property: title.text

<ej-chart title.text="Expenditures">
</ej-chart> 		Property: title

<ejs-accumulationchart [title]='title'>
</ejs-accumulationchart>

this.title =’Chart title’
SubTitle text Property: title.subTitle.text

<ej-chart title.subTitle.text="subTitle">
</ej-chart> 		Property: title

<ejs-accumulationchart [subTitle]='title'>
</ejs-accumulationchart>

this.title =’Chart subtitle’
tooltip Property: tooltip

<ej-chart>
<e-series-collection>
<e-series [tooltip]='tooltip'>
</e-series>
</e-series-collection>
</ej-chart>

this.tooltip = {}		 Property: tooltip

<ejs-accumulationchart [tooltip]='tooltip'>
</ejs-accumulationchart>

this.tooltip = {}

Annotations

Behavior API in Essential JS 1 API in Essential JS 2
Annotation Property: annotation

<ej-chart>
<e-annotations>
<e-annotation [visible]='visible'>
<e-annotation>
</e-annotations>
</ej-chart>

this.visible = true		 Property: e-annotation

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotation>
</e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>
Annotation content Property: annotation.content

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation content='<div>Chart</div>'>
</e-annotations>
</ej-chart> 		Property: annotation.content

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-annotation content='<div>Chart</div>'>
</e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>
Coordinate unit of annotation Property: annotation.coordinateUnit

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation coordinateUnit='Pixel'>
</e-annotations>
</ej-chart> 		Property: annotation.coordinateUnits

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotation coordinateUnits='Pixel'>
</e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>
Horizontal alignment of annotation Property: annotation.horiontalAlignment

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation horiontalAlignment='near'>
</e-annotations>
</ej-chart> 		Property: annotation.horiontalAlignment

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotation horiontalAlignment='Near'>
</e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>
Margin for annotation Property: annotation.margin

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation [margin]='margin'>
</e-annotations>
</ej-chart>
this.margin = { }		 Property: Not Applicable.
Opacity for annotation Property: annotation.opacity

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation [opacity]='opacity'>
</e-annotations>
</ej-chart>
this.opacity = 2		 Property: Not Applicable.
region of annotation Property: annotation.region

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation region='Chart'>
</e-annotations>
</ej-chart> 		Property: annotation.region

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotation region='Chart'>
</e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>
Vertical alignment of annotation Property: annotation.verticalAlignment

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation verticalAlignment='Top'>
</e-annotations>
</ej-chart> 		Property: annotation.verticalAlignment

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotation verticalAlignment='Top'>
</e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>
X offset for annotation Property: annotation.x

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation [x]='xvalue'>
</e-annotations>
</ej-chart>

this.xvalue = 2		 Property: annotation.x

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotation x='xvalue'>
</e-annotations>
</ejs-accumulationchart>

this.xvalue = 2
Y offset for annotation Property: annotation.y

<ej-chart>
<e-annotations>
<e-annotation>
<e-annotation [Y]='yvalue'>
</e-annotations>
</ej-chart>
this.yvalue = ‘axis’		 Property: annotation.y

<ejs-accumulationchart>
<e-accumulation-annotations>
<e-accumulation-annotations [Y]='yvalue'>
<e-accumulation-annotation>
</e-accumulation-annotations>
</ejs-accumulationchart>

this.yvalue = ‘axis’

Series

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

<ej-chart>
<e-series-collection>
<e-series>
</e-series>
</e-series-collection>
</ej-chart> 		Property: series

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Enable animation for series Property: series.enableAnimation

<ej-chart>
<e-series-collection>
<e-series [enableAnimation]='animation'>
</e-series>
</e-series-collection>
</ej-chart>
this.animation = true		 Property: series.animation.enable

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [animation]='animation' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.animation = { enable: true}
Duration animation for series Property: series.animationDuration

<ej-chart>
<e-series-collection>
<e-series [animationDuration]='animation' >
</e-series>
</e-series-collection>
</ej-chart>

this.animation = 100		 Property: series.animation.duration

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [animation]='animation' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.animation = { duration: 100}
Animation delay for series Property: Not Applicable Property: series.animation.delay

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [animation]='animation' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.animation = { delay: 100 }
border of the series Property: border

<ej-chart>
<e-series-collection>
<e-series [border]='border' >
</e-series>
</e-series-collection>
</ej-chart>

this.border = { width: 2, color: 2}		 Property: border

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series border='border'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.border = { width: 2, color: ‘red’ }
DataLabel of series Property: series.marker.dataLabel

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { visible: true } }		 Property: series.marker.dataLabel

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { visible: true } }
dataSource for series Property: series.dataSource

<ej-chart>
<e-series-collection>
<e-series [dataSource]='data' >
</e-series>
</e-series-collection>
</ej-chart>

this.data = []		 Property: series.dataSource

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [dataSource]='data' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.data = []
enableTooltip for series Property: tooltip.visible

<ej-chart>
<e-series-collection>
<e-series [tooltip.visible]="true" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: tooltip

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [tooltip]='tooltip' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.tooltip = { enable:true }
start angle Property: startAngle

<ej-chart>
<e-series-collection>
<e-series [startAngle]=270 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: startAngle

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [startAngle]='startAngle' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.startAngle = 270
end angle Property: endAngle

<ej-chart>
<e-series-collection>
<e-series [endAngle]=270 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: endAngle

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [endAngle]='endAngle' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.endAngle = 270
explode Property: explode

<ej-chart>
<e-series-collection>
<e-series [explode]="true" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: explode

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [explode]='explode' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.explode = true
explodeAll Property: explodeAll

<ej-chart>
<e-series-collection>
<e-series [explodeAll]="true" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: explodeAll

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [explodeAll]='explodeAll' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.explodeAll = true
explodeIndex Property: explodeIndex

<ej-chart>
<e-series-collection>
<e-series [explodeIndex]=1 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: explodeIndex

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [explodeIndex]='explodeIndex' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.explodeIndex = 0
explodeOffset Property: explodeOffset

<ej-chart>
<e-series-collection>
<e-series [explodeOffset]=30% >
</e-series>
</e-series-collection>
</ej-chart> 		Property: explodeOffset

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [explodeOffset]='explodeOffset' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.explodeOffset = 30%
gapRatio Property: gapRatio

<ej-chart>
<e-series-collection>
<e-series [gapRatio]=0.1 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: gapRatio

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [gapRatio]='gapRatio' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.gapRatio = 0.1
gapWidth Property: gapWidth

<ej-chart>
<e-series-collection>
<e-series [gapWidth]=0.1 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: gapWidth

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [gapWidth]='gapWidth' >
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.gapWidth = 1
inner radius of the accumulation chart Property: doughnutCoefficient

<ej-chart>
<e-series-collection>
<e-series [doughnutCoefficient]=0.1 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: innerRadius

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series innerRadius='40%'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Legend shape of the series Property: Not applicable Property: legendShape

<ejs-accumulationchart>
<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>
<e-series-collection>
<e-series [name]='name' >
</e-series>
</e-series-collection>
</ej-chart> 		Property: name

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series name='name'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
neck height for funnel series Property: funnelHeight

<ej-chart>
<e-series-collection>
<e-series [funnelHeight]="20%" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: neckHeight

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [neckHeight]]='neckHeight'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.neckHeight=’30%’
neck width for funnel series Property: funnelWidth

<ej-chart>
<e-series-collection>
<e-series [funnelWidth]="20%" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: neckWidth

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [neckWidth]]='neckWidth'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.neckWidth=’30%’
opacity for series Property: opacity

<ej-chart>
<e-series-collection>
<e-series [opacity]="0.4" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: opacity

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [opacity]]='opacity'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.opacity=’0.4’
palettes for series Property: Not applicable Property: palettes

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [palettes]]='palettes'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.palettes=[]
point color mapping name for series Property: pointColorMappingName

<ej-chart>
<e-series-collection>
<e-series [pointColorMappingName]="color" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: opacity

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [pointColorMappingName]]='pointColorMappingName'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.pointColorMappingName=’color’
Mode of pyramid series Property: pyramidMode

<ej-chart>
<e-series-collection>
<e-series [pyramidMode]="Surface" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: pyramidMode

<ejs-accumulationchart>
<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>
<e-series-collection>
<e-series [query]="" >
</e-series>
</e-series-collection>
</ej-chart> 		Property: query

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series pyramidMode=''>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Radius of Pie series Property: pieCoefficient

<ej-chart>
<e-series-collection>
<e-series [pieCoefficient]=0.4 >
</e-series>
</e-series-collection>
</ej-chart> 		Property: radius

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

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [selectionStyle]]='selectionStyle'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.selectionStyle={}
tooltip Mapping name Property: Not applicable Property: tooltipMappingName

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [tooltipMappingName]]='tooltipMappingName'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
this.tooltipMappingName=’text’
Type of series Property: type

<ej-chart>
<e-series-collection>
<e-series type='Funnel' >
</e-series>
</e-series-collection>
</ej-chart> 		Property: type

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series type='Funnel'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Name of the property in the datasource that contains x value for the series Property: xName

<ej-chart>
<e-series-collection>
<e-series xName='x' >
</e-series>
</e-series-collection>
</ej-chart> 		Property: xName

<ejs-accumulationchart>
<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: yName

<ej-chart>
<e-series-collection>
<e-series yName='y' >
</e-series>
</e-series-collection>
</ej-chart> 		Property: yName

<ejs-accumulationchart>
<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>
<e-accumulation-series-collection>
<e-accumulation-series [groupTo]]='11'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
GroupMode Property: Not applicable Property: groupMode

<ejs-accumulationchart>
<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 of series Property: series.marker.dataLabel

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { visible: true } }		 Property: series.marker.dataLabel

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { visible: true } }
Border of datalabel Property: marker.dataLabel.border

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { border: { color: ‘red’, width: 2} } }		 Property: marker.dataLabel.border

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { border: { width: 2, color: ‘blue’} } }
Border of datalabel Property: marker.dataLabel.border

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel :{ connectorLine: { type: ‘Curve’, width: 2 } } }		 Property: marker.dataLabel.border

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel : { connectorStyle: { type: ‘Curve’, width: 2 } } }
Fill color of datalabel Property: marker.dataLabel.fill

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { fill: ‘red’ } }		 Property: marker.dataLabel.fill

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { fill: ‘red’ } }
font for dataLabel Property: marker.dataLabel.font

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { font:{} } }		 Property: marker.dataLabel.font

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { font:{} } }
position Property: marker.dataLabel.position

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { position:’Inside’ } }		 Property: marker.dataLabel.position

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { position:’Inside’ } }
Rounded corner radius X Property: Not Applicable Property: rx

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series rx="10">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
Rounded corner radius Y Property: Not Applicable Property: ry

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series ry="10">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
HTML template in dataLabel Property: marker.dataLabel.template

<ej-chart>
<e-series-collection>
<e-series [marker]='marker'>
</e-series>
</e-series-collection>
</ej-chart>

this.marker = { dataLabel: { template:’’ } }		 Property: marker.dataLabel.template

<ejs-accumulationchart>
<e-accumulation-series-collection>
<e-accumulation-series [marker]='marker'>
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>

this.marker = { dataLabel: { template:’’ } }

Legend

Behavior API in Essential JS 1 API in Essential JS 2
Visibility of legend Property: legend.visible

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { visible: true }		 Property: legend.visible

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { visible: true }
Height of legend Property: legend.size.height

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { size: { height: 20 }}		 Property: legend.height

< ejs-accumulationchart [legend]='legend'>
</ejs-accumulationchart>

this.legend = { height: ‘40’ }
Width of legend Property: legend.size.width

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { size: { width: 20 }}		 Property: legend.height

< ejs-accumulationchart [legend]='legend'>
</ejs-accumulationchart>

this.legend = { width: ‘40’ }
Location of legend Property: legend.location

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { location: { x: 10, y: 30 }}		 Property: legend.location

< ejs-accumulationchart [legend]='legend'>
</ejs-accumulationchart>

this.legend = { location: { x: 10, y: 30}}
Padding of legend Property: legend.padding

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { padding: 20 }		 Property: legend.padding

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { padding: 8 }
Alignment of legend Property: legend.alignment

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { alignment: ‘near’ }		 Property: legend.alignment

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { alignment: ‘near’ }
Text style of legend Property: legend.font

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { font: { size: ‘12px’, color: ‘red’ } }		 Property: legend.textStyle

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { textStyle: { size: ‘12px’, color: ‘red’ } }
Shape height of legend Property: legend.itemStyle.height

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { itemStyle: { height: 20 } }		 Property: legend.shapeHeight

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { shapeHeight: 20 }
Shape width of legend Property: legend.itemStyle.width

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { itemStyle: { width: 20} }		 Property: legend.shapeWidth

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { shapeWidth: 20 }
Shape border of legend Property: legend.itemStyle.border

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { itemStyle: { border: { width: 2, color: ‘red’ }} }		 Property: legend.shapeBorder

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { shapeBorder: { color: ‘red’, width: 2 } }
Shape padding of legend Property: legend.itemPadding

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { itemPadding: 10 } }		 Property: legend.shapePadding

<ejs-accumulationchart [legend]='legend'>
</ejs-accumulationchart>

this.legend = { shapePadding: 10 }
Background of legend Property: legend.background

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { background: ‘transparent’ } }		 Property: legend.background

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { background: ‘transparent’ }
Opacity of legend Property: legend.opacity

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { opacity: 0.7 } }		 Property: legend.opacity

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { opacity: 0.6 }
Toggle visibility of series legend Property: legend.toggleSeriesVisibility

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { toggleSeriesVisibility: true }		 Property: legend.toggleVisibility

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { toggleVisibility: true }
Title of legend Property: legend.title

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { title: ‘legend title’}		 Property: Not Applicable
Text over flow of legend Property: legend.textOverFlow

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { textOverFlow: ‘Trim’ }		 Property: legend.textOverFlow

< ejs-accumulationchart [legend]='legend'>
</ ejs-accumulationchart>

this.legend = { textStyle:{ textOverFlow: ‘Trim’ } }
Scroll bar for legend Property: legend.enableScrollBar

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { enableScrollBar: true }		 Property: Not Applicable
Row count for legend Property: legend.rowCount

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { rowCount: 2 }		 Property: Not Applicable
Column count for legend Property: legend.columnCount

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { columnCount: 2 }		 Property: Not Applicable
Fill color for legend Property: legend.fill

<ej-chart [legend]='legend'>
</ej-chart>

this.legend = { fill: 2 }		 Property: Not Applicable

Methods

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

<ej-chart (animate)='animation'>
</ej-chart>

this.animate(args) { }		 Property: Not Applicable
Redraw Property: chart.redraw

<ej-chart (redraw)='redraw'>
</ej-chart>

this.redraw(args) { }		 Property: chart.refresh

<ejs-accumulationchart (refresh)='refresh'>
</ejs-accumulationchart>

this.refresh(args) { }
print Property: chart.print

<ej-chart (print)='print'>
</ej-chart>

this.print(args) { }		 Property: chart.print

<ejs-accumulationchart (print)='print'>
</ejs-accumulationchart>

this.print(args) { }
export Property: chart.export

<ej-chart (print)='print'>
</ej-chart>

this.print(args) { }		 Property: chart.export

<ejs-accumulationchart (export)='export'>
</ejs-accumulationchart>

this.export(args) { }
add series Property: Not Applicable Property: chart.export

<ejs-accumulationchart (addSeries)='addSeries'>
</ejs-accumulationchart>

this.addSeries(args) { }
remove series Property: Not Applicable Property: chart.export

<ejs-accumulationchart (removeSeries)='removeSeries'>
</ejs-accumulationchart>

this.removeSeries(args) { }

Events

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

<ej-chart (annotationClick)='annotationClick($event)'>
</ej-chart>

this.annotationClick(args) { }		 Property: Not Applicable
Fires on after animation Property: chart.animationComplete

<ej-chart (animationComplete)='animationComplete($event)'>
</ej-chart>

this.animationComplete(args) { }		 Property: chart.animationComplete

<ejs-accumulationchart (refresh)='refresh'>
</ejs-accumulationchart>

this.refresh(args) { }
Fires on after chart resize Property: chart.afterResize

<ej-chart (afterResize)='afterResize($event)'>
</ej-chart>

this.afterResize(args) { }		 Property: Not Applicable
Fires before resize Property: chart.beforeResize

<ej-chart (beforeResize)='beforeResize($event)'>
</ej-chart>

this.beforeResize(args) { }		 Property: chart.resized

<ejs-accumulationchart (resized)='resized($event)'>
</ejs-accumulationchart>

this.resized(args) { }
Fires chart click Property: chart.chartClick

<ej-chart (chartClick)='chartClick($event)'>
</ej-chart>

this.chartClick(args) { }		 Property: chart.chartMouseClick

<ejs-accumulationchart (chartMouseClick)='chartMouseClick($event)'>
</ejs-accumulationchart>

this.chartMouseClick(args) { }
Fires chart mouse leave Property: chart.chartMouseLeave

<ej-chart (chartMouseLeave)='chartMouseLeave($event)'>
</ej-chart>

this.chartMouseLeave(args) { }		 Property: chart.chartMouseClick

<ejs-accumulationchart (chartMouseLeave)='chartMouseLeave($event)'>
</ejs-accumulationchart>

this.chartMouseLeave(args) { }
Fires chart mouse move Property: chart.chartMouseMove

<ej-chart (chartMouseMove)='chartMouseMove($event)'>
</ej-chart>

this.chartMouseMove(args) { }		 Property: chart.chartMouseMove

<ejs-accumulationchart (chartMouseMove)='chartMouseMove($event)'>
</ejs-accumulationchart>

this.chartMouseLeave(args) { }
Fires on double click Property: chart.chartDoubleClick

<ej-chart (chartDoubleClick)='chartDoubleClick($event)'>
</ej-chart>

this.chartDoubleClick(args) { }		 Property: Not Applicable
Fires chart mouse up Property: Not Applicable Property: chart.chartmouseUp

<ejs-accumulationchart (chartmouseUp)='chartmouseUp($event)'>
</ejs-accumulationchart>

this.chartmouseUp(args) { }
Fires on chart mouse Down Property: Not Applicable Property: chart.chartmouseDown

<ejs-accumulationchart (chartmouseDown)='chartmouseDown($event)'>
</ejs-accumulationchart>

this.chartmouseDown(args) { }
Fires during calculation of area bounds Property: chart.chartAreaBoundsCalculate

<ej-chart (chartAreaBoundsCalculate)='chartAreaBoundsCalculate($event)'>
</ej-chart>

this.chartAreaBoundsCalculate(args) { }		 Property: Not Applicable
Fires after chart destried Property: chart.destroy

<ej-chart (destroy)='destroy($event)'>
</ej-chart>

this.destroy(args) { }		 Property: Not Applicable
Fires on chart created Property: chart.create

<ej-chart (create)='create($event)'>
</ej-chart>

this.create(args) { }		 Property: chart.load

<ejs-accumulationchart (load)='load($event)'>
</ejs-accumulationchart>

this.load(args) { }
Fires before rendering the data labels Property: chart.displayTextRendering

<ej-chart (displayTextRendering)='displayTextRendering($event)'>
</ej-chart>

this.displayTextRendering(args) { }		 Property: chart.textRender

<ejs-accumulationchart (textRender)='textRender($event)'>
</ejs-accumulationchart>

this.textRender(args) { }
Fires on clicking the legend item Property: chart.legendItemClick

<ej-chart (legendItemClick)='legendItemClick($event)'>
</ej-chart>

this.legendItemClick(args) { }		 Property: Not Applicable
Fires when moving mouse over legend item Property: chart.legendItemMouseMOve

<ej-chart (legendItemMouseMOve)='legendItemMouseMOve($event)'>
</ej-chart>

this.legendItemMouseMOve(args) { }		 Property: Not Applicable
Fires on legend item render Property: chart.legendItemRendering

<ej-chart (legendItemRendering)='legendItemRendering($event)'>
</ej-chart>

this.legendItemRendering(args) { }		 Property: Not Applicable
Fires on clicking a point in chart Property: chart.pointRegionClick

<ej-chart (pointRegionClick)='pointRegionClick($event)'>
</ej-chart>

this.pointRegionClick(args) { }		 Property: chart.pointClick

<ejs-accumulationchart (pointClick)='pointClick($event)'>
</ejs-accumulationchart>

this.pointClick(args) { }
Fires on pre render Property: chart.preRender

<ej-chart (preRender)='preRender($event)'>
</ej-chart>

this.preRender(args) { }		 Property: Not Applicable
Fires when point render Property: Not Applicable. Property: chart.pointRender

<ejs-accumulationchart (pointRender)='pointRender($event)'>
</ejs-accumulationchart>

this.pointRender(args) { }
Fires when mouse is moved over a point Property: chart.pointRegionMouseMove

<ej-chart (pointRegionMouseMove)='pointRegionMouseMove($event)'>
</ej-chart>

this.pointRegionMouseMove(args) { }		 Property: chart.pointMouseMove

<ej-chart (pointMouseMove)='pointMouseMove($event)'>
</ej-chart>

this.pointMouseMove(args) { }
Fires on series render Property: chart.seriesRendering

<ej-chart (seriesRendering)='seriesRendering($event)'>
</ej-chart>

this.seriesRendering(args) { }		 Property: chart.seriesRender

<ejs-accumulationchart (seriesRender)='seriesRender($event)'>
</ejs-accumulationchart>

this.seriesRender(args) { }
Fires on title render Property: chart.titleRendering

<ej-chart (titleRendering)='titleRendering($event)'>
</ej-chart>

this.titleRendering(args) { }		 Property: Not Applicable
Fires on sub title render Property: chart.subTitleRendering

<ej-chart (subTitleRendering)='subTitleRendering($event)'>
</ej-chart>

this.subTitleRendering(args) { }		 Property: Not Applicable
Fires before rendering the tooltip Property: chart.tooltipInitilize

<ej-chart (tooltipInitilize)='tooltipInitilize($event)'>
</ej-chart>

this.tooltipInitilize(args) { }		 Property: chart.tooltipRender

<ej-chart (tooltipRender)='tooltipRender($event)'>
</ej-chart>

this.tooltipRender(args) { }