This article describes the API migration process of {Component Name} component from Essential JS 1 to Essential JS 2.
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 = {} |
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’ |
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> |
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:” } } |
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 |
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) { } |
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) { } |
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) { } |