This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Annotations | Property: annotations.content annotations: [{ content: “watermark” }], <EJ.Chart annotations={annotations}> </EJ.Chart> |
Property: annotations.content <AccumulationChartComponent id='charts'> <AccumulationAnnotationDirective content='<div>Highest Medal Count</div>'> </AccumulationAnnotationDirective> </AccumulationChartComponent> |
background | Property: background <EJ.Chart background='#DDCCEE'> </EJ.Chart> |
Property: annotations.content <AccumulationChartComponent id='charts' background='DDCCEE'> </AccumulationChartComponent> |
border | Property: border <EJ.Chart border: { }> </EJ.Chart> |
Property: border <AccumulationChartComponent id='charts' border: { color: 'red', width: 2}> </AccumulationChartComponent> |
dataSource | Not applicable | Property: dataSource <AccumulationChartComponent id='charts' dataSource: [ ];> </AccumulationChartComponent> |
Animation after legend click | Not applicable | Property: enableAnimation <AccumulationChartComponent id='charts' enableAnimation= true;> </AccumulationChartComponent> |
Persisting component’s state between page reloads | Not applicable | Property: enablePersistance <AccumulationChartComponent id='charts' enablePersistance={true};> </AccumulationChartComponent> |
Enabling smart labels | Property: series.enableSmartLabels var series= [{ enableSmartLabels: true }], <EJ.Chart series={series}> </EJ.Chart> |
Property: series.enableSmartLabels<AccumulationChartComponent id='charts';> <AccumulationSeriesDirective enableSmartLabels={true}> </AccumulationSeriesDirective><br/> ` |
Height of Chart | Property: size.height <EJ.Chart size={ height: '400' }> </EJ.Chart> |
Property: height<AccumulationChartComponent id='charts' height='400';> </AccumulationChartComponent> |
Multi selection | Property: selectionSettings.type var selectionSettings= [{ type: ‘multiple’}], <EJ.Chart selectionSettings={selectionSettings}> </EJ.Chart> |
Property: isMultiSelect<AccumulationChartComponent id='charts' isMultiSelect: true;> </AccumulationChartComponent> |
legend Settings | Property: legend <EJ.Chart legend: { }> </EJ.Chart> |
Property: isMultiSelect public legendSettings: LegendSettingsModel = { visible: true }; <AccumulationChartComponent id='charts' legendSettings={this.legendSettings};> </AccumulationChartComponent> |
Margin for the chart | Property: margin <EJ.Chart margin: { top: 20, bottom: 23, right: 15, left: 10 }> </EJ.Chart> |
Property: isMultiSelect public margin: { top: 20, bottom: 23, right: 15, left: 10 }; <AccumulationChartComponent id='charts' margin={this.margin};> </AccumulationChartComponent> |
SelectedDataIndexes | Property: selectedDataPointIndexes <EJ.Chart selectedDataPointIndexes : [{}]> </EJ.Chart> |
Property: selectedDataIndexes public selectedDataIndexes : [ { series: 0, point: 1}]; <AccumulationChartComponent id='charts' selectedDataIndexes={this.selectedDataIndexes};> </AccumulationChartComponent> |
Selection Mode | Property: selectionSettings.mode <EJ.Chart selectionSettings: { mode: 'Point'}> </EJ.Chart> |
Property: selectedDataIndexes<AccumulationChartComponent id='charts' selectionMode : 'Point';> </AccumulationChartComponent> |
Series | Property: series <EJ.Chart series: []> </EJ.Chart> |
Property: series<AccumulationChartComponent id='charts';> <AccumulationSeriesDirective> </AccumulationSeriesDirective> </AccumulationChartComponent> |
Title text | Property: title.text <EJ.Chart title: { text: 'Pie Chart' }> </EJ.Chart> |
Property: title<AccumulationChartComponent id='charts' title: 'Pie Chart';> </AccumulationChartComponent> |
Title Styles | Property: title <EJ.Chart title: { text: 'Pie Chart' }> </EJ.Chart> |
Property: titleStyle<AccumulationChartComponent id='charts' titleStyle: { fontFamily: 'SegoeUI'};> </AccumulationChartComponent> |
Title Styles | Property: title <EJ.Chart title: { text: 'Pie Chart' }> </EJ.Chart> |
Property: titleStyle<AccumulationChartComponent id='charts' titleStyle: { fontFamily: 'SegoeUI'};> </AccumulationChartComponent> |
Sub Title text | Property: subTitle.text var subTitle={ text: ‘Pie Chart’ } <EJ.Chart subTitle={subTitle}> </EJ.Chart> |
Property: subTitle public subTitle=‘Pie Chart’; <AccumulationChartComponent id='charts' subTitle={this.subTitle};> </AccumulationChartComponent> |
Sub title Styles | Property: subTitleStyle var subTitleStyle={ fontFamily: ‘SegoeUI’ } <EJ.Chart subTitleStyle={subTitleStyle}> </EJ.Chart> |
Property: subTitleStyle public subTitleStyle={ fontFamily: ‘SegoeUI’ }; <AccumulationChartComponent id='charts' subTitleStyle={this.subTitleStyle};> </AccumulationChartComponent> |
tooltip | Property: series.toolTip var series=[ { tooltip: { }}] <EJ.Chart series={series}> </EJ.Chart> |
Property: tooltip<AccumulationChartComponent id='charts' tooltip={enable: true };> </AccumulationChartComponent> |
Width of Chart | Property: size.width <EJ.Chart size={ width: '400' }> </EJ.Chart> |
Property: width<AccumulationChartComponent id='charts' width='400';> </AccumulationChartComponent> |
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> |
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> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
DataLabelSettings of marker | Property: marker.dataLabel var series =[{marker:{ dataLabel: { }} }] <EJ.Chart series={series}> </EJ.Chart> |
Property: marker.dataLabel <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: { }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
border of dataLabel | Property: marker.dataLabel.border var series =[{marker:{ dataLabel: { border: {} } } }] <EJ.Chart series={series}> </EJ.Chart> |
Property: dataLabel.border <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: {border: {} }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
connector style for dataLabel connector line | Property: marker.dataLabel.connectorLine var series =[{marker:{ dataLabel: { connectorLine: {} } } }] <EJ.Chart series={series}> </EJ.Chart> |
Property: connectorStyle <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: {connectorStyle: {} }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
Fill for dataLabel | Property: marker.dataLabel.fill var series =[{marker:{ dataLabel: { fill: ‘red’ } } }] <EJ.Chart series={series}> </EJ.Chart> |
Property: fill <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: {fill: 'pink' }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
font for dataLabel | Property: marker.dataLabel.font var series =[{marker:{ dataLabel: { font: {} } } }] <EJ.Chart series={series}> </EJ.Chart> |
Property: font <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: {font: { } }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
position for dataLabel | Property: marker.dataLabel.position var series =[{marker:{ dataLabel: { position: ‘Inside’} } }] <EJ.Chart series={series}> </EJ.Chart> |
Property: position <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: {position: 'Outside' }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
Rounded corner radius X | Not Applicable | Property: dataLabel.rx <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: { rx: 10 }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
Rounded corner radius Y | Not Applicable | Property: dataLabel.ry <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: { ry: 10 }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
HTML template in dataLabel | Property: dataLabel.template var series =[{marker:{ dataLabel: { template: ’ Chart ’} } }]<EJ.Chart series={series}> </EJ.Chart> |
Property: dataLabel.template <AccumulationChartComponent id='charts'> <AccumulationSeriesDirective marker={ dataLabel: {template: '<div>Chart</div>' }}> </AccumulationSeriesDirective> </AccumulationChartComponent> |
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 |
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> |
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> |
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 {}; |