Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular Chart component

25 Jan 2022 / 86 minutes to read

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