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) { } |