Migration from Essential JS 1 in Angular Chart component

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

Chart

Behavior	API in Essential JS 1	API in Essential JS 2
Annotation	Property: annotation <ej-chart> <e-annotations> <e-annotation> <e-annotation> </e-annotations> </ej-chart>	Property: e-annotation <ejs-chart> <e-annotations> <e-annotation> <e-annotation> </e-annotations> </ejs-chart>
Background	Property: background <ej-chart background='red'> </ej-chart>	Property: background <ej-chart background='red'> </ej-chart>
backgroundImageUrl	Property: backgroundImageUrl <ej-chart background='red'> </ej-chart>	Property: Not Applicable.
border of the chart	Property: border <ej-chart [border]='border'> </ej-chart> this.border = { width: 2, color: ‘red’}	Property: border <ejs-chart [isResponsive]='border'> </ejs-chart> this.border = { width: 2, color: ‘red’}
isResponsive of chart	Property: isResponsive <ej-chart [isResponsive]='response'> </ej-chart> this.response = true	Property: Not Applicable
Chart area of the chart	Property: chartArea <ej-chart [chartArea]='chartArea'> </ej-chart> this.chartArea = { border: { color: ‘red’, width: 2}, background: ‘transparent’ }	Property: chartArea <ejs-chart [chartArea]='chartArea'> </ejs-chart> this.chartArea = { border: { color: ‘red’, width: 2}, background: ‘transparent’ }
Column of the chart	Property: columnDefintions <ej-chart> <e-columnDefinitions> <e-columnDefinition> </e-columnDefinition> </e-columnDefinitions> </ej-chart>	Property: columns <ej-chart> <e-columns> <e-column> </e-column> </e-columns> </ej-chart>
crossHair	Property: crossHair <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { }	Property: crossHair <ejs-chart [crosshair]='crosshair'> </ejs-chart> this.crosshair = { }
Common series options	Property: commonSeriesOptions <ej-chart [commonSeriesOptions]='series'> </ej-chart> this.series = { }	Property: Not Applicable
Indicators	Property: indicator <ej-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ej-chart>	Property: indicator <ejs-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ejs-chart>
Rows of the chart	Property: rowDefintions <ej-chart> <e-rowDefinitions> <e-rowDefinition> </e-rowDefinition> </e-rowDefinitions> </ej-chart>	Property: rows <ej-chart> <e-columns> <e-column> </e-column> </e-columns> </ej-chart>
primaryXAxis	Property: primaryXAxis <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { }	Property: primaryXAxis <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { }
primaryYAxis	Property: primaryYAxis <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.series = { }	Property: primaryXAxis <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { }
Series	Property: series <ej-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ej-chart>	Property: series <ejs-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ejs-chart>
Selected data	Property: selectedDataPointIndexes <ej-chart [selectedDataPointIndexes]='selectData'> </ej-chart> this.selectedData = [ { seriesIndex: 2, pointIndex: 2}]	Property: primaryXAxis <ejs-chart [selectedDataIndexes]='selectData'> </ejs-chart> this.selectData = [ { series: 0, point: 1}]
Chart theme	Property: theme <ej-chart [theme]='theme'> </ej-chart> this.theme = ‘Material’	Property: theme <ejs-chart [theme]='theme'> </ejs-chart> this.theme = ‘Fabric’
Side by side placement of series	Property: sideBySideSeriePlacement <ej-chart [sideBySideSeriePlacement]='sideBySideSeriePlacement'> </ej-chart> this.sideBySideSeriePlacement = true	Property: enableSideBySidePlacement <ejs-chart [enableSideBySidePlacement]='sideBySide'> </ejs-chart> this.sideBySide = true
Chart title	Property: title.text <ej-chart [title]='title'> </ej-chart> this.title = ‘Chart title’	Property: title <ejs-chart [title]='sideBySide'> </ejs-chart> this.title =‘Chart title’
Zoom settings	Property: zooming <ej-chart [zooming]='zoom'> </ej-chart> this.zoom = {enable : true, enablePinching : true, enableMouseWheel: true, enableScrollBar: true, enableDeferredZoom: true, toolBarItems: [], type: ‘Y’}	Property: zoomSettings <ejs-chart [zoomSettings]='zoom'> </ejs-chart> this.zoom = {enablePinchZooming: true, enableMouseWheelZooming: true, enableDeferredZooming: true, enablePinchZooming: true, enableSelectionZooming: true, enablePan: true, enableScrollBar: true }
Multi selection of chart	Not Applicable	Property: isMultiSelect <ejs-chart [isMultiSelect]='select'> </ejs-chart> this.select = true
Vertical chart	Property: isTransposed <ej-chart> <e-series-collection> <e-series [isTransposed]='isTransposed'> </e-series> </e-series-collection> </ej-chart> this.isTransposed = true	Property: isTransposed <ejs-chart [isTransposed]='isTransposed'> </ejs-chart> this.isTransposed = true
Tooltip for chart	Property: tooltip <ej-chart> <e-series-collection> <e-series [tooltip]='tooltip'> </e-series> </e-series-collection> </ej-chart> this.tooltip = {}	Property: isTransposed <ejs-chart [tooltip]='tooltip'> </ejs-chart> this.tooltip = {}
Height of chart	Property: size.height <ej-chart [size]='size'> </ej-chart> this.size = { height: ‘300’}	Property: height <ejs-chart [height]='height'> </ejs-chart> this.height = ‘300’
Width of chart	Property: size.width <ej-chart [size]='size'> </ej-chart> this.size = { width: ‘300’}	Property: height <ejs-chart [width]='width'> </ejs-chart> this.width = ‘300’

3DChart

Behavior	API in Essential JS 1	API in Essential JS 2
3D chart	Property: enable3D <ej-chart [enable3D]='enable'> </ej-chart> this.enable = true	Property: Not Applicable

Annotations

Behavior	API in Essential JS 1	API in Essential JS 2
Annotation	Property: annotation <ej-chart> <e-annotations> <e-annotation [visible]='visible'> <e-annotation> </e-annotations> </ej-chart> this.visible = true	Property: e-annotation <ejs-chart> <e-annotations> <e-annotation> <e-annotation> </e-annotations> </ejs-chart>
Angle of annotation	Property: annotation.angle <ej-chart> <e-annotations> <e-annotation [angle]='angle'> <e-annotation> </e-annotations> </ej-chart> this.angle = 60	Property: Not Applicable
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-chart> <e-annotations> <e-annotation> <e-annotation content='<div>Chart</div>'> </e-annotations> </ejs-chart>
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-chart> <e-annotations> <e-annotation> <e-annotation coordinateUnits='Pixel'> </e-annotations> </ejs-chart>
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-chart> <e-annotations> <e-annotation> <e-annotation horiontalAlignment='Near'> </e-annotations> </ejs-chart>
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-chart> <e-annotations> <e-annotation> <e-annotation region='Chart'> </e-annotations> </ejs-chart>
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-chart> <e-annotations> <e-annotation> <e-annotation verticalAlignment='Top'> </e-annotations> </ejs-chart>
XValue of 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-chart> <e-annotations> <e-annotation> <e-annotation x='xvalue'> </e-annotations> </ejs-chart> this.xvalue = 2
x axis name of annotation	Property: annotation.xAxisName <ej-chart> <e-annotations> <e-annotation> <e-annotation [xAxisName]='xvalue'> </e-annotations> </ej-chart> this.xvalue = ‘axis’	Property: annotation.xAxisName <ejs-chart> <e-annotations> <e-annotation> <e-annotation [xAxisName]='xvalue'> </e-annotations> </ejs-chart> this.xvalue = ‘axis’
y axis name of annotation	Property: annotation.yAxisName <ej-chart> <e-annotations> <e-annotation> <e-annotation [yAxisName]='yvalue'> </e-annotations> </ej-chart> this.yvalue = ‘axis’	Property: annotation.xAxisName <ejs-chart> <e-annotations> <e-annotation> <e-annotation [yAxisName]='yvalue'> </e-annotations> </ejs-chart> this.yvalue = ‘axis’

Columns

Behavior	API in Essential JS 1	API in Essential JS 2
Column of the chart	Property: columnDefintions <ej-chart> <e-columnDefinitions> <e-columnDefinition> </e-columnDefinition> </e-columnDefinitions> </ej-chart>	Property: columns <ej-chart> <e-columns> <e-column> </e-column> </e-columns> </ej-chart>
Width of columns	Property: columnDefinition.width <ej-chart> <e-columnDefinitions> <e-columnDefinition [width]='width'> </e-columnDefinition> </e-columnDefinitions> </ej-chart>this.width = 20;	Property: column.width <ej-chart> <e-columns> <e-column [width]='width> </e-column> </e-columns> </ej-chart> this.width = ‘400’;
Unit of column width	Property: column.unit <ej-chart> <e-columnDefinitions> <e-columnDefinition [unit]='unit'> </e-columnDefinition> </e-columnDefinitions> </ej-chart>this.unit = ‘Pixel’;	Property: Not Applicable;
Line color of columns	Property: columnDefintions.lineColor <ej-chart> <e-columnDefinitions> <e-columnDefinition [lineColor]='color'> </e-columnDefinition> </e-columnDefinitions> </ej-chart>this.color = ‘blue’;	Property: column.border.color <ej-chart> <e-columns> <e-column [border]='border> </e-column> </e-columns> </ej-chart> this.border = { color: ‘red’ }
Line width of columns	Property: columnDefintions.lineWidth <ej-chart> <e-columnDefinitions> <e-columnDefinition [lineWidth]='width'> </e-columnDefinition> </e-columnDefinitions> </ej-chart>this.width = 2;	Property: column.border.width <ej-chart> <e-columns> <e-column [border]='border> </e-column> </e-columns> </ej-chart> this.border = { width: 2 }

Rows

Behavior	API in Essential JS 1	API in Essential JS 2
row of the chart	Property: rowDefintions <ej-chart> <e-rowDefinitions> <e-rowDefinition> </e-rowDefinition> </e-rowDefinitions> </ej-chart>	Property: rows <ej-chart> <e-rows> <e-row> </e-row> </e-rows> </ej-chart>
height of rows	Property: rowDefinition.height <ej-chart> <e-rowDefinitions> <e-rowDefinition [height]='height'> </e-rowDefinition> </e-rowDefinitions> </ej-chart>this.height = 20;	Property: row.height <ej-chart> <e-rows> <e-row [height]='height> </e-row> </e-rows> </ej-chart> this.height = ‘400’;
Unit of row height	Property: row.unit <ej-chart> <e-rowDefinitions> <e-rowDefinition [unit]='unit'> </e-rowDefinition> </e-rowDefinitions> </ej-chart>this.unit = ‘Pixel’;	Property: Not Applicable;
Line color of rows	Property: rowDefintions.lineColor <ej-chart> <e-rowDefinitions> <e-rowDefinition [lineColor]='color'> </e-rowDefinition> </e-rowDefinitions> </ej-chart>this.color = ‘blue’;	Property: row.border.color <ej-chart> <e-rows> <e-row [border]='border> </e-row> </e-rows> </ej-chart> this.border = { color: ‘red’ }
Line height of rows	Property: rowDefintions.lineheight <ej-chart> <e-rowDefinitions> <e-rowDefinition [lineheight]='height'> </e-rowDefinition> </e-rowDefinitions> </ej-chart>this.height = 2;	Property: row.border.height <ej-chart> <e-rows> <e-row [border]='border> </e-row> </e-rows> </ej-chart> this.border = { width: 2 }

Common Series Options

Behavior	API in Essential JS 1	API in Essential JS 2
Common series option	Property: commonSeriesOptions <ej-chart [commonSeriesOptions]='commonSeriesOption'> </ej-chart> this.commonSeriesOption = { }	Property: border <ejs-chart [commonSeriesOption]='commonSeriesOption'> </ejs-chart> this.commonSeriesOptions = { }

Crosshair

Behavior	API in Essential JS 1	API in Essential JS 2
crossHair	Property: visible <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { visible: true }	Property: enable <ejs-chart [crosshair]='crosshair'> </ejs-chart> this.crosshair = { enable: true }
type of cross hair	Property: type <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { visible: true }	Property: Not Applicable
Trackball settings of crosshair	Property: trackBallSettings <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { trackBallSettings: { } }	Property: Not Applicable.
Marker settings of crosshair	Property: markerSettings <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { markerSettings: { } }	Property: Not Applicable
crossHair line style	Property: line <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { line: { color: ‘red’, width: 2} }	Property: line <ejs-chart [crosshair]='crosshair'> </ejs-chart> this.crosshair = { line :{ color: ‘red’, width: 2 } }

Indicator

Behavior	API in Essential JS 1	API in Essential JS 2
Indicators	Property: indicator <ej-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ej-chart>	Property: indicator <ejs-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ejs-chart>
Indicator type	Property: type <ej-chart> <e-indicators> <e-indicator type='Tma'> </e-indicator> </e-indicators> </ej-chart>	Property: type <ejs-chart> <e-indicators> <e-indicator type='Tma' > </e-indicator> </e-indicators> </ejs-chart>
Period of indicator	Property: period <ej-chart> <e-indicators> <e-indicator [period]='period'> </e-indicator> </e-indicators> </ej-chart> this.period = 20;	Property: period <ejs-chart> <e-indicators> <e-indicator [period]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 14;
%d value of indicator	Property: dPeriod <ej-chart> <e-indicators> <e-indicator [dPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.dperiod = 20;	Property: dPeriod <ejs-chart> <e-indicators> <e-indicator [dPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 14;
%k value of indicator	Property: kPeriod <ej-chart> <e-indicators> <e-indicator [kPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.dperiod = 20;	Property: kPeriod <ejs-chart> <e-indicators> <e-indicator [kPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 14;
Show overBought/overSold values of indicator	Property: Not Applicable	Property: showZones <ejs-chart> <e-indicators> <e-indicator [showZones]='showZone' > </e-indicator> </e-indicators> </ejs-chart> this.showZone = true;
overBought values of indicator	Property: Not Applicable	Property: overBought <ejs-chart> <e-indicators> <e-indicator [overBought]='overBought' > </e-indicator> </e-indicators> </ejs-chart> this.overBought = 10;
overSold values of indicator	Property: Not Applicable	Property: overSold <ejs-chart> <e-indicators> <e-indicator [overBought]='overSold' > </e-indicator> </e-indicators> </ejs-chart> this.overSold = 10;
Field value of indicator	Property: field <ej-chart> <e-indicators> <e-indicator [field]='field'> </e-indicator> </e-indicators> </ej-chart> this.field = ‘Close’;	Property: field <ejs-chart> <e-indicators> <e-indicator [field]='field' > </e-indicator> </e-indicators> </ejs-chart> this.field = ‘Close’;
Standard deviations of indicator	Property: standardDeviation <ej-chart> <e-indicators> <e-indicator [standardDeviation]='standardDeviation'> </e-indicator> </e-indicators> </ej-chart> this.standardDeviation = 2;	Property: standardDeviation <ejs-chart> <e-indicators> <e-indicator [standardDeviation]='standardDeviation' > </e-indicator> </e-indicators> </ejs-chart> this.standardDeviation = 2;
Slow period of MACD indicator	Property: shortPeriod <ej-chart> <e-indicators> <e-indicator [shortPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.period = 2;	Property: slowPeriod <ejs-chart> <e-indicators> <e-indicator [slowPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 2;
Fast period of MACD indicator	Property: longPeriod <ej-chart> <e-indicators> <e-indicator [longPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.period = 2;	Property: fastPeriod <ejs-chart> <e-indicators> <e-indicator [fastPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 2;
Line style of MACD indicator	Property: macdLine <ej-chart> <e-indicators> <e-indicator [macdLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { width: 2, color: ‘red’};	Property: macdLine <ejs-chart> <e-indicators> <e-indicator [macdLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 3 };
Macd type of indicator	Property: macdType <ej-chart> <e-indicators> <e-indicator [macdType]='type'> </e-indicator> </e-indicators> </ej-chart> this.type = ‘both’;	Property: macdType <ejs-chart> <e-indicators> <e-indicator [macdType]='type' > </e-indicator> </e-indicators> </ejs-chart> this.type = ‘both’
Macd positive color of indicator	Property: Not Applicable	Property: macdType <ejs-chart> <e-indicators> <e-indicator macdPositiveColor='red' > </e-indicator> </e-indicators> </ejs-chart>
Macd negative color of indicator	Property: Not Applicable	Property: macdType <ejs-chart> <e-indicators> <e-indicator macdPositiveColor='red' > </e-indicator> </e-indicators> </ejs-chart>
Bollinger band color of indicator	Property: Not Applicable	Property: macdType <ejs-chart> <e-indicators> <e-indicator bandColor='red' > </e-indicator> </e-indicators> </ejs-chart>
Appearance of lower line in indicator	Property: lowerLine <ej-chart> <e-indicators> <e-indicator [lowerLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { fill: ‘red’, width: 2};	Property: lowerLine <ejs-chart> <e-indicators> <e-indicator [lowerLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 2, dashArray: ‘10, 5’, type: ‘smooth’}
Appearance of upper line in indicator	Property: upperLine <ej-chart> <e-indicators> <e-indicator [upperLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { fill: ‘red’, width: 2};	Property: upperLine <ejs-chart> <e-indicators> <e-indicator [upperLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 2, dashArray: ‘10, 5’, type: ‘smooth’}
Appearance of period line in indicator	Property: periodLine <ej-chart> <e-indicators> <e-indicator [periodLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { fill: ‘red’, width: 2};	Property: periodLine <ejs-chart> <e-indicators> <e-indicator [periodLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 2, dashArray: ‘10, 5’, type: ‘smooth’}
Name of the series for which indicator has to drawn	Property: seriesName <ej-chart> <e-indicators> <e-indicator seriesName='series1'> </e-indicator> </e-indicators> </ej-chart>	Property: type <ejs-chart> <e-indicators> <e-indicator seriesName='series1' > </e-indicator> </e-indicators> </ejs-chart>
Histogram customization	Property: histogram <ej-chart> <e-indicators> <e-indicator [histogram]='series1'> </e-indicator> </e-indicators> </ej-chart> this.series1 = { }	Property: Not Applicable
Enable animation for indicator	Property: enableAnimation <ej-chart> <e-indicators> <e-indicator [enableAnimation]='animation'> </e-indicator> </e-indicators> </ej-chart> this.animation = true	Property: animation.enable <ejs-chart> <e-indicators> <e-indicator [animation]='animation' > </e-indicator> </e-indicators> </ejs-chart> this.animation = { enable: true }
Animation duration for indicator	Property: animationDuration <ej-chart> <e-indicators> <e-indicator [animationDuration]='animation'> </e-indicator> </e-indicators> </ej-chart> this.animation = 10	Property: animation.duration <ejs-chart> <e-indicators> <e-indicator [animation]='animation' > </e-indicator> </e-indicators> </ejs-chart> this.animation = { duration: 1000 }
Animation delay for indicator	Property: Not Applicable	Property: animation.duration <ejs-chart> <e-indicators> <e-indicator [animation]='animation' > </e-indicator> </e-indicators> </ejs-chart> this.animation = { delay: 100 }
Tooltip for indicator	Property: tooltip <ej-chart> <e-indicators> <e-indicator [tooltip]='tooltip'> </e-indicator> </e-indicators> </ej-chart> this.tooltip = { enable: true }	Property: enableTooltip <ejs-chart> <e-indicators> <e-indicator [enableTooltip]='tooltip' > </e-indicator> </e-indicators> </ejs-chart> this.tooltip = true;
Trigger value for indicator	Property: trigger <ej-chart> <e-indicators> <e-indicator [trigger]='trigger'> </e-indicator> </e-indicators> </ej-chart> this.tooltip = 10	Not Applicable
Fill color for indicator	Property: fill <ej-chart> <e-indicators> <e-indicator [fill]='fill'> </e-indicator> </e-indicators> </ej-chart> this.fill = ‘red’	Property: fill <ejs-chart> <e-indicators> <e-indicator [fill]='tooltip' > </e-indicator> </e-indicators> </ejs-chart> this.fill = ‘blue’;
Width for indicator	Property: width <ej-chart> <e-indicators> <e-indicator [width]='width'> </e-indicator> </e-indicators> </ej-chart> this.width = 2	Property: width <ejs-chart> <e-indicators> <e-indicator [width]='width' > </e-indicator> </e-indicators> </ejs-chart> this.width = 2;
xAxis name for indicator	Property: xAxisName <ej-chart> <e-indicators> <e-indicator [xAxisName]='xName'> </e-indicator> </e-indicators> </ej-chart> this.xName = ‘axis’	Property: xAxisName <ejs-chart> <e-indicators> <e-indicator [xAxisName]='xAxis' > </e-indicator> </e-indicators> </ejs-chart> this.xAxis = ‘axis’;
yAxis name for indicator	Property: yAxisName <ej-chart> <e-indicators> <e-indicator [yAxisName]='yName'> </e-indicator> </e-indicators> </ej-chart> this.yName = ‘axis’	Property: yAxisName <ejs-chart> <e-indicators> <e-indicator [yAxisName]='yAxis' > </e-indicator> </e-indicators> </ejs-chart> this.yAxis = ‘axis’;
xAxis name for indicator	Property: xAxisName <ej-chart> <e-indicators> <e-indicator [xAxisName]='xName'> </e-indicator> </e-indicators> </ej-chart> this.xName = ‘axis’	Property: xAxisName <ejs-chart> <e-indicators> <e-indicator [xAxisName]='xAxis' > </e-indicator> </e-indicators> </ejs-chart> this.xAxis = ‘axis’;
dataSource for indicator	Property: points <ej-chart> <e-indicators> <e-indicator [points]='points'> </e-indicator> </e-indicators> </ej-chart> this.points = []	Property: dataSource <ejs-chart> <e-indicators> <e-indicator [dataSource]='data' > </e-indicator> </e-indicators> </ejs-chart> this.data = ‘axis’;

Legend

Behavior	API in Essential JS 1	API in Essential JS 2
Visibility of legend	Property: legend.visible <ej-chart [legend]='legend'> </ej-chart> this.legend = { visible: true }	Property: legend.visible <ejs-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> this.legend = { padding: 8 }
Alignment of legend	Property: legend.alignment <ej-chart [legend]='legend'> </ej-chart> this.legend = { alignment: ‘near’ }	Property: legend.alignment <ejs-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> this.legend = { shapePadding: 10 }
Background of legend	Property: legend.background <ej-chart [legend]='legend'> </ej-chart> this.legend = { background: ‘transparent’ } }	Property: legend.background <ejs-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> 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-chart [legend]='legend'> </ejs-chart> this.legend = { textStyle:{ textOverFlow: ‘Trim’ } }
Maximum text width above to trim	Property: legend.textWidth <ej-chart [legend]='legend'> </ej-chart> this.legend = { textWidth: 50 }	Property: Not Applicable
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

PrimaryXAxis

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: primaryXAxis <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { }	Property: primaryXAxis <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { }
Alternate grid band for axis	Property: primaryXAxis.alternateGridBand <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { alternateGridBand: { even:{ fill: ‘black’ }} }	Property: Not Applicable
Axis line crosses value	Property: primaryXAxis.crossesAt <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { crossesAt: 3 }	Property: primaryXAxis.crossesAt <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crossesAt: 3 }
Axis name in which axis line cross	Property: primaryXAxis.crossInAxis <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { crossInAxis: ‘axis’ }	Property: primaryXAxis.crossInAxis <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crossInAxis: ‘axis’ }
Axis elements placing with axis line	Property: primaryXAxis.showNextToAxisLine <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { showNextToAxisLine: true }	Property: primaryXAxis.placeNextToAxisLine <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { placeNextToAxisLine: true }
Axis line color	Property: primaryXAxis.axisLine.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { axisLine: { color: ‘red’ } }	Property: primaryXAxis.lineStyle.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { lineStyle: { color: ‘red’ } }
Axis line dashArray	Property: primaryXAxis.axisLine.dashArray <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { axisLine: { dashArray: ‘10, 5’ } }	Property: primaryXAxis.lineStyle.dashArray <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { lineStyle: { dashArray: ‘10, 5’ } }
Visibility of primaryXAxis	Property: primaryXAxis.axisLine.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { axisLine: { visible: true } }	Property: primaryXAxis.visible <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { visible: true }
Column index of primaryXAxis	Property: primaryXAxis.columnIndex <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { columnIndex: 2 }	Property: primaryXAxis.columnIndex <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { columnIndex: 2 }
span of primaryXAxis	Property: primaryXAxis.columnSpan <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { columnSpan: 2 }	Property: primaryXAxis.span <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { span: 2 }
crosshair visibility of primaryXAxis	Property: primaryXAxis.crosshairLabel <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { crosshairLabel : { visible: true } }	Property: primaryXAxis.crosshairTooltip <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crosshairTooltip: { enable: true } }
crosshair fill of primaryXAxis	Property: Not Applicable	Property: primaryXAxis.crosshairTooltip <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crosshairTooltip: { fill: ‘blue’ } }
crosshair label text style of primaryXAxis	Property: Not Applicable	Property: primaryXAxis.crosshairTooltip <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crosshairTooltip: { labelStyle: { } } }
Desired interval of primaryXAxis	Property: primaryXAxis.desiredIntervals <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { desiredIntervals: 4 }	Property: primaryXAxis.desiredIntervals <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { desiredIntervals: 4 }
Edge label placements of primaryXAxis	Property: primaryXAxis.edgeLabelPlacement <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { egdeLabelPlacement: ‘Shift’ }	Property: primaryXAxis.edgeLabelPlacement <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { edgeLabelPlacement: ‘Hide’ }
Enabling trim of primaryXAxis	Property: primaryXAxis.enableTrim <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { enableTrim: true }	Property: primaryXAxis.enableTrim <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { enableTrim: true }
Enabling auto interval while zooming	Property: primaryXAxis.enableAutoIntervalOnZooming <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { enableAutoIntervalOnZooming: true }	Property: primaryXAxis.enableAutoIntervalOnZooming <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { enableAutoIntervalOnZooming: true }
Font style of primaryXAxis	Property: primaryXAxis.font <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { font: { } }	Property: primaryXAxis.labelStyle <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelStyle:{ } }
Enabling indexed of primaryXAxis	Property: primaryXAxis.indexed <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { indexed: true}	Property: primaryXAxis.indexed <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { indexed: true }
IntervalType of primaryXAxis	Property: primaryXAxis.intervalType <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { intervalType: ‘Auto’ }	Property: primaryXAxis.intervalType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { intervalType: ‘Auto’ }
Enabling inversed of primaryXAxis	Property: primaryXAxis.isInversed <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { isInversed: true }	Property: primaryXAxis.isInversed <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { isInversed: true }
Custom label format of primaryXAxis	Property: primaryXAxis.isInversed <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelFormat: ‘{value}K’ }	Property: primaryXAxis.labelFormat <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {labelFormat: ‘{value}K’ }
Label intersect action of primaryXAxis	Property: primaryXAxis.labelIntersectAction <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelIntersectAction: ‘trim’ }	Property: primaryXAxis.labelIntersectAction <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {labelIntersectAction: ‘Trim’ }
Label position of primaryXAxis	Property: primaryXAxis.labelPosition <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelPosition: ‘Inside’ }	Property: primaryXAxis.labelPosition <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {labelPosition: ‘Inside’ }
Label placement of primaryXAxis	Property: primaryXAxis.labelPlacement <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelPlacements: ‘OnTicks’ }	Property: primaryXAxis.labelPlacement <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {lablePlacement: ‘OnTicks’ }
Label alignment of primaryXAxis	Property: primaryXAxis.alignment <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { alignment: ‘middle’ }	Property: Not Applicable
Label rotation of primaryXAxis	Property: primaryXAxis.labelRotation <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelRotation: 45 }	Property: primaryXAxis.labelRotation <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelRotation: 45 }
Log base of primaryXAxis	Property: primaryXAxis.logBase <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { logBase: 4 }	Property: primaryXAxis.logBase <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { logBase: 5 }
Log base of primaryXAxis	Property: primaryXAxis.logBase <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { logBase: 4 }	Property: primaryXAxis.logBase <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { logBase: 5 }
Major grid line width of primaryXAxis	Property: primaryXAxis.majorGridLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { width: 2 } }	Property: primaryXAxis.majorGridLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorGridLines: { width: 2} }
Major grid line color of primaryXAxis	Property: primaryXAxis.majorGridLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { color: ‘red’ } }	Property: primaryXAxis.majorGridLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorGridLines: { color: ‘red’} }
Major grid line dash array of primaryXAxis	Property: primaryXAxis.majorGridLines.dashArray <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { dashArray: ‘10, 5’ } }	Property: primaryXAxis.majorGridLines.dashArray <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorGridLines: { dashArray: ‘10, 5’} }
Major grid line opacity of primaryXAxis	Property: primaryXAxis.majorGridLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { opacity: 0.7 } }	Property: Not Applicable
Major grid line visibility of primaryXAxis	Property: primaryXAxis.majorGridLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { visible: true } }	Property: Not Applicable
minor grid line width of primaryXAxis	Property: primaryXAxis.minorGridLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { width: 2 } }	Property: primaryXAxis.minorGridLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorGridLines: { width: 2} }
minor grid line color of primaryXAxis	Property: primaryXAxis.minorGridLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { color: ‘red’ } }	Property: primaryXAxis.minorGridLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorGridLines: { color: ‘red’} }
minor grid line dash array of primaryXAxis	Property: primaryXAxis.minorGridLines.dashArray <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { dashArray: ‘10, 5’ } }	Property: primaryXAxis.minorGridLines.dashArray <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorGridLines: { dashArray: ‘10, 5’} }
minor grid line opacity of primaryXAxis	Property: primaryXAxis.minorGridLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { opacity: 0.7 } }	Property: Not Applicable
minor grid line visibility of primaryXAxis	Property: primaryXAxis.minorGridLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { visible: true } }	Property: Not Applicable
major Tick line width of primaryXAxis	Property: primaryXAxis.majorTickLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { width: 2 } }	Property: primaryXAxis.majorTickLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorTickLines: { width: 2} }
major Tick line color of primaryXAxis	Property: primaryXAxis.majorTickLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { color: ‘red’ } }	Property: primaryXAxis.majorTickLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorTickLines: { color: ‘red’} }
major Tick line opacity of primaryXAxis	Property: primaryXAxis.majorTickLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { opacity: 0.7 } }	Property: Not Applicable
major Tick line visibility of primaryXAxis	Property: primaryXAxis.majorTickLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { visible: true } }	Property: Not Applicable
minor Tick line width of primaryXAxis	Property: primaryXAxis.minorTickLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { width: 2 } }	Property: primaryXAxis.minorTickLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorTickLines: { width: 2} }
minor Tick line color of primaryXAxis	Property: primaryXAxis.minorTickLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { color: ‘red’ } }	Property: primaryXAxis.minorTickLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorTickLines: { color: ‘red’} }
minor Tick line opacity of primaryXAxis	Property: primaryXAxis.minorTickLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { opacity: 0.7 } }	Property: Not Applicable
minor Tick line visibility of primaryXAxis	Property: primaryXAxis.minorTickLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { visible: true } }	Property: Not Applicable
Maximum labels of primaryXAxis	Property: primaryXAxis.maximumLabels <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { maximumLabels: 4} }	Property: primaryXAxis.maximumLabels <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {maximumLabels: 4}
Maximum label width of primaryXAxis	Property: primaryXAxis.maximumLabelWidth <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { maximumLabels: 15} }	Property: primaryXAxis.maximumLabelWidth <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {maximumLabelWidth:15}
Minor ticks per interval of primaryXAxis	Property: primaryXAxis.minorTicksPerInterval <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTicksPerInterval: 5} }	Property: primaryXAxis.minorTicksPerInterval <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {minorTicksPerInterval:5}
Name of primaryXAxis	Property: primaryXAxis.name <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { name: ‘axis’} }	Property: primaryXAxis.name <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {name:‘axis’ }
Plot offset of primaryXAxis	Property: primaryXAxis.plotOffset <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { plotOffset: 10} }	Property: primaryXAxis.name <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { plotOffset:10 }
Orientation of primaryXAxis	Property: primaryXAxis.plotOffset <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { orientation: ‘Horizontal’ } }	Property: primaryXAxis.name <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { orientation: ‘horizontal’ }
Minimum of primaryXAxis	Property: primaryXAxis.range.minimum <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { range: { minimum: 10} } }	Property: primaryXAxis.minimum <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minimum: 10 }
maximum of primaryXAxis	Property: primaryXAxis.range.maximum <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { range: { maximum: 10} } }	Property: primaryXAxis.maximum <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { maximum: 1000 }
interval of primaryXAxis	Property: primaryXAxis.range.interval <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { range: { interval: 10} } }	Property: primaryXAxis.interval <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { interval: 10 }
Range padding of primaryXAxis	Property: primaryXAxis.rangePadding <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { rangePadding: ‘Round’ }	Property: primaryXAxis.rangePadding <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { rangePadding: ‘Normal’ }
Rounding places of primaryXAxis	Property: primaryXAxis.roundingPlaces <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { roundingPlaces: 3 }	Property: primaryXAxis.labelFormat <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelFormat: ‘n3’ }
Tick position of primaryXAxis	Property: primaryXAxis.tickPosition <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { tickPosition: ‘Inside’ }	Property: primaryXAxis.tickPosition <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { tickPosition: ‘Inside’ }
Scrollbar settings of primaryXAxis	Property: primaryXAxis.scrollBarSettings <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { scrollBarSettings: { } }	Property: Not Applicable.
Value type of primaryXAxis	Property: primaryXAxis.valueType <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { valueType: ‘Category’ }	Property: primaryXAxis.valueType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { valueType: ‘Category’ }
Visible of primaryXAxis	Property: primaryXAxis.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { visible: true }	Property: primaryXAxis.visible <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { visible: true }
Zoom factor of primaryXAxis	Property: primaryXAxis.zoomFactor <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { zoomFactor: 0.7 }	Property: primaryXAxis.zoomFactor <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { zoomFactor: 0,.7 }
Zoom position of primaryXAxis	Property: primaryXAxis.zoomPosition <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { zoomPosition: 0.7 }	Property: primaryXAxis.zoomPosition <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { zoomPosition: 0.7 }
Label border of primaryXAxis	Property: primaryXAxis.labelBorder <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelBorder: { width: 2, color: ‘red’ } }	Property: primaryXAxis.labelBorder <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelBorder: { color: ‘red’, width: 2} }
Title of primaryXAxis	Property: primaryXAxis.title <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { title: ’ axis title’ }	Property: primaryXAxis.title <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { title: ‘axis title’ }
skeleton of primaryXAxis	Property: primaryXAxis.skeleton <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { skeleton: ‘yMd’ }	Property: primaryXAxis.skeleton <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { skeleton: ‘yMd’ }
skeletonType of primaryXAxis	Property: primaryXAxis.skeletonType <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { skeletonType: ‘Date’ }	Property: primaryXAxis.skeletonType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { skeletonType: ‘Date’ }
Stripline of primaryXAxis	Property: primaryXAxis.stripLines <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { stripLines: [ { }] }	Property: primaryXAxis.skeletonType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { stripLines: [ { }]}
Multilevel labels of primaryXAxis	Property: primaryXAxis.multiLevelLabels <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { multiLevelLabels: [ { }] }	Property: primaryXAxis.multiLevelLabels <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { multiLevelLabels: [ { }]}

PrimaryYAxis

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: primaryYAxis <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { }	Property: primaryYAxis <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { }
Alternate grid band for axis	Property: primaryYAxis.alternateGridBand <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { alternateGridBand: { even:{ fill: ‘black’ }} }	Property: Not Applicable
Axis line crosses value	Property: primaryYAxis.crossesAt <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { crossesAt: 3 }	Property: primaryYAxis.crossesAt <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crossesAt: 3 }
Axis name in which axis line cross	Property: primaryYAxis.crossInAxis <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { crossInAxis: ‘axis’ }	Property: primaryYAxis.crossInAxis <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crossInAxis: ‘axis’ }
Axis elements placing with axis line	Property: primaryYAxis.showNextToAxisLine <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { showNextToAxisLine: true }	Property: primaryYAxis.placeNextToAxisLine <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { placeNextToAxisLine: true }
Axis line color	Property: primaryYAxis.axisLine.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { axisLine: { color: ‘red’ } }	Property: primaryYAxis.lineStyle.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { lineStyle: { color: ‘red’ } }
Axis line dashArray	Property: primaryYAxis.axisLine.dashArray <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { axisLine: { dashArray: ‘10, 5’ } }	Property: primaryYAxis.lineStyle.dashArray <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { lineStyle: { dashArray: ‘10, 5’ } }
Visibility of primaryYAxis	Property: primaryYAxis.axisLine.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { axisLine: { visible: true } }	Property: primaryYAxis.visible <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { visible: true }
Column index of primaryYAxis	Property: primaryYAxis.columnIndex <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { columnIndex: 2 }	Property: primaryYAxis.columnIndex <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { columnIndex: 2 }
span of primaryYAxis	Property: primaryYAxis.columnSpan <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { columnSpan: 2 }	Property: primaryYAxis.span <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { span: 2 }
crosshair visibility of primaryYAxis	Property: primaryYAxis.crosshairLabel <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { crosshairLabel : { visible: true } }	Property: primaryYAxis.crosshairTooltip <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crosshairTooltip: { enable: true } }
crosshair fill of primaryYAxis	Property: Not Applicable	Property: primaryYAxis.crosshairTooltip <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crosshairTooltip: { fill: ‘blue’ } }
crosshair label text style of primaryYAxis	Property: Not Applicable	Property: primaryYAxis.crosshairTooltip <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crosshairTooltip: { labelStyle: { } } }
Desired interval of primaryYAxis	Property: primaryYAxis.desiredIntervals <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { desiredIntervals: 4 }	Property: primaryYAxis.desiredIntervals <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { desiredIntervals: 4 }
Edge label placements of primaryYAxis	Property: primaryYAxis.edgeLabelPlacement <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { egdeLabelPlacement: ‘Shift’ }	Property: primaryYAxis.edgeLabelPlacement <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { edgeLabelPlacement: ‘Hide’ }
Enabling trim of primaryYAxis	Property: primaryYAxis.enableTrim <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { enableTrim: true }	Property: primaryYAxis.enableTrim <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { enableTrim: true }
Enabling auto interval while zooming	Property: primaryYAxis.enableAutoIntervalOnZooming <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { enableAutoIntervalOnZooming: true }	Property: primaryYAxis.enableAutoIntervalOnZooming <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { enableAutoIntervalOnZooming: true }
Font style of primaryYAxis	Property: primaryYAxis.font <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { font: { } }	Property: primaryYAxis.labelStyle <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelStyle:{ } }
Enabling indexed of primaryYAxis	Property: primaryYAxis.indexed <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { indexed: true}	Property: primaryYAxis.indexed <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { indexed: true }
IntervalType of primaryYAxis	Property: primaryYAxis.intervalType <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { intervalType: ‘Auto’ }	Property: primaryYAxis.intervalType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { intervalType: ‘Auto’ }
Enabling inversed of primaryYAxis	Property: primaryYAxis.isInversed <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { isInversed: true }	Property: primaryYAxis.isInversed <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { isInversed: true }
Custom label format of primaryYAxis	Property: primaryYAxis.isInversed <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelFormat: ‘{value}K’ }	Property: primaryYAxis.labelFormat <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {labelFormat: ‘{value}K’ }
Label intersect action of primaryYAxis	Property: primaryYAxis.labelIntersectAction <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelIntersectAction: ‘trim’ }	Property: primaryYAxis.labelIntersectAction <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {labelIntersectAction: ‘Trim’ }
Label position of primaryYAxis	Property: primaryYAxis.labelPosition <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelPosition: ‘Inside’ }	Property: primaryYAxis.labelPosition <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {labelPosition: ‘Inside’ }
Label placement of primaryYAxis	Property: primaryYAxis.labelPlacement <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelPlacements: ‘OnTicks’ }	Property: primaryYAxis.labelPlacement <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {lablePlacement: ‘OnTicks’ }
Label alignment of primaryYAxis	Property: primaryYAxis.alignment <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { alignment: ‘middle’ }	Property: Not Applicable
Label rotation of primaryYAxis	Property: primaryYAxis.labelRotation <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelRotation: 45 }	Property: primaryYAxis.labelRotation <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelRotation: 45 }
Log base of primaryYAxis	Property: primaryYAxis.logBase <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { logBase: 4 }	Property: primaryYAxis.logBase <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { logBase: 5 }
Log base of primaryYAxis	Property: primaryYAxis.logBase <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { logBase: 4 }	Property: primaryYAxis.logBase <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { logBase: 5 }
Major grid line width of primaryYAxis	Property: primaryYAxis.majorGridLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { width: 2 } }	Property: primaryYAxis.majorGridLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorGridLines: { width: 2} }
Major grid line color of primaryYAxis	Property: primaryYAxis.majorGridLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { color: ‘red’ } }	Property: primaryYAxis.majorGridLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorGridLines: { color: ‘red’} }
Major grid line dash array of primaryYAxis	Property: primaryYAxis.majorGridLines.dashArray <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { dashArray: ‘10, 5’ } }	Property: primaryYAxis.majorGridLines.dashArray <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorGridLines: { dashArray: ‘10, 5’} }
Major grid line opacity of primaryYAxis	Property: primaryYAxis.majorGridLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { opacity: 0.7 } }	Property: Not Applicable
Major grid line visibility of primaryYAxis	Property: primaryYAxis.majorGridLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { visible: true } }	Property: Not Applicable
minor grid line width of primaryYAxis	Property: primaryYAxis.minorGridLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { width: 2 } }	Property: primaryYAxis.minorGridLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorGridLines: { width: 2} }
minor grid line color of primaryYAxis	Property: primaryYAxis.minorGridLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { color: ‘red’ } }	Property: primaryYAxis.minorGridLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorGridLines: { color: ‘red’} }
minor grid line dash array of primaryYAxis	Property: primaryYAxis.minorGridLines.dashArray <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { dashArray: ‘10, 5’ } }	Property: primaryYAxis.minorGridLines.dashArray <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorGridLines: { dashArray: ‘10, 5’} }
minor grid line opacity of primaryYAxis	Property: primaryYAxis.minorGridLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { opacity: 0.7 } }	Property: Not Applicable
minor grid line visibility of primaryYAxis	Property: primaryYAxis.minorGridLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { visible: true } }	Property: Not Applicable
major Tick line width of primaryYAxis	Property: primaryYAxis.majorTickLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { width: 2 } }	Property: primaryYAxis.majorTickLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorTickLines: { width: 2} }
major Tick line color of primaryYAxis	Property: primaryYAxis.majorTickLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { color: ‘red’ } }	Property: primaryYAxis.majorTickLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorTickLines: { color: ‘red’} }
major Tick line opacity of primaryYAxis	Property: primaryYAxis.majorTickLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { opacity: 0.7 } }	Property: Not Applicable
major Tick line visibility of primaryYAxis	Property: primaryYAxis.majorTickLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { visible: true } }	Property: Not Applicable
minor Tick line width of primaryYAxis	Property: primaryYAxis.minorTickLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { width: 2 } }	Property: primaryYAxis.minorTickLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorTickLines: { width: 2} }
minor Tick line color of primaryYAxis	Property: primaryYAxis.minorTickLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { color: ‘red’ } }	Property: primaryYAxis.minorTickLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorTickLines: { color: ‘red’} }
minor Tick line opacity of primaryYAxis	Property: primaryYAxis.minorTickLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { opacity: 0.7 } }	Property: Not Applicable
minor Tick line visibility of primaryYAxis	Property: primaryYAxis.minorTickLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { visible: true } }	Property: Not Applicable
Maximum labels of primaryYAxis	Property: primaryYAxis.maximumLabels <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { maximumLabels: 4} }	Property: primaryYAxis.maximumLabels <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {maximumLabels: 4}
Maximum label width of primaryYAxis	Property: primaryYAxis.maximumLabelWidth <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { maximumLabels: 15} }	Property: primaryYAxis.maximumLabelWidth <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {maximumLabelWidth:15}
Minor ticks per interval of primaryYAxis	Property: primaryYAxis.minorTicksPerInterval <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTicksPerInterval: 5} }	Property: primaryYAxis.minorTicksPerInterval <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {minorTicksPerInterval:5}
Name of primaryYAxis	Property: primaryYAxis.name <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { name: ‘axis’} }	Property: primaryYAxis.name <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {name:‘axis’ }
Plot offset of primaryYAxis	Property: primaryYAxis.plotOffset <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { plotOffset: 10} }	Property: primaryYAxis.name <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { plotOffset:10 }
Orientation of primaryYAxis	Property: primaryYAxis.plotOffset <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { orientation: ‘Horizontal’ } }	Property: primaryYAxis.name <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { orientation: ‘horizontal’ }
Minimum of primaryYAxis	Property: primaryYAxis.range.minimum <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { range: { minimum: 10} } }	Property: primaryYAxis.minimum <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minimum: 10 }
maximum of primaryYAxis	Property: primaryYAxis.range.maximum <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { range: { maximum: 10} } }	Property: primaryYAxis.maximum <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { maximum: 1000 }
interval of primaryYAxis	Property: primaryYAxis.range.interval <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { range: { interval: 10} } }	Property: primaryYAxis.interval <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { interval: 10 }
Range padding of primaryYAxis	Property: primaryYAxis.rangePadding <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { rangePadding: ‘Round’ }	Property: primaryYAxis.rangePadding <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { rangePadding: ‘Normal’ }
Rounding places of primaryYAxis	Property: primaryYAxis.roundingPlaces <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { roundingPlaces: 3 }	Property: primaryYAxis.labelFormat <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelFormat: ‘n3’ }
Tick position of primaryYAxis	Property: primaryYAxis.tickPosition <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { tickPosition: ‘Inside’ }	Property: primaryYAxis.tickPosition <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { tickPosition: ‘Inside’ }
Scrollbar settings of primaryYAxis	Property: primaryYAxis.scrollBarSettings <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { scrollBarSettings: { } }	Property: Not Applicable.
Value type of primaryYAxis	Property: primaryYAxis.valueType <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { valueType: ‘Category’ }	Property: primaryYAxis.valueType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { valueType: ‘Category’ }
Visible of primaryYAxis	Property: primaryYAxis.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { visible: true }	Property: primaryYAxis.visible <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { visible: true }
Zoom factor of primaryYAxis	Property: primaryYAxis.zoomFactor <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { zoomFactor: 0.7 }	Property: primaryYAxis.zoomFactor <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { zoomFactor: 0,.7 }
Zoom position of primaryYAxis	Property: primaryYAxis.zoomPosition <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { zoomPosition: 0.7 }	Property: primaryYAxis.zoomPosition <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { zoomPosition: 0.7 }
Label border of primaryYAxis	Property: primaryYAxis.labelBorder <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelBorder: { width: 2, color: ‘red’ } }	Property: primaryYAxis.labelBorder <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelBorder: { color: ‘red’, width: 2} }
Title of primaryYAxis	Property: primaryYAxis.title <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { title: ’ axis title’ }	Property: primaryYAxis.title <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { title: ‘axis title’ }
skeleton of primaryYAxis	Property: primaryYAxis.skeleton <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { skeleton: ‘yMd’ }	Property: primaryYAxis.skeleton <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { skeleton: ‘yMd’ }
skeletonType of primaryYAxis	Property: primaryYAxis.skeletonType <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { skeletonType: ‘Date’ }	Property: primaryYAxis.skeletonType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { skeletonType: ‘Date’ }
Stripline of primaryYAxis	Property: primaryYAxis.stripLines <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { stripLines: [ { }] }	Property: primaryYAxis.skeletonType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { stripLines: [ { }]}
Multilevel labels of primaryYAxis	Property: primaryYAxis.multiLevelLabels <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { multiLevelLabels: [ { }] }	Property: primaryYAxis.multiLevelLabels <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { multiLevelLabels: [ { }]}

Axes

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: axis <ej-chart> <e-axes> <e-axis> </e-axis> </e-axes> </ej-chart>	Property: axis <ejs-chart> <e-axes> <e-axis> </e-axis> </e-axes> </ejs-chart>
Alternate grid band for axis	Property: axis.alternateGridBand <ej-chart> <e-axes> <e-axis [alternateGridBand]='band'> </e-axis> </e-axes> </ej-chart> this.band = { even:{ fill: ‘black’ } }	Property: Not Applicable
Axis line crosses value	Property: axis.crossesAt <ej-chart> <e-axes> <e-axis [crossesAt]='cross'> </e-axis> </e-axes> </ej-chart> this.cross = 3 }	Property: axis.crossesAt <ejs-chart> <e-axes> <e-axis [crossesAt]='cross'> </e-axis> </e-axes> </ejs-chart> this.cross = 3
Axis name in which axis line cross	Property: axis.crossInAxis <ej-chart> <e-axes> <e-axis crossInAxis='axis'> </e-axis> </e-axes> </ej-chart>	Property: axis.crossInAxis <ejs-chart> <e-axes> <e-axis crossInAxis='axis'> </e-axis> </e-axes> </ejs-chart>
Axis elements placing with axis line	Property: axis.showNextToAxisLine <ej-chart> <e-axes> <e-axis [showNextToAxisLine]='value'> </e-axis> </e-axes> </ej-chart> this.value = true }	Property: axis.placeNextToAxisLine <ejs-chart> <e-axes> <e-axis [placeNextToAxisLine]='place'> </e-axis> </e-axes> </ejs-chart> this.place = true
Axis line color	Property: axis.axisLine.color <ej-chart> <e-axes> <e-axis [axisLine]='line'> </e-axis> </e-axes> </ej-chart> this.line = { color: ‘red’ }	Property: axis.lineStyle.color <ejs-chart> <e-axes> <e-axis [lineStyle]='line'> </e-axis> </e-axes> </ejs-chart> this.line = { color: ‘red’ }
Axis line dashArray	Property: axis.axisLine.dashArray <ej-chart> <e-axes> <e-axis [axisLine]=line'> </e-axis> </e-axes> </ej-chart> this.line = { dashArray: ‘10, 5’ }	Property: axis.lineStyle.dashArray <ejs-chart> <e-axes> <e-axis [lineStyle]='line'> </e-axis> </e-axes> </ejs-chart> this.line = dashArray: ‘10, 5’ }
Visibility of axis	Property: axis.axisLine.visible <ej-chart> <e-axes> <e-axis [axisLine]='line'> </e-axis> </e-axes> </ej-chart> this.line = { visible: true } }	Property: axis.visible <ejs-chart> <e-axes> <e-axis [visible]='visible'> </e-axis> </e-axes> </ejs-chart> this.visible: true
ColumnIndex of axis	Property: axis.columnIndex <ej-chart> <e-axes> <e-axis [columnIndex]='column'> </e-axis> </e-axes> </ej-chart> this.column = 2	Property: axis.columnIndex <ejs-chart> <e-axes> <e-axis [columnIndex]='column'> </e-axis> </e-axes> </ejs-chart> this.column = 2
span of axis	Property: axis.columnSpan <ej-chart> <e-axes> <e-axis [columnSpan]='span'> </e-axis> </e-axes> </ej-chart> this.span = 2	Property: axis.span <ejs-chart> <e-axes> <e-axis [span]='span'> </e-axis> </e-axes> </ejs-chart> this.span = 2
crosshair visibility of axis	Property: axis.crosshairLabel <ej-chart> <e-axes> <e-axis [crosshairLabel]='label'> </e-axis> </e-axes> </ej-chart> this.label = { visible: true }	Property: axis.crosshairTooltip <ejs-chart> <e-axes> <e-axis [crosshairTooltip]='crosshair'> </e-axis> </e-axes> </ejs-chart> this.crosshair = { enable: true }
crosshair fill of axis	Property: Not Applicable	Property: axis.crosshairTooltip.fill <ejs-chart> <e-axes> <e-axis [crosshairTooltip]='tooltip'> </e-axis> </e-axes> </ejs-chart> this.tooltip = { fill: ‘blue’ }
crosshair label text style of axis	Property: Not Applicable	Property: axis.crosshairTooltip <ejs-chart> <e-axes> <e-axis [crosshairTooltip]='tooltip'> </e-axis> </e-axes> </ejs-chart> this.tooltip = { labelStyle: { } }
Desired interval of axis	Property: axis.desiredIntervals <ej-chart> <e-axes> <e-axis [desiredIntervals]='interval'> </e-axis> </e-axes> </ej-chart> this.interval = 4	Property: axis.desiredIntervals <ejs-chart> <e-axes> <e-axis [desiredIntervals]='interval'> </e-axis> </e-axes> </ejs-chart> this.interval = 4
Edge label placements of axis	Property: axis.edgeLabelPlacement <ej-chart> <e-axes> <e-axis edgeLabelPlacement='Shift'> </e-axis> </e-axes> </ej-chart>	Property: axis.edgeLabelPlacement <ejs-chart> <e-axes> <e-axis edgeLabelPlacement='Shift'> </e-axis> </e-axes> </ejs-chart>
Enabling trim of axis	Property: axis.enableTrim <ej-chart> <e-axes> <e-axis [enableTrim]='trim'> </e-axis> </e-axes> </ej-chart> this.trim = true	Property: axis.enableTrim <ejs-chart> <e-axes> <e-axis [enableTrim]='trim'> </e-axis> </e-axes> </ejs-chart> this.trim = true
Enabling auto interval while zooming	Property: axis.enableAutoIntervalOnZooming <ej-chart> <e-axes> <e-axis [enableAutoIntervalOnZooming]='zoom'> </e-axis> </e-axes> </ej-chart> this.zoom = true	Property: axis.enableAutoIntervalOnZooming <ejs-chart> <e-axes> <e-axis [enableAutoIntervalOnZooming]='zoom'> </e-axis> </e-axes> </ejs-chart> this.zoom = true
Font style of axis	Property: axis.font <ej-chart> <e-axes> <e-axis [font]='font'> </e-axis> </e-axes> </ej-chart> this.font = { }	Property: axis.labelStyle <ejs-chart> <e-axes> <e-axis [labelStyle]='label'> </e-axis> </e-axes> </ejs-chart> this.label = { }
Enabling indexed of axis	Property: axis.indexed <ej-chart> <e-axes> <e-axis [indexed]='indexed> </e-axis> </e-axes> </ej-chart> this.indexed = true	Property: axis.indexed <ejs-chart> <e-axes> <e-axis [indexed]='indexed'> </e-axis> </e-axes> </ejs-chart> this.indexed = true
IntervalType of axis	Property: axis.intervalType <ej-chart> <e-axes> <e-axis intervalType='Years'> </e-axis> </e-axes> </ej-chart>	Property: axis.intervalType <ejs-chart> <e-axes> <e-axis intervalType='Years'> </e-axis> </e-axes> </ejs-chart>
Enabling inversed of axis	Property: axis.isInversed <ej-chart> <e-axes> <e-axis [isInversed]='inverse'> </e-axis> </e-axes> </ej-chart> this.inverse = true	Property: axis.isInversed <ejs-chart> <e-axes> <e-axis [isInversed]='inverse'> </e-axis> </e-axes> </ejs-chart> this.inverse = true
Custom label format of axis	Property: axis.isInversed <ej-chart> <e-axes> <e-axis labelFormat='{value}K'> </e-axis> </e-axes> </ej-chart>	Property: axis.labelFormat <ejs-chart> <e-axes> <e-axis labelFormat='{value}K'> </e-axis> </e-axes> </ejs-chart>
Label intersect action of axis	Property: axis.labelIntersectAction <ej-chart> <e-axes> <e-axis labelIntersectAction='trim'> </e-axis> </e-axes> </ej-chart>	Property: axis.labelIntersectAction <ejs-chart> <e-axes> <e-axis labelIntersectAction='Trim'> </e-axis> </e-axes> </ejs-chart>
Label position of axis	Property: axis.labelPosition <ej-chart> <e-axes> <e-axis labelPosition='Inside'> </e-axis> </e-axes> </ej-chart>	Property: axis.labelPosition <ejs-chart> <e-axes> <e-axis labelPosition='Outside'> </e-axis> </e-axes> </ejs-chart>
Label placement of axis	Property: axis.labelPlacement <ej-chart> <e-axes> <e-axis labelPlacement='OnTicks'> </e-axis> </e-axes> </ej-chart>	Property: axis.labelPlacement <ejs-chart> <e-axes> <e-axis labelPlacement='BetweenTicks'> </e-axis> </e-axes> </ejs-chart>
Label alignment of axis	Property: axis.alignment <ej-chart> <e-axes> <e-axis labelAlignment='middle'> </e-axis> </e-axes> </ej-chart>	Property: Not Applicable
Label rotation of axis	Property: axis.labelRotation <ej-chart> <e-axes> <e-axis [labelRotation]='rotation'> </e-axis> </e-axes> </ej-chart> this.rotation = 45	Property: axis.labelRotation <ejs-chart> <e-axes> <e-axis [labelRotatioon]='rotation'> </e-axis> </e-axes> </ejs-chart> this.rotation = 45
Log base of axis	Property: axis.logBase <ej-chart> <e-axes> <e-axis [logBase]='log'> </e-axis> </e-axes> </ej-chart> this.log = 4	Property: axis.logBase <ejs-chart> <e-axes> <e-axis [logBase]='log'> </e-axis> </e-axes> </ejs-chart> this.log = 5
Major grid line width of axis	Property: axis.majorGridLines.width <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this. majorGridLines = { width: 2 }	Property: axis.majorGridLines.width <ejs-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ejs-chart> this.majorGridLines = { width: 2}
Major grid line color of axis	Property: axis.majorGridLines.color <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines = { color: ‘red’ }	Property: axis.majorGridLines.color <ejs-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ejs-chart> this.majorGridLines = { color: ‘red’}
Major grid line dash array of axis	Property: axis.majorGridLines.dashArray <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines = { dashArray: ‘10, 5’ }	Property: axis.majorGridLines.dashArray <ejs-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ejs-chart> this.majorGridLines = { dashArray: ‘10, 5’}
Major grid line opacity of axis	Property: axis.majorGridLines.opacity <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines= { opacity: 0.7 }	Property: Not Applicable
Major grid line visibility of axis	Property: axis.majorGridLines.visible <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines = { visible: true }	Property: Not Applicable
minor grid line width of axis	Property: axis.minorGridLines.width <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { width: 2 }	Property: axis.minorGridLines.width <ejs-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ejs-chart> this.minorGridLines: { width: 2 }
minor grid line color of axis	Property: axis.minorGridLines.color <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines= { color: ‘red’ }	Property: axis.minorGridLines.color <ejs-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ejs-chart> this. minorGridLines = { color: ‘red’ }
minor grid line dash array of axis	Property: axis.minorGridLines.dashArray <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { dashArray: ‘10, 5’ }	Property: axis.minorGridLines.dashArray <ejs-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ejs-chart> this.minorGridLines = { dashArray: ‘10, 5’}
minor grid line opacity of axis	Property: axis.minorGridLines.opacity <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { opacity: 0.7 }	Property: Not Applicable
minor grid line visibility of axis	Property: axis.minorGridLines.visible <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { visible: true }	Property: Not Applicable
major Tick line width of axis	Property: axis.majorTickLines.width <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this.majorTickLines = { width: 2 }	Property: axis.majorTickLines.width <ejs-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ejs-chart> this.majorTickLines: { width: 2}
major Tick line color of axis	Property: axis.majorTickLines.color <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this. majorTickLines = { color: ‘red’ }	Property: axis.majorTickLines.color <ejs-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ejs-chart> this.majorTickLines = { color: ‘red’}
major Tick line opacity of axis	Property: axis.majorTickLines.opacity <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this.majorTickLines = { opacity: 0.7 }	Property: Not Applicable
major Tick line visibility of axis	Property: axis.majorTickLines.visible <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this.majorTickLines = { visible: true }	Property: Not Applicable
minor Tick line width of axis	Property: axis.minorTickLines.width <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { width: 2 }	Property: axis.minorTickLines.width <ejs-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ejs-chart> this.minorTickLines = { width: 2} }
minor Tick line color of axis	Property: axis.minorTickLines.color <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { color: ‘red’ }	Property: axis.minorTickLines.color <ejs-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ejs-chart> this.minorTickLines = { color: ‘red’}
minor Tick line opacity of axis	Property: axis.minorTickLines.opacity <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { opacity: 0.7 }	Property: Not Applicable
minor Tick line visibility of axis	Property: axis.minorTickLines.visible <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { visible: true }	Property: Not Applicable
Maximum labels of axis	Property: axis.maximumLabels <ej-chart> <e-axes> <e-axis [maximumLabels]='labels'> </e-axis> </e-axes> </ej-chart> this.labels = 4	Property: axis.maximumLabels <ejs-chart> <e-axes> <e-axis [maximumLabels]='labels'> </e-axis> </e-axes> </ejs-chart> this.labels = 4
Maximum label width of axis	Property: axis.maximumLabelWidth <ej-chart> <e-axes> <e-axis [maximumLabelWidth]='width'> </e-axis> </e-axes> </ej-chart> this.width = 15	Property: axis.maximumLabelWidth <ejs-chart> <e-axes> <e-axis [maximumLablWidth]='width'> </e-axis> </e-axes> </ejs-chart> this.width = 15;
Minor ticks per interval of axis	Property: axis.minorTicksPerInterval <ej-chart> <e-axes> <e-axis [minorTicksPerInterval]='interval'> </e-axis> </e-axes> </ej-chart> this.interval = 5	Property: axis.minorTicksPerInterval <ejs-chart> <e-axes> <e-axis [minorTicksPerInterval]='interval'> </e-axis> </e-axes> </ejs-chart> this.interval= 5
Name of axis	Property: axis.name <ej-chart> <e-axes> <e-axis name='XAxisName'> </e-axis> </e-axes> </ej-chart>	Property: axis.name <ejs-chart> <e-axes> <e-axis name='xAxis'> </e-axis> </e-axes> </ejs-chart>
Plot offset of axis	Property: axis.plotOffset <ej-chart> <e-axes> <e-axis [plotOffset]='offset'> </e-axis> </e-axes> </ej-chart> this.offset = 10	Property: axis.plotOffset <ejs-chart> <e-axes> <e-axis [plotOffset]='offset'> </e-axis> </e-axes> </ejs-chart> this.axis = { plotOffset:10 }
Orientation of axis	Property: axis.orientation <ej-chart> <e-axes> <e-axis orientattion='horizontal'> </e-axis> </e-axes> </ej-chart>	Property: axis.orientation <ejs-chart> <e-axes> <e-axis orientation='horizontal'> </e-axis> </e-axes> </ejs-chart>
Minimum of axis	Property: axis.range.minimum <ej-chart> <e-axes> <e-axis [range]='range'> </e-axis> </e-axes> </ej-chart> this.range: { minimum: 10 }	Property: axis.minimum <ejs-chart> <e-axes> <e-axis minimum='minimum'> </e-axis> </e-axes> </ejs-chart> this.minimum = 10
maximum of axis	Property: axis.range.maximum <ej-chart> <e-axes> <e-axis [range]='range'> </e-axis> </e-axes> </ej-chart> this. range: { maximum: 10 }	Property: axis.maximum <ejs-chart> <e-axes> <e-axis [maximum]='maximum'> </e-axis> </e-axes> </ejs-chart> this.maximum = 1000
interval of axis	Property: axis.range.interval <ej-chart> <e-axes> <e-axis [range]='range'> </e-axis> </e-axes> </ej-chart> this.range = { interval: 10 }	Property: axis.interval <ejs-chart> <e-axes> <e-axis interval='interval'> </e-axis> </e-axes> </ejs-chart> this.interval: 10
Range padding of axis	Property: axis.rangePadding <ej-chart> <e-axes> <e-axis rangePadding='Additional'> </e-axis> </e-axes> </ej-chart>	Property: axis.rangePadding <ejs-chart> <e-axes> <e-axis rangePadding='Round'> </e-axis> </e-axes> </ejs-chart>
Rounding places of axis	Property: axis.roundingPlaces <ej-chart> <e-axes> <e-axis [roundingPlaces]='round'> </e-axis> </e-axes> </ej-chart> this.round = 3}	Property: axis.labelFormat <ejs-chart> <e-axes> <e-axis labelFormat='n3'> </e-axis> </e-axes> </ejs-chart>
Tick position of axis	Property: axis.tickPosition <ej-chart> <e-axes> <e-axis tickPosition='Inside'> </e-axis> </e-axes> </ej-chart>	Property: axis.tickPosition <ejs-chart> <e-axes> <e-axis tickPosition='Inside'> </e-axis> </e-axes> </ejs-chart>
Scrollbar settings of axis	Property: axis.scrollBarSettings <ej-chart> <e-axes> <e-axis [scrollBarSettings]='scroll'> </e-axis> </e-axes> </ej-chart> this.scroll = { }	Property: Not Applicable.
Value type of axis	Property: axis.valueType <ej-chart> <e-axes> <e-axis valueType='Category'> </e-axis> </e-axes> </ej-chart>	Property: axis.valueType <ejs-chart> <e-axes> <e-axis valueType='Logarithmic'> </e-axis> </e-axes> </ejs-chart>
Visible of axis	Property: axis.visible <ej-chart> <e-axes> <e-axis [visible]='visible'> </e-axis> </e-axes> </ej-chart> this.visible: true	Property: axis.visible <ejs-chart> <e-axes> <e-axis [visible]='visible'> </e-axis> </e-axes> </ejs-chart> this.visible: true
Zoom factor of axis	Property: axis.zoomFactor <ej-chart> <e-axes> <e-axis [zoomFactor]='zoom'> </e-axis> </e-axes> </ej-chart> this.zoom = 0.7	Property: axis.zoomFactor <ejs-chart> <e-axes> <e-axis [zoomFactor]='zoom'> </e-axis> </e-axes> </ejs-chart> this.zoom = 0.7
Zoom position of axis	Property: axis.zoomPosition <ej-chart> <e-axes> <e-axis [zoomPosition]='zoom'> </e-axis> </e-axes> </ej-chart> this.zoom = 0.7	Property: axis.zoomPosition <ejs-chart> <e-axes> <e-axis [zoomPosition]='zoom'> </e-axis> </e-axes> </ejs-chart> this.zoom = 0.7
Label border of axis	Property: axis.labelBorder <ej-chart> <e-axes> <e-axis [labelBorder]='labelBorder'> </e-axis> </e-axes> </ej-chart> this.labelBorder: { width: 2, color: ‘red’ }	Property: axis.labelBorder <ejs-chart> <e-axes> <e-axis [labelBorder]='labelBorder'> </e-axis> </e-axes> </ejs-chart> this.labelBorder: { color: ‘red’, width: 2}
Title of axis	Property: axis.title <ej-chart> <e-axes> <e-axis title='title'> </e-axis> </e-axes> </ej-chart>	Property: axis.title <ejs-chart> <e-axes> <e-axis title='axis title'> </e-axis> </e-axes> </ejs-chart>
skeleton of axis	Property: axis.skeleton <ej-chart> <e-axes> <e-axis skeleton='yMd'> </e-axis> </e-axes> </ej-chart>	Property: axis.skeleton <ejs-chart> <e-axes> <e-axis skeleton='yMd'> </e-axis> </e-axes> </ejs-chart>
skeletonType of axis	Property: axis.skeletonType <ej-chart> <e-axes> <e-axis skeletonType='Date'> </e-axis> </e-axes> </ej-chart>	Property: axis.skeletonType <ejs-chart> <e-axes> <e-axis skeletonType='Date'> </e-axis> </e-axes> </ejs-chart>
Stripline of axis	Property: axis.stripLines <ej-chart> <e-axes> <e-axis> <e-stripLines> <e-stripLine> </e-stripLine> </e-stripLines> </e-axis> </e-axes> </ej-chart>	Property: axis.skeletonType <ej-chart> <e-axes> <e-axis> <e-stripLines> <e-stripLine> </e-stripLine> </e-stripLines> </e-axis> </e-axes> </ej-chart>
Multilevel labels of axis	Property: axis.multiLevelLabels <ej-chart> <e-axes> <e-axis> <e-multiLevelLabels> <e-multiLevelLabel> </e-multiLevelLabel> </e-multiLevelLabels> </e-axis> </e-axes> </ej-chart>	Property: axis.multiLevelLabels <ej-chart> <e-axes> <e-axis> <e-multilevellabels> <e-multilevellabel> </e-multilevellabel> </e-multilevellabels> </e-axis> </e-axes> </ej-chart>

Series

Behavior	API in Essential JS 1	API in Essential JS 2
Series	Property: series <ej-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ej-chart>	Property: series <ejs-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ejs-chart>
bearFillColor	Property: bearFillColor <ej-chart> <e-series-collection> <e-series bearFillColor='red'> </e-series> </e-series-collection> </ej-chart>	Property: bearFillColor <ejs-chart> <e-series-collection> <e-series bearFillColor='pink'> </e-series> </e-series-collection> </ejs-chart>
boxPlotMode	Property: boxPlotMode <ej-chart> <e-series-collection> <e-series boxPlotMode='Inclusive'> </e-series> </e-series-collection> </ej-chart>	Property: bearFillColor <ejs-chart> <e-series-collection> <e-series boxPlotMode='Inclusive'> </e-series> </e-series-collection> </ejs-chart>
border	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-chart> <e-series-collection> <e-series border='border'> </e-series> </e-series-collection> </ejs-chart> this.border = { width: 2, color: ‘red’ }
Minimum radius for bubble series	Property: series.bubbleOptions.minRadius <ej-chart> <e-series-collection> <e-series [buubleOptions]='bubble' > </e-series> </e-series-collection> </ej-chart> this.bubble = { minRadius: 3}	Property: series.MinRadius <ejs-chart> <e-series-collection> <e-series [minRadius]='minimum' > </e-series> </e-series-collection> </ejs-chart> this.minimum = 2
maximum radius for bubble series	Property: series.bubbleOptions.maxRadius <ej-chart> <e-series-collection> <e-series [buubleOptions]='bubble' > </e-series> </e-series-collection> </ej-chart> this.bubble = { maxRadius: 3}	Property: series.maxRadius <ejs-chart> <e-series-collection> <e-series [maxRadius]='maximum' > </e-series> </e-series-collection> </ejs-chart> this.maximum = 2
bullFillColor	Property: bullFillColor <ej-chart> <e-series-collection> <e-series bullFillColor='red'> </e-series> </e-series-collection> </ej-chart>	Property: bullFillColor <ejs-chart> <e-series-collection> <e-series bullFillColor='pink'> </e-series> </e-series-collection> </ejs-chart>
Cardinal spline tension	Property: series.cardinalSplineTension <ej-chart> <e-series-collection> <e-series [cardinalSplineTension]='spline' > </e-series> </e-series-collection> </ej-chart> this.spline = 0.3	Property: series.maxRadius <ejs-chart> <e-series-collection> <e-series [cardinalSplineTension]='spline' > </e-series> </e-series-collection> </ejs-chart> this.spline = 0.2
Column spacing	Property: series.columnSpacing <ej-chart> <e-series-collection> <e-series [columnSpacing]='space' > </e-series> </e-series-collection> </ej-chart> this.space = 0.3	Property: series.columnSpacing <ejs-chart> <e-series-collection> <e-series [columnSpacing]='space' > </e-series> </e-series-collection> </ejs-chart> this.space = 0.2
Column width	Property: series.columnWidth <ej-chart> <e-series-collection> <e-series [columnWidth]='width' > </e-series> </e-series-collection> </ej-chart> this.width = 0.3	Property: series.columnWidth <ejs-chart> <e-series-collection> <e-series [columnWidth]='width' > </e-series> </e-series-collection> </ejs-chart> this.width = 0.7
topLeft corner radius for rectangle series	Property: series.cornerRadius.topLeft <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { topLeft: 5 }	Property: series.cornerRadius.topLeft <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { topLeft: 5}
topRight corner radius for rectangle series	Property: series.cornerRadius.topRight <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { topRight: 5 }	Property: series.cornerRadius.topRight <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { topRight: 5}
bottomRight corner radius for rectangle series	Property: series.cornerRadius.bottomRight <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { bottomRight: 5 }	Property: series.cornerRadius.bottomRight <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { bottomRight: 5}
bottomLeft corner radius for rectangle series	Property: series.cornerRadius.bottomLeft <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { bottomLeft: 5 }	Property: series.cornerRadius.bottomLeft <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { bottomLeft: 5}
dashArray	Property: series.dashArray <ej-chart> <e-series-collection> <e-series dashArray='10, 5'> </e-series> </e-series-collection> </ej-chart>	Property: series.dashArray <ejs-chart> <e-series-collection> <e-series dashArray='10, 5'> </e-series> </e-series-collection> </ejs-chart>
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-chart> <e-series-collection> <e-series [dataSource]='data' > </e-series> </e-series-collection> </ejs-chart> this.data = []
drawType for polar/radar series	Property: series.drawType <ej-chart> <e-series-collection> <e-series drawType='Spline' > </e-series> </e-series-collection> </ej-chart>	Property: series.drawType <ejs-chart> <e-series-collection> <e-series [drawType]='data' > </e-series> </e-series-collection> </ejs-chart> this.data = ‘Line’
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-chart> <e-series-collection> <e-series [animation]='animation' > </e-series> </e-series-collection> </ejs-chart> 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-chart> <e-series-collection> <e-series [animation]='animation' > </e-series> </e-series-collection> </ejs-chart> this.animation = { enable: true}
Animation delay for series	Property: Not Applicable	Property: series.animation.delay <ejs-chart> <e-series-collection> <e-series [animation]='animation' > </e-series> </e-series-collection> </ejs-chart> this.animation = { delay: 100 }
Drag settings for series	Property: series.animationDuration <ej-chart> <e-series-collection> <e-series [dradSettings]='drag' > </e-series> </e-series-collection> </ej-chart> this.drag = { mode: ‘XY’ }	Property: Not Applicable
Customization of error bar	Property: series.errorBar <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = {}	Property: series.errorBar <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { }
isClosed	Property: series.errorBar <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = {}	Property: series.errorBar <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { }
enables Stacking of series	Property: series.isStacking <ej-chart> <e-series-collection> <e-series [isStacking]='isStacking' > </e-series> </e-series-collection> </ej-chart> this.isStacking = true	Property: series.errorBar <ejs-chart> <e-series-collection> <e-series [isStacking]='isStacking' > </e-series> </e-series-collection> </ejs-chart> this.isStacking = true
Line cap of series	Property: series.lineCap <ej-chart> <e-series-collection> <e-series [lineCap]='lineCap' > </e-series> </e-series-collection> </ej-chart> this.lineCap = ‘butt’	Property: Not Applicable
Line join of series	Property: series.lineJoin <ej-chart> <e-series-collection> <e-series [lineJoin]='lineJoin' > </e-series> </e-series-collection> </ej-chart> this.lineJoin = ‘round’	Property: Not Applicable
Opacity of series	Property: series.opacity <ej-chart> <e-series-collection> <e-series [opacity]='opacity' > </e-series> </e-series-collection> </ej-chart> this.opacity = 0.6	Property: series.opacity <ejs-chart> <e-series-collection> <e-series [opacity]='opacity' > </e-series> </e-series-collection> </ejs-chart> this.opacity = true
Outlier settings of series	Property: series.lineJoin <ej-chart> <e-series-collection> <e-series [outLierSettings]='outlier' > </e-series> </e-series-collection> </ej-chart> this.outLier = { }	Property: Not Applicable
Line join of series	Property: series.lineJoin <ej-chart> <e-series-collection> <e-series [lineJoin]='lineJoin' > </e-series> </e-series-collection> </ej-chart> this.lineJoin = ‘round’	Property: Not Applicable
Palette of series	Property: series.palette <ej-chart> <e-series-collection> <e-series [palette]='opacity' > </e-series> </e-series-collection> </ej-chart> this.palette = []	Not applicable
Positive fill color for waterfall series	Property: series.positiveColor <ej-chart> <e-series-collection> <e-series [positiveColor]='positiveColor' > </e-series> </e-series-collection> </ej-chart> this.positiveColor = ‘red’	Property: series.positiveColor <ejs-chart> <e-series-collection> <e-series [positiveColor]='positiveColor' > </e-series> </e-series-collection> </ejs-chart> this.positiveColor = ‘red’
To show average value in box and whisker series	Property: series.showMedian <ej-chart> <e-series-collection> <e-series [showMedian]='showMedian' > </e-series> </e-series-collection> </ej-chart> this.showMedian = ‘true’	Property: series.showMean <ejs-chart> <e-series-collection> <e-series [showMean]='showMean' > </e-series> </e-series-collection> </ejs-chart> this.showMean = true
Stacking group for stacking series	Property: series.showMedian <ej-chart> <e-series-collection> <e-series [stackingGroup]='stackingGroup' > </e-series> </e-series-collection> </ej-chart> this.stackingGroup = ‘copper’	Property: series.stackingGroup <ejs-chart> <e-series-collection> <e-series [stackingGroup]='stackingGroup' > </e-series> </e-series-collection> </ejs-chart> this.stackingGroup = ‘copper’
Type of series	Property: series.type <ej-chart> <e-series-collection> <e-series [type]='type' > </e-series> </e-series-collection> </ej-chart> this.type = ‘Line’	Property: series.type <ejs-chart> <e-series-collection> <e-series [type]='type' > </e-series> </e-series-collection> </ejs-chart> this.type = ‘Line’
Visibility of series	Property: series.visiblity <ej-chart> <e-series-collection> <e-series [visiblity]='visiblity' > </e-series> </e-series-collection> </ej-chart> this.visiblity = true	Property: series.visible <ejs-chart> <e-series-collection> <e-series [visible]='visible' > </e-series> </e-series-collection> </ejs-chart> this.visible = true
Visibility on legend click	Property: series.visiblityOnLegend <ej-chart> <e-series-collection> <e-series [visiblityOnLegend]='visiblity' > </e-series> </e-series-collection> </ej-chart> this.visiblity = true	Property: legendSettings.toggleVisiblity <ejs-chart [legendSettings]='legend'> <e-series-collection> <e-series [visible]='visible' > </e-series> </e-series-collection> </ejs-chart> this.legend = { toggleVisiblity = true}
Spline Type of series	Property: series.splineType <ej-chart> <e-series-collection> <e-series [splineType]='splineType' > </e-series> </e-series-collection> </ej-chart> this.splineType = ‘Monotonic’	Property: series.splineType <ejs-chart> <e-series-collection> <e-series [splineType]='splineType' > </e-series> </e-series-collection> </ejs-chart> this.splineType = ‘Cardinal’
xAxisName of series	Property: xAxisName <ej-chart> <e-series-collection> <e-series xAxisName='xaxis'> </e-series> </e-series-collection> </ej-chart>	Property: xAxisName <ejs-chart> <e-series-collection> <e-series xAxisName='axis'> </e-series> </e-series-collection> </ejs-chart>
yAxisName of series	Property: yAxisName <ej-chart> <e-series-collection> <e-series yAxisName='xaxis'> </e-series> </e-series-collection> </ej-chart>	Property: yAxisName <ejs-chart> <e-series-collection> <e-series yAxisName='axis'> </e-series> </e-series-collection> </ejs-chart>
yAxisName of series	Property: yAxisName <ej-chart> <e-series-collection> <e-series yAxisName='xaxis'> </e-series> </e-series-collection> </ej-chart>	Property: yAxisName <ejs-chart> <e-series-collection> <e-series yAxisName='axis'> </e-series> </e-series-collection> </ejs-chart>
xName of series	Property: xName <ej-chart> <e-series-collection> <e-series xName='x'> </e-series> </e-series-collection> </ej-chart>	Property: xName <ejs-chart> <e-series-collection> <e-series xName='x'> </e-series> </e-series-collection> </ejs-chart>
yName of series	Property: yName <ej-chart> <e-series-collection> <e-series yName='y'> </e-series> </e-series-collection> </ej-chart>	Property: yName <ejs-chart> <e-series-collection> <e-series yName='y'> </e-series> </e-series-collection> </ejs-chart>
Name of the property in the datasource that contains high value for the series	Property: high <ej-chart> <e-series-collection> <e-series high='high'> </e-series> </e-series-collection> </ej-chart>	Property: high <ejs-chart> <e-series-collection> <e-series high=''high> </e-series> </e-series-collection> </ejs-chart>
Name of the property in the datasource that contains low value for the series	Property: low <ej-chart> <e-series-collection> <e-series low='low'> </e-series> </e-series-collection> </ej-chart>	Property: low <ejs-chart> <e-series-collection> <e-series low=''low> </e-series> </e-series-collection> </ejs-chart>
Name of the property in the datasource that contains open value for the series	Property: open <ej-chart> <e-series-collection> <e-series open='open'> </e-series> </e-series-collection> </ej-chart>	Property: open <ejs-chart> <e-series-collection> <e-series open=''open> </e-series> </e-series-collection> </ejs-chart>
Name of the property in the datasource that contains close value for the series	Property: close <ej-chart> <e-series-collection> <e-series close='close'> </e-series> </e-series-collection> </ej-chart>	Property: close <ejs-chart> <e-series-collection> <e-series close=''close> </e-series> </e-series-collection> </ejs-chart>
Trendlines of series	Property: trendlines <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart>	Property: trendLines <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline> </e-trendline> <e-trendlines> </e-series> </e-series-collection> `
Marker settings in series	Property: series.marker <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = {}	Property: series.marker <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { }

Marker

Behavior	API in Essential JS 1	API in Essential JS 2
Fill color in series	Property: series.marker.fill <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { fill: ‘red’}	Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { fill: ‘red’}
Opacity of marker	Property: series.marker.opacity <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { opacity: 0.4 }	Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { opacity: 0.4}
shape of marker	Property: series.marker.shape <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { shape: ‘Circle’ }	Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { shape: ‘Circle’ }
imageUrl of marker	Property: series.marker.imageUrl <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { imageUrl: ‘./src.png’ }	Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { ‘./src.png’ }
border of marker	Property: series.marker.border <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { border: { color: ‘red’, width: 2} }	Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { border:{ color: ‘red’, width: 2}}
Height of marker	Property: series.marker.size.height <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { size: { height: 20} }	Property: series.marker.height <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { height: 20}
width of marker	Property: series.marker.size.width <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { size: { width: 20} }	Property: series.marker.width <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { width: 20}
DataLabel of marker	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-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { visible: true } }
TextMapping name of datalabel	Property: marker.dataLabel.textMappingName <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { textMappingName: ‘name’ } }	Property: marker.dataLabel.name <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { name: ‘data’ } }
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-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { fill: ‘red’ } }
opacity color of datalabel	Property: marker.dataLabel.opacity <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { opacity: 0.6 } }	Property: marker.dataLabel.opacity <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { opacity: 0.6 } }
Text position of datalabel	Property: marker.dataLabel.textPosition <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { textPosition: ‘Top’ } }	Property: marker.dataLabel.position <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { position: ‘Top’ } }
Vertical alignment of datalabel	Property: marker.dataLabel.verticalAlignment <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { verticalAlignment: ‘Near’ } }	Property: marker.dataLabel.alignment <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { alignment: ‘far’ } }
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-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { border: { width: 2, color: ‘blue’} } }
Margin of datalabel	Property: marker.dataLabel.margin <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { margin: { top: 10, left: 10, bottom: 10, right: 10 } } }	Property: marker.dataLabel.margin <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { margin: { top: 10, left: 10, bottom: 10, right: 10 } } }
Offset of datalabel	Property: marker.dataLabel.offset <ej-chart> <e-series-collection> <e-series [border]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { offset: 10 } }	Property: Not applicable
Text style of 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-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { font: { }} }
HTML template of 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-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { template: ” }
Rounded corner x of datalabel	Property: Not Applicable Property: marker.dataLabel.rx <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { rx: 10 }
Rounded corner y of datalabel	Property: Not Applicable Property: marker.dataLabel.ry <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { ry: 10 }
Maximum width of datalabel	Property: marker.dataLabel.maximumLabelWidth <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { maximumLabelWidth:20 } }	Property: Not Applicable
Enabling wrap of datalabel	Property: marker.dataLabel.enablWrap <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { enableWrap:true } }	Property: Not Applicable
Show contrast color of datalabel	Property: marker.dataLabel.showContrastColor <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { showContrastColor:true } }	Property: Not Applicable
Show edge lebel of datalabel	Property: marker.dataLabel.showEdgeLabel <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { showEdgeLabel: true } }	Property: Not Applicable

Error bar

Behavior	API in Essential JS 1	API in Essential JS 2
Type of error bar	Property: series.errorBar.type <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { type: ‘StandardDeviation’}	Property: series.errorBar.type <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { type: ‘StandardDeviation’ }
mode of error bar	Property: series.errorBar.mode <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { mode: ‘Horizontal’}	Property: series.errorBar.mode <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { mode: ‘Horizontal’ }
direction of error bar	Property: series.errorBar.direction <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { direction: ‘Positive’}	Property: series.errorBar.direction <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { direction: ‘Positive’ }
fill of error bar	Property: series.errorBar.fill <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { fill: ‘red’}	Property: series.errorBar.fill <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { fill: ‘red’ }
width of error bar	Property: series.errorBar.width <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { width: 2}	Property: series.errorBar.width <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { width: 2 }
horizontalError of error bar	Property: series.errorBar.horizontalError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { horizontalError: 2}	Property: series.errorBar.horizontalError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { horizontalError: 2 }
verticalError of error bar	Property: series.errorBar.verticalError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { verticalError: 2}	Property: series.errorBar.verticalError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { verticalError: 2 }
horizontalPositiveError of error bar	Property: series.errorBar.horizontalPositiveError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { horizontalPositiveError: 2}	Property: series.errorBar.horizontalPositiveError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { horizontalPositiveError: 2 }
horizontalNegativeError of error bar	Property: series.errorBar.horizontalNegativeError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { horizontalNegativeError: 2}	Property: series.errorBar.horizontalNegativeError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { horizontalNegativeError: 2 }
verticalPositiveError of error bar	Property: series.errorBar.verticalPositiveError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { verticalPositiveError: 2}	Property: series.errorBar.verticalPositiveError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { verticalPositiveError: 2 }
verticalNegativeError of error bar	Property: series.errorBar.verticalNegativeError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { verticalNegativeError: 2}	Property: series.errorBar.verticalNegativeError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { verticalNegativeError: 2 }

Trendlines

Behavior	API in Essential JS 1	API in Essential JS 2
Trendsline type of series	Property: trendlines.type <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline type='Linear'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart>	Property: trendLines.type <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline type='Linear'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart>
Visiblity of Trendslines	Property: trendlines.visible <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [visible]='visible'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.visible: true	Property: Not Applicable
Name of trendline	Property: trendlines.name <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline name='linee1'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart>	Property: trendLines.name <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline name='line1'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart>
Period of trendline	Property: trendlines.period <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [period]='period'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.period = 2	Property: trendLines.period <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [period]='period'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.period = 2
polynomialOrder of trendline	Property: trendlines.polynomialOrder <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [polynomialOrder]='polynomialOrder'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.polynomialOrder = 2	Property: trendLines.polynomialOrder <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [polynomialOrder]='polynomialOrder'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.polynomialOrder = 2
backwardForecast of trendline	Property: trendlines.backwardForecast <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [backwardForecast]='backwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.backwardForecast = 2	Property: trendLines.backwardForecast <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [backwardForecast]='backwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.backwardForecast = 2
forwardForecast of trendline	Property: trendlines.forwardForecast <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [forwardForecast]='forwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.forwardForecast = 2	Property: trendLines.forwardForecast <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [forwardForecast]='forwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.forwardForecast = 2
width of trendline	Property: trendlines.width <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [width]='width'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.width = 2	Property: trendLines.width <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [width]='width'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.width = 2
intercept of trendline	Property: trendlines.intercept <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [intercept]='intercept'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.intercept = 2	Property: trendLines.intercept <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [intercept]='intercept'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.intercept = 2
fill of trendline	Property: trendlines.fill <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [fill]='fill'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.fill = ‘blue’	Property: trendLines.fill <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [fill]='fill'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.fill = ‘blue’
dashArray of trendline	Property: trendlines.dashArray <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [dashArray]='dashArray'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.dashArray = ‘10, 5’	Property: trendLines.dashArray <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [dashArray]='dashArray'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.dashArray = ‘10, 5’
legend shape of trendline	Property: Not Applicable	Property: trendLines.legendShape <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [legendShape]='Circle'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.circle = ‘Circle’
Animation of trendline	Property: Not Applicable	Property: trendLines.legendShape <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [animation]='animation'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.animation = { }
Marker of trendline	Property: Not Applicable	Property: trendLines.legendShape <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [marker]='marker'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.marker = { }
tooltip of trendline	Property: trendlines.dashArray <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [tooltip]='tooltip'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.tooltip = { }	Property: trendLines.enableTooltip <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [enableTooltip]='enableTooltip'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.enableTooltip = true

Striplines

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline> </e-stripline> <e-striplines> </e-axes> </ej-chart>	Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline> </e-stripline> <e-striplines> </e-axes> </ej-chart>
Color of stripines	Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline color='pink'> </e-stripline> <e-striplines> </e-axes> </ej-chart>	Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline color='pink'> </e-stripline> <e-striplines> </e-axes> </ej-chart>
Border of stripines	Property: striplines.border <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [border]='border'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.border = { width: 2, color: ‘red’, opacity: 0.5 }	Property: striplines.border <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [border]='border'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.border = { width: 2, color: ‘red’, opacity: 0.5 }
Start of stripines	Property: striplines.start <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [start]='start'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.start = 2	Property: striplines.start <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [start]='start'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.start = 2
end of stripines	Property: striplines.end <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [end]='end'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.end = 2	Property: striplines.end <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [end]='end'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.end = 2
startFromAxis of stripines	Property: striplines.startFromAxis <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [startFromAxis]='startFromAxis'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.startFromAxis = true	Property: striplines.startFromAxis <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [startFromAxis]='startFromAxis'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.startFromAxis = false
text of stripines	Property: striplines.text <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [text]='text'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.text = ‘striplines’	Property: striplines.text <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [text]='text'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.text = ‘Striplines’
size of stripines	Property: striplines.width <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [width]='width'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.width = 2	Property: striplines.size <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [size]='size'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.size = 2
horizontal alignment of stripines	Property: striplines.alignemnt <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [alignment]='alignment'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.horizontalAlignment = ‘near’	Property: striplines.horizontalAlignment <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [horizontalAlignment]='horizontalAlignment'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.horizontalAlignment = ‘near’
vertical alignment of stripines	Property: Not Applicable	Property: striplines.horizontalAlignment <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [horizontalAlignment]='horizontalAlignment'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.horizontalAlignment = ‘near’
zIndex of stripines	Property: striplines.zIndex <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [zIndex]='Over'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.zIndex = ‘striplines’	Property: striplines.zIndex <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [zIndex]='zIndex'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.zIndex = ‘Behind’
Font style of stripines text	Property: striplines.font <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [font]='font'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.font = {}	Property: striplines.textStyle <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [textStyle]='text'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.text = { }

Multilevel labels

Behavior	API in Essential JS 1	API in Essential JS 2
Default	Property: multilevellabels <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>	Property: multilevellabels <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>
Text alignment in labels	Property: textAlignment <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel textAlignment='near'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>	Property: multilevellabels <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel alignment='near'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>
Text overflow in labels	Property: textOverFlow <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel textOverFlow='trim'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>	Property: overFlow <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel overFLow='Trim'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>
Text of multilevel labels	Property: text <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel text='Texts'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>	Property: categories.text <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel > <e-categories> <e-category text='text'> </e-category> </e-categories> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart>
Start of multilevel labels	Property: start <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel start='start'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.start = 20	Property: categories.start <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel > <e-categories> <e-category start='start'> </e-category> </e-categories> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.start = 20
End of multilevel labels	Property: end <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel start='start'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.end = 20	Property: categories.end <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel > <e-categories> <e-category end='end'> </e-category> </e-categories> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.end = 20
Maximum Label width	Property: maximumLabelWidth <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel [maximumLabelWidth]='width'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.width = 16	Property: maximumLabelWidth <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel [maximumLabelWidth]='width'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.width = 20;
Level of labels	Property: level <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel [level]='level'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.level = 3	Property: Not Applicable

Methods

Behavior	API in Essential JS 1	API in Essential JS 2
Animation	Property: chart.animate <ej-chart (animate)='animation'> </ej-chart> this.animate(args) { }	Property: Not Applicable
Redraw	Property: chart.redraw <ej-chart (redraw)='redraw'> </ej-chart> this.redraw(args) { }	Property: chart.refresh <ej-chart (refresh)='refresh'> </ej-chart> this.refresh(args) { }
print	Property: chart.print <ej-chart (print)='print'> </ej-chart> this.print(args) { }	Property: chart.print <ej-chart (print)='print'> </ej-chart> this.print(args) { }
export	Property: chart.export <ej-chart (print)='print'> </ej-chart> this.print(args) { }	Property: chart.export <ej-chart (export)='export'> </ej-chart> this.export(args) { }
add series	Property: Not Applicable	Property: chart.export <ej-chart (addSeries)='addSeries'> </ej-chart> this.addSeries(args) { }
remove series	Property: Not Applicable	Property: chart.export <ej-chart (removeSeries)='removeSeries'> </ej-chart> this.removeSeries(args) { }

Events

Behavior	API in Essential JS 1	API in Essential JS 2
Fires on annotation click	Property: chart.annotationClick <ej-chart (annotationClick)='annotationClick($event)'> </ej-chart> this.annotationClick(args) { }	Property: Not Applicable
Fires on after animation	Property: chart.animationComplete <ejs-chart (animationComplete)='animationComplete($event)'> </ejs-chart> this.animationComplete(args) { }	Property: chart.animationComplete <ejs-chart (refresh)='refresh'> </ejs-chart> this.refresh(args) { }
Fires on axis label click	Property: chart.axislabelClick <ej-chart (axislabelClick)='axislabelClick($event)'> </ej-chart> this.axislabelClick(args) { }	Property: Not Applicable
Fires before axis label rendering	Property: chart.axisLabelRendering <ej-chart (axisLabelRendering)='axisLabelRendering($event)'> </ej-chart> this.axisLabelRender(args) { }	Property: chart.axisLabelRender <ejs-chart (axisLabelRender)='axisLabelRender($event)'> </ejs-chart> this.axisLabelRender(args) { }
Fires on axis label mouse move	Property: chart.axisLabelMouseMove <ej-chart (axisLabelMouseMove)='axisLabelMouseMove($event)'> </ej-chart> this.axisLabelMouseMove(args) { }	Property: Not Applicable
Fires on axis label initialize	Property: chart.axisLabelMouseMove <ej-chart (axisLabelInitialize)='axisLabelInitialize($event)'> </ej-chart> this.axisLabelInitialize(args) { }	Property: Not Applicable
Fires before axis range calculate	Property: chart.axisRangeCalculate <ej-chart (axisRangeCalculate)='axisRangeCalculate($event)'> </ej-chart> this.axisRangeCalculate(args) { }	Property: chart.axisRangeCalculated <ejs-chart (axisRangeCalculated)='axisRangeCalculated($event)'> </ejs-chart> this.axisRangeCalculated(args) { }
Fires on axis title rendering	Property: chart.axisTitleRendering <ej-chart (axisTitleRendering)='axisTitleRendering($event)'> </ej-chart> this.axisTitleRendering(args) { }	Property: Not Applicable
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-chart (resized)='resized($event)'> </ejs-chart> this.resized(args) { }
Fires chart click	Property: chart.chartClick <ej-chart (chartClick)='chartClick($event)'> </ej-chart> this.chartClick(args) { }	Property: chart.chartMouseClick <ejs-chart (chartMouseClick)='chartMouseClick($event)'> </ejs-chart> this.chartMouseClick(args) { }
Fires chart mouse leave	Property: chart.chartMouseLeave <ej-chart (chartMouseLeave)='chartMouseLeave($event)'> </ej-chart> this.chartMouseLeave(args) { }	Property: chart.chartMouseClick <ejs-chart (chartMouseLeave)='chartMouseLeave($event)'> </ejs-chart> 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-chart (chartmouseUp)='chartmouseUp($event)'> </ejs-chart> this.chartmouseUp(args) { }
Fires on chart mouse up	Property: Not Applicable	Property: chart.chartmouseDown <ejs-chart (chartmouseDown)='chartmouseDown($event)'> </ejs-chart> 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 on drag start	Property: chart.dragStart <ej-chart (dragStart)='dragStart($event)'> </ej-chart> this.dragStart(args) { }	Property: Not Applicable
Fires on dragging	Property: chart.dragging <ej-chart (dragging)='dragging($event)'> </ej-chart> this.dragging(args) { }	Property: Not Applicable
Fires on drag end	Property: chart.dragEnd <ej-chart (dragEnd)='dragEnd($event)'> </ej-chart> this.dragEnd(args) { }	Property: chart.dragComplete <ejs-chart (dragComplete)='dragComplete($event)'> </ejs-chart> this.dragComplete(args) { }
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-chart (load)='load($event)'> </ejs-chart> this.load(args) { }
Fires on data labeltext render	Property: chart.displayTextRendering <ej-chart (displayTextRendering)='displayTextRendering($event)'> </ej-chart> this.displayTextRendering(args) { }	Property: chart.textRender <ejs-chart (textRender)='textRender($event)'> </ejs-chart> this.textRender(args) { }
Fires on errorbar render	Property: chart.errorbarRendering <ej-chart (errorBarRendering)='errorBarRendering($event)'> </ej-chart> this.errorBarRendering(args) { }	Property: Not Applicable.
Fires on legend bound calculate	Property: chart.errorbarRendering <ej-chart (legendBoundsCalculate)='legendBoundsCalculate($event)'> </ej-chart> this.legendBoundsCalculate(args) { }	Property: Not Applicable.
Fires on legend item click	Property: chart.legendItemClick <ej-chart (legendItemClick)='legendItemClick($event)'> </ej-chart> this.legendItemClick(args) { }	Property: Not Applicable.
Fires on legend item mouse move	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)='legendItemMouseMOve($event)'> </ej-chart> this.legendItemMouseMOve(args) { }	Property: Not Applicable.
Fires on multilevel label render	Property: chart.multiLevelLabelRendering <ej-chart (multiLevelLabelRendering)='multiLevelLabelRendering($event)'> </ej-chart> this.multiLevelLabelRendering(args) { }	Property: chart.axisMultiLabelRender <ejs-chart (axisMultiLabelRender)='axisMultiLabelRender($event)'> </ejs-chart> this.axisMultiLabelRender(args) { }
Fires on point click	Property: chart.pointRegionClick <ej-chart (pointRegionClick)='pointRegionClick($event)'> </ej-chart> this.pointRegionClick(args) { }	Property: chart.pointClick <ej-chart (pointClick)='pointClick($event)'> </ej-chart> this.pointClick(args) { }
Fires on multilevel label render	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 pre render	Property: chart.preRender <ej-chart (preRender)='preRender($event)'> </ej-chart> this.preRender(args) { }	Property: Not Applicable.
Fires on point render	Property: Not Applicable.	Property: chart.pointRender <ejss-chart (pointRender)='pointRender($event)'> </ejs-chart> this.pointRender(args) { }
Fires on range seleted	Property: chart.rangeSelected <ej-chart (rangeSelected)='rangeSelected($event)'> </ej-chart> this.rangeSelected(args) { }	Property: Not Applicable.
Fires on series render	Property: chart.seriesRendering <ej-chart (seriesRendering)='seriesRendering($event)'> </ej-chart> this.seriesRendering(args) { }	Property: chart.seriesRender <ej-chart (seriesRender)='seriesRender($event)'> </ej-chart> this.seriesRender(args) { }
Fires on trendLine render	Property: chart.trendLineRendering <ej-chart (trendLineRendering)='trendLineRendering($event)'> </ej-chart> this.trendLineRendering(args) { }	Property: Not Applicable.
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 tooltip render	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) { }
Fires on cross hair tooltip render	Property: chart.trackAxisTooltip <ej-chart (trackAxisTooltip)='trackAxisTooltip($event)'> </ej-chart> this.trackAxisTooltip(args) { }	Property: Not Applicable.
Fires on before track ball rendering	Property: chart.trackTooltip <ej-chart (trackTooltip)='trackTooltip($event)'> </ej-chart> this.trackTooltip(args) { }	Property: Not Applicable.
Fires when scroll start	Property: chart.scrollStart <ej-chart (scrollStart)='scrollStart($event)'> </ej-chart> this.scrollStart(args) { }	Property: chart.scrollStart <ejs-chart (scrollStart)='scrollStart($event)'> </ejs-chart> this.scrollStart(args) { }
Fires when scroll End	Property: chart.scrollEnd <ej-chart (scrollEnd)='scrollEnd($event)'> </ej-chart> this.scrollEnd(args) { }	Property: chart.scrollEnd <ejs-chart (scrollEnd)='scrollEnd($event)'> </ejs-chart> this.scrollEnd(args) { }
Fires when scroll Change	Property: chart.scrollChange <ej-chart (scrollChange)='scrollChange($event)'> </ej-chart> this.scrollChange(args) { }	Property: chart.scrollChange <ejs-chart (scrollChange)='scrollChange($event)'> </ejs-chart> this.scrollChange(args) { }
Fires when zoom complete	Property: chart.zoomComplete <ej-chart (zoomComplete)='zoomComplete($event)'> </ej-chart> this.zoomComplete(args) { }	Property: chart.scrollChange <ejs-chart (zoomComplete)='zoomComplete($event)'> </ejs-chart> this.zoomComplete(args) { }