Ej1 api migration in React Accumulation chart component

17 Mar 202514 minutes to read

This article describes the API migration process of Chart component from Essential^® JS 1 to Essential^® JS 2.

Accumulation Chart

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|Annotations| Property: annotations.content

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

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

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

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

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

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

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

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

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

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

<AccumulationChartComponent id='charts';>
<AccumulationSeriesDirective
enableSmartLabels={true}>
</AccumulationSeriesDirective> </AccumulationChartComponent>| |Height of Chart|**Property:** *size.height* <EJ.Chart   size={ height: ‘400’ }> </EJ.Chart>|**Property:** *height* <AccumulationChartComponent id=’charts’ height=’400’;> </AccumulationChartComponent>| |Multi selection|**Property:** *selectionSettings.type* var selectionSettings= [{ type: 'multiple'}], <EJ.Chart   selectionSettings={selectionSettings}> </EJ.Chart>|**Property:** *isMultiSelect* <AccumulationChartComponent id=’charts’ isMultiSelect: true;> </AccumulationChartComponent>| |legend Settings|**Property:** *legend* <EJ.Chart   legend: { }> </EJ.Chart>|**Property:** *isMultiSelect* public legendSettings: LegendSettingsModel = { visible: true }; <AccumulationChartComponent id=’charts’ legendSettings={this.legendSettings};> </AccumulationChartComponent>| |Margin for the chart|**Property:** *margin* <EJ.Chart   margin: { top: 20, bottom: 23, right: 15, left: 10 }> </EJ.Chart>|**Property:** *isMultiSelect* public margin: { top: 20, bottom: 23, right: 15, left: 10 }; <AccumulationChartComponent id=’charts’ margin={this.margin};> </AccumulationChartComponent>| |SelectedDataIndexes|**Property:** *selectedDataPointIndexes* <EJ.Chart   selectedDataPointIndexes : [{}]> </EJ.Chart>|**Property:** *selectedDataIndexes* public selectedDataIndexes : [ { series: 0, point: 1}]; <AccumulationChartComponent id=’charts’ selectedDataIndexes={this.selectedDataIndexes};> </AccumulationChartComponent>| |Selection Mode|**Property:** *selectionSettings.mode* <EJ.Chart   selectionSettings: { mode: ‘Point’}> </EJ.Chart>|**Property:** *selectedDataIndexes* <AccumulationChartComponent id=’charts’ selectionMode : ‘Point’;> </AccumulationChartComponent>| |Series|**Property:** *series* <EJ.Chart   series: []> </EJ.Chart>|**Property:** *series* <AccumulationChartComponent id=’charts’;> `
` </AccumulationChartComponent>| |Title text|**Property:** *title.text* <EJ.Chart   title: { text: ‘Pie Chart’ }> </EJ.Chart>|**Property:** *title* <AccumulationChartComponent id=’charts’ title: ‘Pie Chart’;> </AccumulationChartComponent>| |Title Styles|**Property:** *title* <EJ.Chart   title: { text: ‘Pie Chart’ }> </EJ.Chart>|**Property:** *titleStyle* <AccumulationChartComponent id=’charts’ titleStyle: { fontFamily: ‘SegoeUI’};> </AccumulationChartComponent>| |Title Styles|**Property:** *title* <EJ.Chart   title: { text: ‘Pie Chart’ }> </EJ.Chart>|**Property:** *titleStyle* <AccumulationChartComponent id=’charts’ titleStyle: { fontFamily: ‘SegoeUI’};> </AccumulationChartComponent>| |Sub Title text|**Property:** *subTitle.text* var subTitle={ text: 'Pie Chart' } <EJ.Chart   subTitle={subTitle}> </EJ.Chart>|**Property:** *subTitle* public subTitle='Pie Chart'; <AccumulationChartComponent id=’charts’ subTitle={this.subTitle};> </AccumulationChartComponent>| |Sub title Styles|**Property:** *subTitleStyle* var subTitleStyle={ fontFamily: 'SegoeUI' } <EJ.Chart   subTitleStyle={subTitleStyle}> </EJ.Chart>|**Property:** *subTitleStyle* public subTitleStyle={ fontFamily: 'SegoeUI' }; <AccumulationChartComponent id=’charts’ subTitleStyle={this.subTitleStyle};> </AccumulationChartComponent>| |tooltip|**Property:** *series.toolTip* var series=[ { tooltip: { }}] <EJ.Chart   series={series}> </EJ.Chart>|**Property:** *tooltip* <AccumulationChartComponent id=’charts’ tooltip={enable: true };> </AccumulationChartComponent>| |Width of Chart|**Property:** *size.width* <EJ.Chart   size={ width: ‘400’ }> </EJ.Chart>|**Property:** *width* <AccumulationChartComponent id=’charts’ width=’400’;> </AccumulationChartComponent>`|

Annotation

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|Annotations| Property: annotations.content

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Series

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|series| Property: series

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DataLabel

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|DataLabelSettings of marker| Property: marker.dataLabel

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Legend

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|Default legend|Property: visible

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Methods

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|animation for series| Property: animate()

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

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

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

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

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

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

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

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

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

Events

| Behavior | API in Essential^® JS 1 | API in Essential^® JS 2 |
| — | — | — |
|Fires on annotation click| Property: annotationClick

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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