Migration from Essential JS 1

14 Mar 202224 minutes to read

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

Annotation

Behavior API in Essential JS 1 API in Essential JS 2
Rotation of annotation Property: e-annotations.angle

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation angle="270">
</e-annotation>
</e-annotations>
</e-annotations>
</ej-chart>
Property: Not applicable.
Annotations Property: e-annotations.content

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation content="Chart">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.content

<ejs-chart id="container">
<e-chart-annotations>
<e-chart-annotation content="Chart">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
Coordinate unit for annotation Property: e-annotations.coordinate-unit

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation coordinate-unit="Pixels">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.coordinateUnits

<ejs-chart id="container" >
<e-chart-annotations>
<e-chart-annotation coordinateUnits="Pixel" >
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
HorizontalAlignment for annotation Property: e-annotations.horizontal-alignment

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation horizontal-alignment="Left">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.horizontalAlignment

<ejs-chart id="container" >
<e-chart-annotations>
<e-chart-annotation horizontalAlignment="Near">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
Margin for annotation Property: annotations.margin

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation>
<e-margin top="10" bottom="10" left="10" right="10">
</e-margin>
</e-annotation>
</e-annotations>
</ej-chart>
Property: Not applicable
Opacity for annotation Property: e-annotations.opacity

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation opacity="0.2">
</e-annotation>
</e-annotations>
</ej-chart>
Property: Not applicable
Region for annotation with respect to chart or series Property: e-annotations.region

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation region="Series">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.region

<ejs-chart id="container" >
<e-chart-annotations>
<e-chart-annotation region="Series">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
VerticalAlignment for annotation Property: e-annotation.vertical-alignment

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation vertical-alignment="Middle" >
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.verticalAlignment

<ejs-chart id="container">
<e-chart-annotations>
<e-chart-annotation verticalAlignment="Top">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
Visibility of annotations Property: e-annotations.visible

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation visible="true">
</e-annotation>
</e-annotations>
</ej-chart>
Not applicable
X offset for annotation Property: e-annotations.x

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation x="170">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.x

<ejs-chart id="container">
<e-chart-annotations>
<e-chart-annotation x="250">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
X axis name in which annotation to be rendered Property: e-annotations.xAxisName

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation xAxisName="xAxis">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotation.xAxisName

<ejs-chart id="container">
<e-chart-annotations>
<e-chart-annotation xAxisName="xAxis">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
Y offset for annotation Property: annotations.y

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation y="170">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotations.y

<ejs-chart id="container">
<e-chart-annotations>
<e-chart-annotation y="250">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>
Y axis name in which annotation to be rendered Property: annotations.yAxisName

<ej-chart id="chartContainer">
<e-annotations>
<e-annotation yAxisName="yAxis">
</e-annotation>
</e-annotations>
</ej-chart>
Property: e-chart-annotation.yAxisName

<ejs-chart id="container">
<e-chart-annotations>
<e-chart-annotation yAxisName="yAxis">
</e-chart-annotation>
</e-chart-annotations>
</ejs-chart>

Columns

Behavior API in Essential JS 1 API in Essential JS 2
Columns in chart Property: e-column-definitions

<ej-chart id="chartContainer">
<e-column-definitions>
</e-column-definitions>
</ej-chart>
Property: e-chart-columns

<ejs-chart id="lineContainer">
<e-chart-columns>
</e-chart-columns>
</ejs-chart>
Unit Property: unit

<ej-chart id="chartContainer">
<e-column-definitions>
<e-column-definition unit="percentage">
</e-column-definition>
<e-column-definition unit="percentage">
</e-column-definition>
</e-column-definitions>
</ej-chart>
Not Available
Width of columns in chart Property: column-width

<ej-chart id="chartContainer">
<e-column-definitions>
<e-column-definition column-width="50">
</e-column-definition>
<e-column-definition column-width="50">
</e-column-definition>
</e-column-definitions>
</ej-chart>
Property: width

<ejs-chart id="lineContainer">
<e-chart-columns>
<e-chart-column width="50%">
</e-chart-column>
</e-chart-columns>
</ejs-chart>
Line customization Property: line-color, line-width

<ej-chart id="chartContainer">
<e-column-definitions>
<e-column-definition line-color="Gray" line-width="0">
</e-column-definition>
</ej-chart>
Property: border

<ejs-chart id="lineContainer">
<e-chart-columns>
<e-chart-column width="50%">
<e-border width="2" color="red">
</e-border>
</e-chart-column>
</e-chart-columns>
</ejs-chart>

CommonSeriesOptions

Behavior API in Essential JS 1 API in Essential JS 2
CommonSeriesOptios Property: commonSeriesOptions

<ejs-chart id="lineContainer">
<e-common-series-options>
</e-common-series-options>
</ejs-chart>
Not Applicable

Crosshair

Behavior API in Essential JS 1 API in Essential JS 2
Crosshair Property: visible

<ej-chart id="chartContainer">
<e-crosshair visible="true">
</e-crosshair>
</ej-chart>
Property: enable

<ejs-chart id="lineContainer">
<e-chart-crosshairsettings enable="true">
</e-chart-crosshairsettings>
<ejs-chart>
TrackballTooltipSettings Property: e-trackball-tooltip-settings

<ej-chart id="chartContainer">
<e-crosshair>
<e-trackball-tooltip-settings>
<e-border width="1" color="grey">
</e-border>
</e-trackball-tooltip-settings>
</e-crosshair>
</ej-chart>
Not applicable
Marker Property: marker

<ej-chart id="chartContainer">
<e-crosshair>
<e-marker>
<e-border width="1" color="grey">
</e-border>
</e-marker>
</e-crosshair>
</ej-chart>
Not applicable
Crosshair line style Property: e-line

<ej-chart id="chartContainer">
<e-crosshair>
<e-line color="grey" width="2">
</e-line>
</e-crosshair>
</ej-chart>
Property: e-crosshairsettings-line

<ejs-chart id="lineContainer">
<e-chart-crosshairsettings>
<e-crosshairsettings-line width="4" color="green">
</e-crosshairsettings-line>
</e-chart-crosshairsettings>
</ejs-chart>
Type Property: type

<ej-chart id="chartContainer">
<e-crosshair type="Trackball">
</e-crosshair>
</ej-chart>
Not applicable

3D chart

Behavior API in Essential JS 1 API in Essential JS 2
3d chart Property: enable3d

<ej-chart id="container" enable3d="true">
</ej-chart>
Not applicable
Rotation of 3d chart Property: enable-rotation

<ej-chart id="container" enable-rotation="true">
</ej-chart>
Not applicable
Depth Property: depth

<ej-chart id="container" depth="120">
</ej-chart>
Not applicable

Canvas rendering

Behavior API in Essential JS 1 API in Essential JS 2
Canvas rendering Property: enable-canvas-rendering

<ej-chart id="chartContainer" enable-canvas-rendering="true">
</ej-chart>
Not applicable

Indicators

Behavior API in Essential JS 1 API in Essential JS 2
Type of Indicator Property: type

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator type="AccumulationDistribution">
</e-indicator>
</e-indicators>
</ej-chart>
Property: type

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator type="AccumulationDistribution">
</e-indicator>
</e-indicators>
</ejs-chart>
Period for indicator Property : period

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator period="14">
</e-indicator>
</e-indicators>
</ej-chart>
Property: period

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator period=3>
</e-indicator>
</e-indicators>
</ejs-chart>
%K value in stochastic indicator Property: kPeriod

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator kPeriod="14">
</e-indicator>
</e-indicators>
</ej-chart>
Property: kPeriod

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator kPeriod=14>
</e-indicator>
</e-indicators>
</ejs-chart>
%D value in stochastic indicator Property: dPeriod

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator dPeriod="14">
</e-indicator>
</e-indicators>
</ej-chart>
Property: dPeriod

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator dPeriod="14">
</e-indicator>
</e-indicators>
</ejs-chart>
Shows overSold/overBought values Not applicable Property: showZones

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator showZones="true">
</e-indicator>
</e-indicators>
</ejs-chart>
Overbought value for RSI and stochastic indicator Not applicable Property: overBought

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator overBought="80">
</e-indicator>
</e-indicators>
</ejs-chart>
Oversold value for RSI and stochastic indicator Not applicable Property: overSold

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator overSold="80">
</e-indicator>
</e-indicators>
</ejs-chart>
Standard deviation Property: standardDeviations

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator standardDeviations="2">
</e-indicator>
</e-indicators>
</ej-chart>
Property: standardDeviation

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator standardDeviation="4">
</e-indicator>
</e-indicators>
</ejs-chart>
Field for indicator Property: field

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator field="Close">
</e-indicator>
</e-indicators>
</ej-chart>
Property: field

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator field="Close">
</e-indicator>
</e-indicators>
</ejs-chart>
Slow period for MACD indicator Property: shortPeriod

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator shortPeriod="12">
</e-indicator>
</e-indicators>
</ej-chart>
Property: lowPeriod

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator slowPeriod=12>
</e-indicator>
</e-indicators>
</ejs-chart>
Fast period for MACD indicator Property: longPeriod

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator longPeriod="26">
</e-indicator>
</e-indicators>
</ej-chart>
Property: fastPeriod

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator fastPeriod="26">
</e-indicator>
</e-indicators>
</ejs-chart>
Line style for MACD indicator Property: e-macd-line

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator>
<e-macd-line width=2 fill= "red">
</e-macd-line>
</e-indicator>
</e-indicators>
</ej-chart>
Property: e-technicalindicator-macdline

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator>
<e-technicalindicator-macdline width=2 fill= "red">
</e-technicalindicator-macdline>
</e-indicator>
</e-indicators>
</ejs-chart>
Type of MACD indicator Property: macdType

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator macdType="Both">
</e-indicator>
</e-indicators>
</ej-chart>
Property: macdType

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator macdType="Both">
</e-indicator>
</e-indicators>
</ejs-chart>
Color of the positive bars in Macd indicators Property: Not applicable Property: macdPositiveColor

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator macdPositiveColor="red">
</e-indicator>
</e-indicators>
</ejs-chart>
Color of the negative bars in Macd indicators Property: Not applicable Property: macdNegativeColor

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator macdNegativeColor="red">
</e-indicator>
</e-indicators>
</ejs-chart>
Color for Bollinger bands Property: Not applicable Property: bandColor

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator bandColor="red">
</e-indicator>
</e-indicators>
</ejs-chart>
Appearance of upper line in indicator Property: e-upper-line

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator>
<e-upper-line color="#EECCAA" width="1">
</e-upper-line>
</e-indicator>
</e-indicators>
</ej-chart>
Property: e-technicalindicator-upperline

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator>
<e-technicalindicator-upperline color="#ffb735" width="1" dashArray= "10,5" type="Smooth">
</e-technicalindicator-upperline>
</e-indicator>
</e-indicators>
</ejs-chart>
Appearance of lower line in indicator Property: e-lower-line

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator>
<e-lower-line color="#EECCAA" width="1">
</e-lower-line>
</e-indicator>
</e-indicators>
</ej-chart>
Property: e-technicalindicator-lowerline

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator>
<e-technicalindicator-lowerline color="#ffb735" width="1" dashArray= "10,5" type="Smooth">
</e-technicalindicator-lowerline>
</e-indicator>
</e-indicators>
</ejs-chart>
Appearance of period line in indicator Property: e-period-line

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator>
<e-period-line color="#EECCAA" width="1">
</e-period-line>
</e-indicator>
</e-indicators>
</ej-chart>
Property: e-technicalindicator-periodline

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator>
<e-technicalindicator-periodline color="#ffb735" width="1" dashArray= "10,5" type="Smooth">
</e-technicalindicator-periodline>
</e-indicator>
</e-indicators>
</ejs-chart>
Name of the series for which indicator has to be drawn Property: series-name

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator series-name="">
</e-indicator>
</e-indicators>
</ej-chart>
Property: seriesName

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator seriesName="">
</e-indicator>
</e-indicators>
</ejs-chart>
Options to customize the histogram in MACD indicator Property: e-histogram

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator>
<e-histogram>
</e-histogram>
</e-indicator>
</e-indicators>
</ej-chart>
Property: Not applicable
Enabling animation Property: enableAnimation

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator enableAnimation="true">
</e-indicator>
</e-indicators>
</ej-chart>
Property: e-indicator-animation.enable

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator>
<e-indicator-animation enable="true">
</e-indicator-animation>
</e-indicator>
</e-indicators>
</ejs-chart>
Animation duration Property: animationDuration

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator animationDuration="3000">
</e-indicator>
</e-indicators>
</ej-chart>
Property: e-indicator-animation.duration

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator>
<e-indicator-animation duration=3000>
</e-indicator-animation>
</e-indicator>
</e-indicators>
</ejs-chart>
Tooltip Property: e-tooltip

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator>
<e-tooltip visible="true">
</e-tooltip>
</e-indicator>
</e-indicators>
</ej-chart>
Property: Not applicable
Trigger value of MACD indicator Property: trigger

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator trigger=14>
</e-indicator>
</e-indicators>
</ej-chart>
Property: Not applicable
Fill color for indicator Property: fill

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator fill="#EEDDCC">
</e-indicator>
</e-indicators>
</ej-chart>
Property: fill

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator fill="red">
</e-indicator>
</e-indicators>
</ejs-chart>
Width for indicator Property: width

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator width=2>
</e-indicator>
</e-indicators>
</ej-chart>
Property: width

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator width=2>
</e-indicator>
</e-indicators>
</ejs-chart>
xAxis Name of indicator Property: xAxisName

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator xAxisName="">
</e-indicator>
</e-indicators>
</ej-chart>
Property: xAxisName

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator xAxisName="">
</e-indicator>
</e-indicators>
</ejs-chart>
xAxis Name of indicator Property: yAxisName

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator yAxisName="">
</e-indicator>
</e-indicators>
</ej-chart>
Property: yAxisName

<ejs-chart id="ADIContainer">
<e-indicators>
<e-indicator yAxisName="">
</e-indicator>
</e-indicators>
</ejs-chart>
Visibility of indicator Property: visibility

<ej-chart id="chartContainer">
<e-indicators>
<e-indicator visibility="true">
</e-indicator>
</e-indicators>
</ej-chart>
Property: Not applicable

primaryXAxis

Behavior API in Essential JS 1 API in Essential JS 2
Alternate grid band Property: alternateGridBand

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-alternate-grid-band>
</e-alternate-grid-band>
</e-primary-x-axis>
</ej-chart>
Not applicable
Axis line cross value Property: crosses-at

<ej-chart id="chartContainer">
<e-primary-x-axis crosses-at="0">
</e-primary-x-axis>
</ej-chart>
Property: crossesAt
<ejs-chart id="Container">
<e-chart-primaryxaxis crossesAt="5">
</e-chart-primaryxaxis>
</ejs-chart>
Axis name with which the axis line has to be crossed Property: crosses-in-axis

<ej-chart id="chartContainer">
<e-primary-x-axis crosses-in-axis="">
</e-primary-x-axis>
</ej-chart>
Property: crossesInAxis
<ejs-chart id="Container">
<e-chart-primaryxaxis crossesInAxis="">
</e-chart-primaryxaxis>
</ejs-chart>
Axis elements placed with axis line Property: show-next-to-axis-line

<ej-chart id="chartContainer">
<e-primary-x-axis show-next-to-axis-line="false">
</e-primary-x-axis>
</ej-chart>
Property: placeNextToAxisLine
<ejs-chart id="Container">
<e-chart-primaryxaxis placeNextToAxisLine="">
</e-chart-primaryxaxis>
</ejs-chart>
Axis line style Property: e-axis-line.color

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-axis-line color="red">
</e-axis-line>
</e-primary-x-axis>
</ej-chart>
Property: e-linestyle.color
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-linestyle color="black">
</e-linestyle>
</e-chart-primaryxaxis>
</ejs-chart>
Axis line dashArray Property: e-axis-line.dashArray

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-axis-line dashArray="10, 5">
</e-axis-line>
</e-primary-x-axis>
</ej-chart>
Property: e-linestyle.dashArray
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-linestyle dashArray="10, 5">
</e-linestyle>
</e-chart-primaryxaxis>
</ejs-chart>
Offset for axis Property: e-axis-line.offset

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-axis-line offset="10">
</e-axis-line>
</e-primary-x-axis>
</ej-chart>
Property: plotOffset
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-linestyle plotOffset="10">
</e-linestyle>
</e-chart-primaryxaxis>
</ejs-chart>
Visible of an axis Property: e-axis-line.visible

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-axis-line visible="false">
</e-axis-line>
</e-primary-x-axis>
</ej-chart>
Property: visible
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-linestyle visible="false">
</e-linestyle>
</e-chart-primaryxaxis>
</ejs-chart>
Width of an axis Property: e-axis-line.width

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-axis-line width="30">
</e-axis-line>
</e-primary-x-axis>
</ej-chart>
Property: width
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-linestyle width="30">
</e-linestyle>
</e-chart-primaryxaxis>
</ejs-chart>
Column index of an axis Property: columnIndex

<ej-chart id="chartContainer">
<e-primary-x-axis columnIndex=2>
</e-primary-x-axis>
</ej-chart>
Property: columnIndex
<ejs-chart id="Container">
<e-chart-primaryxaxis columnIndex=2>
</e-chart-primaryxaxis>
</ejs-chart>
Span of an axis to place horizontally or vertically Property: columnSpan

<ej-chart id="chartContainer">
<e-primary-x-axis columnSpan=2>
</e-primary-x-axis>
</ej-chart>
Property: span
<ejs-chart id="Container">
<e-chart-primaryxaxis span=2>
</e-chart-primaryxaxis>
</ejs-chart>
Crosshair label of an axis Property: e-crosshair-label.visible

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-crosshair-label visible="true">
</e-crosshair-label>
</e-primary-x-axis>
</ej-chart>
Property: e-crosshairtooltip.enable
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-crosshairtooltip enable="true">
</e-crosshairtooltip>
</e-chart-primaryxaxis>
</ejs-chart>
Crosshair label color of an axis Property: Not applicable Property: e-crosshairtooltip.fill
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-crosshairtooltip fill="red">
</e-crosshairtooltip>
</e-chart-primaryxaxis>
</ejs-chart>
Crosshair label text style Property: Not applicable Property: e-crosshairtooltip.textStyle
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-crosshairtooltip textStyle="">
</e-crosshairtooltip>
</e-chart-primaryxaxis>
</ejs-chart>
Desired interval count for primaryXAxis Property: desiredIntervals

<ej-chart id="chartContainer">
<e-primary-x-axis desiredIntervals=4>
</e-primary-x-axis>
</ej-chart>
Property: desiredIntervals
<ejs-chart id="Container">
<e-chart-primaryxaxis desiredIntervals=4 >
</e-chart-primaryxaxis>
</ejs-chart>
Edges primaryXAxis Property: edgeLabelPlacement

<ej-chart id="chartContainer">
<e-primary-x-axis edgeLabelPlacement="None">
</e-primary-x-axis>
</ej-chart>
Property: edgeLabelPlacement
<ejs-chart id="Container">
<e-chart-primaryxaxis edgeLabelPlacement="Shift" >
</e-chart-primaryxaxis>
</ejs-chart>
Enables trim for axis labels Property: enable-trim

<ej-chart id="chartContainer">
<e-primary-x-axis enable-trim="true">
</e-primary-x-axis>
</ej-chart>
Property: enableTrim
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-crosshairtooltip enableTrim="true">
</e-crosshairtooltip>
</e-chart-primaryxaxis>
</ejs-chart>
Specifies the interval of the axis according to the zoomed data of the chart Property: enableAutoIntervalOnZooming

<ej-chart id="chartContainer">
<e-primary-x-axis enableAutoIntervalOnZooming="true">
</e-primary-x-axis>
</ej-chart>
Property: enableAutoIntervalOnZooming
<ejs-chart id="Container">
<e-chart-primaryxaxis enableAutoIntervalOnZooming="true">
</e-chart-primaryxaxis>
</ejs-chart>
Font style for primaryXAxis Property: e-font

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-font color="Blue" font-weight="Bold" font-family="Segoe UI" font-size="14px">
</e-font>
</e-primary-x-axis>
</ej-chart>
Property: titleStyle
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-titlestyle>
</e-titlestyle>
</e-chart-primaryxaxis>
</ejs-chart>
Indexed for category axis Property: is-indexed

<ej-chart id="chartContainer">
<e-primary-x-axis is-indexed="true">
</e-primary-x-axis>
</ej-chart>
Property: isIndexed
<ejs-chart id="Container">
<e-chart-primaryxaxis isIndexed ="true">
</e-chart-primaryxaxis>
</ejs-chart>
Interval type for date time axis Property: interval-type

<ej-chart id="chartContainer">
<e-primary-x-axis interval-type="Auto">
</e-primary-x-axis>
</ej-chart>
Property: intervalType
<ejs-chart id="Container">
<e-chart-primaryxaxis intervalType ="Auto">
</e-chart-primaryxaxis>
</ejs-chart>
Inversed axis Property: is-inversed

<ej-chart id="chartContainer">
<e-primary-x-axis is-inversed="true">
</e-primary-x-axis>
</ej-chart>
Property: isInversed
<ejs-chart id="Container">
<e-chart-primaryxaxis isInversed ="true">
</e-chart-primaryxaxis>
</ejs-chart>
Custom label format Property: label-format

<ej-chart id="chartContainer">
<e-primary-x-axis label-format="{value}K">
</e-primary-x-axis>
</ej-chart>
Property: labelFormat
<ejs-chart id="Container">
<e-chart-primaryxaxis labelFormat ="{value}K">
</e-chart-primaryxaxis>
</ejs-chart>
labelIntersectAction Property: label-intersect-action

<ej-chart id="chartContainer">
<e-primary-x-axis label-intersect-action="Hide">
</e-primary-x-axis>
</ej-chart>
Property: labelIntersectAction
<ejs-chart id="Container">
<e-chart-primaryxaxis labelIntersectAction="Hide">
</e-chart-primaryxaxis>
</ejs-chart>
labelPosition Property: axislabel-position

<ej-chart id="chartContainer">
<e-primary-x-axis axislabel-position="Inside">
</e-primary-x-axis>
</ej-chart>
Property: labelPosition
<ejs-chart id="Container">
<e-chart-primaryxaxis labelPosition="Inside">
</e-chart-primaryxaxis>
</ejs-chart>
labelPlacement for category axis Property: label-placement

<ej-chart id="chartContainer">
<e-primary-x-axis label-placement="onTicks">
</e-primary-x-axis>
</ej-chart>
Property: labelPlacement
<ejs-chart id="Container">
<e-chart-primaryxaxis labelPlacement="onTicks">
</e-chart-primaryxaxis>
</ejs-chart>
Rotation of axis labels Property: label-rotation

<ej-chart id="chartContainer">
<e-primary-x-axis label-rotation="45">
</e-primary-x-axis>
</ej-chart>
Property: labelRotation
<ejs-chart id="Container">
<e-chart-primaryxaxis labelRotation="45">
</e-chart-primaryxaxis>
</ejs-chart>
Axis label alignment Property: alignment

<ej-chart id="chartContainer">
<e-primary-x-axis alignment="Center">
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Log base value for logarithmic axis Property: log-base

<ej-chart id="chartContainer">
<e-primary-x-axis log-base="10">
</e-primary-x-axis>
</ej-chart>
Property: logBase
<ejs-chart id="Container">
<e-chart-primaryxaxis logBase="10">
</e-chart-primaryxaxis>
</ejs-chart>
Major grid line Property: e-major-grid-lines.visible

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-grid-lines visible="true">
</e-major-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Width of MajorGridLines Property: e-major-grid-lines.width

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-grid-lines width="2">
</e-major-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-majorgridlines.width
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorgridlines width="2">
</e-majorgridlines>
</e-chart-primaryxaxis>
</ejs-chart>
Color of MajorGridLines Property: e-major-grid-lines.color

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-grid-lines color="red">
</e-major-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-majorgridlines.color
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorgridlines color="red">
</e-majorgridlines>
</e-chart-primaryxaxis>
</ejs-chart>
DashArray of MajorGridLines Property: e-major-grid-lines.dash-array

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-grid-lines dash-array="4,5">
</e-major-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-majorgridlines.dashArray
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorgridlines dashArray="4,5">
</e-majorgridlines>
</e-chart-primaryxaxis>
</ejs-chart>
Opacity of MajorGridLines Property: e-major-grid-lines.opacity

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-grid-lines opacity="5">
</e-major-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Major Tick line Property: e-major-tick-lines.visible

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-tick-lines visible="true">
</e-major-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Width of MajorTickLines Property: e-major-tick-lines.width

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-tick-lines width="2">
</e-major-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-majorticklines.width
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorticklines width="2">
</e-majorticklines>
</e-chart-primaryxaxis>
</ejs-chart>
Height of MajorTickLines Property: e-major-tick-lines.size

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-tick-lines size="2">
</e-major-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-majorticklines.height
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorticklines height="2">
</e-majorticklines>
</e-chart-primaryxaxis>
</ejs-chart>
Color of MajorTickLines Property: e-major-tick-lines.color

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-tick-lines color="red">
</e-major-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-majorticklines.color
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorticklines color="red">
</e-majorticklines>
</e-chart-primaryxaxis>
</ejs-chart>
Opacity of MajorTickLines Property: e-major-tick-lines.opacity

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-major-tick-lines opacity="3">
</e-major-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
maximum labels of primaryXAxis Property: maximum-labels

<ej-chart id="chartContainer">
<e-primary-x-axis maximum-labels="3">
</e-primary-x-axis>
</ej-chart>
Property: maximumLabels
<ejs-chart id="Container">
<e-chart-primaryxaxis maximumLabels="3">
</e-chart-primaryxaxis>
</ejs-chart>
maximum labels width of primaryXAxis to trim Property: maximum-label-width

<ej-chart id="chartContainer">
<e-primary-x-axis maximum-label-width="3">
</e-primary-x-axis>
</ej-chart>
Property: maximumLabelWidth
<ejs-chart id="Container">
<e-chart-primaryxaxis maximumLabelWidth="3">
</e-chart-primaryxaxis>
</ejs-chart>
Minor grid line Property: e-minor-grid-lines.visible

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-grid-lines visible="true">
</e-minor-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Width of MinorGridLines Property: e-minor-grid-lines.width

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-grid-lines width="2">
</e-minor-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-minorgridlines.width
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-minorgridlines width="2">
</e-minorgridlines>
</e-chart-primaryxaxis>
</ejs-chart>
Color of MinorGridLines Property: e-minor-grid-lines.color

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-grid-lines color="red">
</e-minor-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-minorgridlines.color
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-minorgridlines color="red">
</e-minorgridlines>
</e-chart-primaryxaxis>
</ejs-chart>
DashArray of MinorGridLines Property: e-minor-grid-lines.dash-array

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-grid-lines dash-array="4,5">
</e-minor-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-minorgridlines.dashArray
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-minorgridlines dashArray="4,5">
</e-minorgridlines>
</e-chart-primaryxaxis>
</ejs-chart>
Opacity of MinorGridLines Property: e-minor-grid-lines.opacity

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-grid-lines opacity="5">
</e-minor-grid-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Minor Tick line Property: e-minor-tick-lines.visible

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-tick-lines visible="true">
</e-minor-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Width of MinorTickLines Property: e-minor-tick-lines.width

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-tick-lines width="2">
</e-minor-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-minorticklines.width
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-minorticklines width="2">
</e-minorticklines>
</e-chart-primaryxaxis>
</ejs-chart>
Height of MinorTickLines Property: e-minor-tick-lines.size

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-tick-lines size="2">
</e-minor-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-minorticklines.height
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-majorticklines height="2">
</e-minorticklines>
</e-chart-primaryxaxis>
</ejs-chart>
Color of MinorTickLines Property: e-minor-tick-lines.color

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-tick-lines color="red">
</e-minor-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-minorticklines.color
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-minorticklines color="red">
</e-minorticklines>
</e-chart-primaryxaxis>
</ejs-chart>
Opacity of MinorTickLines Property: e-major-tick-lines.opacity

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-minor-tick-lines opacity="3">
</e-minor-tick-lines>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Minor ticks per interval of primaryXAxis Property: minor-ticks-per-interval

<ej-chart id="chartContainer">
<e-primary-x-axis minor-ticks-per-interval="3">
</e-primary-x-axis>
</ej-chart>
Property: minorTicksPerInterval
<ejs-chart id="Container">
<e-chart-primaryxaxis minorTicksPerInterval="3">
</e-chart-primaryxaxis>
</ejs-chart>
Name of the primaryXAxis Property: name

<ej-chart id="chartContainer">
<e-primary-x-axis name="primaryXAxis">
</e-primary-x-axis>
</ej-chart>
Property: name
<ejs-chart id="Container">
<e-chart-primaryxaxis name="primaryXAxis">
</e-chart-primaryxaxis>
</ejs-chart>
Orientation of the primaryXAxis Property: orientation

<ej-chart id="chartContainer">
<e-primary-x-axis orientation="Vertical">
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
Plot offset for primaryXAxis Property: plot-offset

<ej-chart id="chartContainer">
<e-primary-x-axis plot-offset="0">
</e-primary-x-axis>
</ej-chart>
Property: plotOffset
<ejs-chart id="Container">
<e-chart-primaryxaxis plotOffset="0">
</e-chart-primaryxaxis>
</ejs-chart>
Minimum for primaryXAxis Property: e-range.min

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-range min="3">
</e-range>
</e-primary-x-axis>
</ej-chart>
Property: minimum
<ejs-chart id="Container">
<e-chart-primaryxaxis minimum="4">
</e-chart-primaryxaxis>
</ejs-chart>
Maximum for primaryXAxis Property: e-range.max

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-range max="3">
</e-range>
</e-primary-x-axis>
</ej-chart>
Property: maximum
<ejs-chart id="Container">
<e-chart-primaryxaxis maximum="4">
</e-chart-primaryxaxis>
</ejs-chart>
Interval for primaryXAxis Property: e-range.interval

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-range interval="3">
</e-range>
</e-primary-x-axis>
</ej-chart>
Property: interval
<ejs-chart id="Container">
<e-chart-primaryxaxis interval="4">
</e-chart-primaryxaxis>
</ejs-chart>
RangePadding for primaryXAxis Property: range-padding

<ej-chart id="chartContainer">
<e-primary-x-axis range-padding="None">
</e-primary-x-axis>
</ej-chart>
Property: rangePadding
<ejs-chart id="Container">
<e-chart-primaryxaxis rangePadding="None">
</e-chart-primaryxaxis>
</ejs-chart>
Rounding Places in primaryXAxis Property: rounding-places

<ej-chart id="chartContainer">
<e-primary-x-axis rounding-places="2">
</e-primary-x-axis>
</ej-chart>
Property: labelFormat
<ejs-chart id="Container">
<e-chart-primaryxaxis labelFormat="n3">
</e-chart-primaryxaxis>
</ejs-chart>
ScrollBar settings of primaryXAxis Property: e-scrollbar-settings

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-scrollbar-settings visible="true">
</e-scrollbar-settings>
</e-primary-x-axis>
</ej-chart>
Property: Not Applicable
TickPosition in primaryXAxis Property: tick-lines-position

<ej-chart id="chartContainer">
<e-primary-x-axis tick-lines-position="Inside">
</e-primary-x-axis>
</ej-chart>
Property: tickPosition
<ejs-chart id="Container">
<e-chart-primaryxaxis tickPosition="Inside">
</e-chart-primaryxaxis>
</ejs-chart>
ValueType of primaryXAxis Property: value-type

<ej-chart id="chartContainer">
<e-primary-x-axis value-type="DateTime">
</e-primary-x-axis>
</ej-chart>
Property: valueType
<ejs-chart id="Container">
<e-chart-primaryxaxis valueType="DateTime">
</e-chart-primaryxaxis>
</ejs-chart>
visible of primaryXAxis Property: visible

<ej-chart id="chartContainer">
<e-primary-x-axis visible="true">
</e-primary-x-axis>
</ej-chart>
Property: visible
<ejs-chart id="Container">
<e-chart-primaryxaxis visible="true">
</e-chart-primaryxaxis>
</ejs-chart>
ZoomFactor of primaryXAxis Property: zoom-factor

<ej-chart id="chartContainer">
<e-primary-x-axis zoom-factor="0.3">
</e-primary-x-axis>
</ej-chart>
Property: zoomFactor
<ejs-chart id="Container">
<e-chart-primaryxaxis zoomFactor="0.3">
</e-chart-primaryxaxis>
</ejs-chart>
ZoomPosition of primaryXAxis Property: zoom-position

<ej-chart id="chartContainer">
<e-primary-x-axis zoom-position="0.3">
</e-primary-x-axis>
</ej-chart>
Property: zoomPosition
<ejs-chart id="Container">
<e-chart-primaryxaxis zoomPosition="0.3">
</e-chart-primaryxaxis>
</ejs-chart>
labelBorder of primaryXAxis Property: e-border

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-border color="red" width="3">
</e-border>
</e-primary-x-axis>
</ej-chart>
Property: border
<ejs-chart id="Container">
<e-chart-primaryxaxis>
<e-border color="red" width="2">
</e-border>
</e-chart-primaryxaxis>
</ejs-chart>
Title of primaryXAxis Property: e-title.text

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-title text="title">
</e-title>
</e-primary-x-axis>
</ej-chart>
Property: title
<ejs-chart id="Container">
<e-chart-primaryxaxis title="Title">
</e-chart-primaryxaxis>
</ejs-chart>
StripLine of primaryXAxis Property: e-strip-lines

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-strip-lines >
</e-strip-lines>
</e-primary-x-axis>
</ej-chart>
Property: e-primaryxaxis-striplines
<ejs-chart id="Container">
<e-chart-primaryxaxis >
<e-primaryxaxis-striplines>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</ejs-chart>
Multilevel labels of primaryXAxis Property: e-multi-level-labels

<ej-chart id="chartContainer">
<e-primary-x-axis>
<e-multi-level-labels>
</e-multi-level-labels>
</e-primary-x-axis>
</ej-chart>
Property: e-primaryxaxis-multilevellabels
<ejs-chart id="Container">
<e-chart-primaryxaxis >
<e-primaryxaxis-multilevellabels>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</ejs-chart>
Skeleton for an axes Property: Not Applicable Property: skeleton
<ejs-chart id="Container">
<e-chart-primaryxaxis >
<e-chart-axes><e-chart-axis skeleton="yMd">
</e-chart-axis>
</e-chart-axes>
</e-chart-primaryxaxis>
</ejs-chart>
Skeleton type for an axes Property: Not Applicable Property: skeletonType
<ejs-chart id="Container">
<e-chart-primaryxaxis >
<e-chart-axes><e-chart-axis skeletonType="Date">
</e-chart-axis>
</e-chart-axes>
</e-chart-primaryxaxis>
</ejs-chart>

primaryYAxis

Behavior API in Essential JS 1 API in Essential JS 2
Alternate grid band Property: alternateGridBand

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-alternate-grid-band>
</e-alternate-grid-band>
</e-primary-y-axis>
</ej-chart>
Not applicable
Axis line cross value Property: crosses-at

<ej-chart id="chartContainer">
<e-primary-y-axis crosses-at="0">
</e-primary-y-axis>
</ej-chart>
Property: crossesAt
<ejs-chart id="Container">
<e-chart-primaryyaxis crossesAt="5">
</e-chart-primaryyaxis>
</ejs-chart>
Axis name with which the axis line has to be crossed Property: crosses-in-axis

<ej-chart id="chartContainer">
<e-primary-y-axis crosses-in-axis="">
</e-primary-y-axis>
</ej-chart>
Property: crossesInAxis
<ejs-chart id="Container">
<e-chart-primaryyaxis crossesInAxis="">
</e-chart-primaryyaxis>
</ejs-chart>
Axis elements placed with axis line Property: show-next-to-axis-line

<ej-chart id="chartContainer">
<e-primary-y-axis show-next-to-axis-line="false">
</e-primary-y-axis>
</ej-chart>
Property: placeNextToAxisLine
<ejs-chart id="Container">
<e-chart-primaryyaxis placeNextToAxisLine="">
</e-chart-primaryyaxis>
</ejs-chart>
Axis line style Property: e-axis-line.color

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-axis-line color="red">
</e-axis-line>
</e-primary-y-axis>
</ej-chart>
Property: e-linestyle.color
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-linestyle color="black">
</e-linestyle>
</e-chart-primaryyaxis>
</ejs-chart>
Axis line dashArray Property: e-axis-line.dashArray

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-axis-line dashArray="10, 5">
</e-axis-line>
</e-primary-y-axis>
</ej-chart>
Property: e-linestyle.dashArray
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-linestyle dashArray="10, 5">
</e-flinestyle>
</e-chart-primaryyaxis>
</ejs-chart>
Offset for axis Property: e-axis-line.offset

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-axis-line offset="10">
</e-axis-line>
</e-primary-y-axis>
</ej-chart>
Property: plotOffset
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-linestyle plotOffset="10">
</e-linestyle>
</e-chart-primaryyaxis>
</ejs-chart>
Visible of an axis Property: e-axis-line.visible

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-axis-line visible="false">
</e-axis-line>
</e-primary-y-axis>
</ej-chart>
Property: visible
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-linestyle visible="false">
</e-linestyle>
</e-chart-primaryyaxis>
</ejs-chart>
Width of an axis Property: e-axis-line.width

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-axis-line width="30">
</e-axis-line>
</e-primary-y-axis>
</ej-chart>
Property: width
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-linestyle width="30">
</e-linestyle>
</e-chart-primaryyaxis>
</ejs-chart>
Column index of an axis Property: columnIndex

<ej-chart id="chartContainer">
<e-primary-y-axis columnIndex=2>
</e-primary-y-axis>
</ej-chart>
Property: columnIndex
<ejs-chart id="Container">
<e-chart-primaryyaxis columnIndex=2>
</e-chart-primaryyaxis>
</ejs-chart>
Span of an axis to place horizontally or vertically Property: columnSpan

<ej-chart id="chartContainer">
<e-primary-y-axis columnSpan=2>
</e-primary-y-axis>
</ej-chart>
Property: span
<ejs-chart id="Container">
<e-chart-primaryyaxis span=2>
</e-chart-primaryyaxis>
</ejs-chart>
Crosshair label of an axis Property: e-crosshair-label.visible

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-crosshair-label visible="true">
</e-crosshair-label>
</e-primary-y-axis>
</ej-chart>
Property: e-crosshairtooltip.enable
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-crosshairtooltip enable="true">
</e-crosshairtooltip>
</e-chart-primaryyaxis>
</ejs-chart>
Crosshair label color of an axis Property: Not applicable Property: e-crosshairtooltip.fill
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-crosshairtooltip fill="red">
</e-crosshairtooltip>
</e-chart-primaryyaxis>
</ejs-chart>
Crosshair label text style Property: Not applicable Property: e-crosshairtooltip.textStyle
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-crosshairtooltip textStyle="">
</e-crosshairtooltip>
</e-chart-primaryyaxis>
</ejs-chart>
Desired interval count for primaryyaxis Property: desiredIntervals

<ej-chart id="chartContainer">
<e-primary-y-axis desiredIntervals=4>
</e-primary-y-axis>
</ej-chart>
Property: desiredIntervals
<ejs-chart id="Container">
<e-chart-primaryyaxis desiredIntervals=4 >
</e-chart-primaryyaxis>
</ejs-chart>
Edges primaryyaxis Property: edgeLabelPlacement

<ej-chart id="chartContainer">
<e-primary-y-axis edgeLabelPlacement="None">
</e-primary-y-axis>
</ej-chart>
Property: edgeLabelPlacement
<ejs-chart id="Container">
<e-chart-primaryyaxis edgeLabelPlacement="Shift" >
</e-chart-primaryyaxis>
</ejs-chart>
Enables trim for axis labels Property: enable-trim

<ej-chart id="chartContainer">
<e-primary-y-axis enable-trim="true">
</e-primary-y-axis>
</ej-chart>
Property: enableTrim
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-crosshairtooltip enableTrim="true">
</e-crosshairtooltip>
</e-chart-primaryyaxis>
</ejs-chart>
Specifies the interval of the axis according to the zoomed data of the chart Property: enableAutoIntervalOnZooming

<ej-chart id="chartContainer">
<e-primary-y-axis enableAutoIntervalOnZooming="true">
</e-primary-y-axis>
</ej-chart>
Property: enableAutoIntervalOnZooming
<ejs-chart id="Container">
<e-chart-primaryyaxis enableAutoIntervalOnZooming="true">
</e-chart-primaryyaxis>
</ejs-chart>
Font style for primaryyaxis Property: e-font

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-font color="Blue" font-weight="Bold" font-family="Segoe UI" font-size="14px">
</e-font>
</e-primary-y-axis>
</ej-chart>
Property: titleStyle
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-titlestyle>
</e-titlestyle>
</e-chart-primaryyaxis>
</ejs-chart>
Indexed for category axis Property: is-indexed

<ej-chart id="chartContainer">
<e-primary-y-axis is-indexed="true">
</e-primary-y-axis>
</ej-chart>
Property: isIndexed
<ejs-chart id="Container">
<e-chart-primaryyaxis isIndexed ="true">
</e-chart-primaryyaxis>
</ejs-chart>
Interval type for date time axis Property: interval-type

<ej-chart id="chartContainer">
<e-primary-y-axis interval-type="Auto">
</e-primary-y-axis>
</ej-chart>
Property: intervalType
<ejs-chart id="Container">
<e-chart-primaryyaxis intervalType ="Auto">
</e-chart-primaryyaxis>
</ejs-chart>
Inversed axis Property: is-inversed

<ej-chart id="chartContainer">
<e-primary-y-axis is-inversed="true">
</e-primary-y-axis>
</ej-chart>
Property: isInversed
<ejs-chart id="Container">
<e-chart-primaryyaxis isInversed ="true">
</e-chart-primaryyaxis>
</ejs-chart>
Custom label format Property: label-format

<ej-chart id="chartContainer">
<e-primary-y-axis label-format="{value}K">
</e-primary-y-axis>
</ej-chart>
Property: labelFormat
<ejs-chart id="Container">
<e-chart-primaryyaxis labelFormat ="{value}K">
</e-chart-primaryyaxis>
</ejs-chart>
labelIntersectAction Property: label-intersect-action

<ej-chart id="chartContainer">
<e-primary-y-axis label-intersect-action="Hide">
</e-primary-y-axis>
</ej-chart>
Property: labelIntersectAction
<ejs-chart id="Container">
<e-chart-primaryyaxis labelIntersectAction="Hide">
</e-chart-primaryyaxis>
</ejs-chart>
labelPosition Property: axislabel-position

<ej-chart id="chartContainer">
<e-primary-y-axis axislabel-position="Inside">
</e-primary-y-axis>
</ej-chart>
Property: labelPosition
<ejs-chart id="Container">
<e-chart-primaryyaxis labelPosition="Inside">
</e-chart-primaryyaxis>
</ejs-chart>
labelPlacement for category axis Property: label-placement

<ej-chart id="chartContainer">
<e-primary-y-axis label-placement="onTicks">
</e-primary-y-axis>
</ej-chart>
Property: labelPlacement
<ejs-chart id="Container">
<e-chart-primaryyaxis labelPlacement="onTicks">
</e-chart-primaryyaxis>
</ejs-chart>
Rotation of axis labels Property: label-rotation

<ej-chart id="chartContainer">
<e-primary-y-axis label-rotation="45">
</e-primary-y-axis>
</ej-chart>
Property: labelRotation
<ejs-chart id="Container">
<e-chart-primaryyaxis labelRotation="45">
</e-chart-primaryyaxis>
</ejs-chart>
Axis label alignment Property: alignment

<ej-chart id="chartContainer">
<e-primary-y-axis alignment="Center">
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Log base value for logarithmic axis Property: log-base

<ej-chart id="chartContainer">
<e-primary-y-axis log-base="10">
</e-primary-y-axis>
</ej-chart>
Property: logBase
<ejs-chart id="Container">
<e-chart-primaryyaxis logBase="10">
</e-chart-primaryyaxis>
</ejs-chart>
Major grid line Property: e-major-grid-lines.visible

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-grid-lines visible="true">
</e-major-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Width of MajorGridLines Property: e-major-grid-lines.width

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-grid-lines width="2">
</e-major-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-majorgridlines.width
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorgridlines width="2">
</e-majorgridlines>
</e-chart-primaryyaxis>
</ejs-chart>
Color of MajorGridLines Property: e-major-grid-lines.color

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-grid-lines color="red">
</e-major-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-majorgridlines.color
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorgridlines color="red">
</e-majorgridlines>
</e-chart-primaryyaxis>
</ejs-chart>
DashArray of MajorGridLines Property: e-major-grid-lines.dash-array

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-grid-lines dash-array="4,5">
</e-major-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-majorgridlines.dashArray
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorgridlines dashArray="4,5">
</e-majorgridlines>
</e-chart-primaryyaxis>
</ejs-chart>
Opacity of MajorGridLines Property: e-major-grid-lines.opacity

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-grid-lines opacity="5">
</e-major-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Major Tick line Property: e-major-tick-lines.visible

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-tick-lines visible="true">
</e-major-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Width of MajorTickLines Property: e-major-tick-lines.width

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-tick-lines width="2">
</e-major-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-majorticklines.width
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorticklines width="2">
</e-majorticklines>
</e-chart-primaryyaxis>
</ejs-chart>
Height of MajorTickLines Property: e-major-tick-lines.size

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-tick-lines size="2">
</e-major-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-majorticklines.height
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorticklines height="2">
</e-majorticklines>
</e-chart-primaryyaxis>
</ejs-chart>
Color of MajorTickLines Property: e-major-tick-lines.color

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-tick-lines color="red">
</e-major-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-majorticklines.color
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorticklines color="red">
</e-majorticklines>
</e-chart-primaryyaxis>
</ejs-chart>
Opacity of MajorTickLines Property: e-major-tick-lines.opacity

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-major-tick-lines opacity="3">
</e-major-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
maximum labels of primaryyaxis Property: maximum-labels

<ej-chart id="chartContainer">
<e-primary-y-axis maximum-labels="3">
</e-primary-y-axis>
</ej-chart>
Property: maximumLabels
<ejs-chart id="Container">
<e-chart-primaryyaxis maximumLabels="3">
</e-chart-primaryyaxis>
</ejs-chart>
maximum labels width of primaryyaxis to trim Property: maximum-label-width

<ej-chart id="chartContainer">
<e-primary-y-axis maximum-label-width="3">
</e-primary-y-axis>
</ej-chart>
Property: maximumLabelWidth
<ejs-chart id="Container">
<e-chart-primaryyaxis maximumLabelWidth="3">
</e-chart-primaryyaxis>
</ejs-chart>
Minor grid line Property: e-minor-grid-lines.visible

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-grid-lines visible="true">
</e-minor-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Width of MinorGridLines Property: e-minor-grid-lines.width

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-grid-lines width="2">
</e-minor-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-minorgridlines.width
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-minorgridlines width="2">
</e-minorgridlines>
</e-chart-primaryyaxis>
</ejs-chart>
Color of MinorGridLines Property: e-minor-grid-lines.color

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-grid-lines color="red">
</e-minor-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-minorgridlines.color
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-minorgridlines color="red">
</e-minorgridlines>
</e-chart-primaryyaxis>
</ejs-chart>
DashArray of MinorGridLines Property: e-minor-grid-lines.dash-array

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-grid-lines dash-array="4,5">
</e-minor-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-minorgridlines.dashArray
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-minorgridlines dashArray="4,5">
</e-minorgridlines>
</e-chart-primaryyaxis>
</ejs-chart>
Opacity of MinorGridLines Property: e-minor-grid-lines.opacity

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-grid-lines opacity="5">
</e-minor-grid-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Minor Tick line Property: e-minor-tick-lines.visible

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-tick-lines visible="true">
</e-minor-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Width of MinorTickLines Property: e-minor-tick-lines.width

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-tick-lines width="2">
</e-minor-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-minorticklines.width
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-minorticklines width="2">
</e-minorticklines>
</e-chart-primaryyaxis>
</ejs-chart>
Height of MinorTickLines Property: e-minor-tick-lines.size

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-tick-lines size="2">
</e-minor-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-minorticklines.height
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-majorticklines height="2">
</e-minorticklines>
</e-chart-primaryyaxis>
</ejs-chart>
Color of MinorTickLines Property: e-minor-tick-lines.color

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-tick-lines color="red">
</e-minor-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-minorticklines.color
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-minorticklines color="red">
</e-minorticklines>
</e-chart-primaryyaxis>
</ejs-chart>
Opacity of MinorTickLines Property: e-major-tick-lines.opacity

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-minor-tick-lines opacity="3">
</e-minor-tick-lines>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Minor ticks per interval of primaryyaxis Property: minor-ticks-per-interval

<ej-chart id="chartContainer">
<e-primary-y-axis minor-ticks-per-interval="3">
</e-primary-y-axis>
</ej-chart>
Property: minorTicksPerInterval
<ejs-chart id="Container">
<e-chart-primaryyaxis minorTicksPerInterval="3">
</e-chart-primaryyaxis>
</ejs-chart>
Name of the primaryyaxis Property: name

<ej-chart id="chartContainer">
<e-primary-y-axis name="primaryyaxis">
</e-primary-y-axis>
</ej-chart>
Property: name
<ejs-chart id="Container">
<e-chart-primaryyaxis name="primaryyaxis">
</e-chart-primaryyaxis>
</ejs-chart>
Orientation of the primaryyaxis Property: orientation

<ej-chart id="chartContainer">
<e-primary-y-axis orientation="Vertical">
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
Plot offset for primaryyaxis Property: plot-offset

<ej-chart id="chartContainer">
<e-primary-y-axis plot-offset="0">
</e-primary-y-axis>
</ej-chart>
Property: plotOffset
<ejs-chart id="Container">
<e-chart-primaryyaxis plotOffset="0">
</e-chart-primaryyaxis>
</ejs-chart>
Minimum for primaryyaxis Property: e-range.min

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-range min="3">
</e-range>
</e-primary-y-axis>
</ej-chart>
Property: minimum
<ejs-chart id="Container">
<e-chart-primaryyaxis minimum="4">
</e-chart-primaryyaxis>
</ejs-chart>
Maximum for primaryyaxis Property: e-range.max

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-range max="3">
</e-range>
</e-primary-y-axis>
</ej-chart>
Property: maximum
<ejs-chart id="Container">
<e-chart-primaryyaxis maximum="4">
</e-chart-primaryyaxis>
</ejs-chart>
Interval for primaryyaxis Property: e-range.interval

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-range interval="3">
</e-range>
</e-primary-y-axis>
</ej-chart>
Property: interval
<ejs-chart id="Container">
<e-chart-primaryyaxis interval="4">
</e-chart-primaryyaxis>
</ejs-chart>
RangePadding for primaryyaxis Property: range-padding

<ej-chart id="chartContainer">
<e-primary-y-axis range-padding="None">
</e-primary-y-axis>
</ej-chart>
Property: rangePadding
<ejs-chart id="Container">
<e-chart-primaryyaxis rangePadding="None">
</e-chart-primaryyaxis>
</ejs-chart>
Rounding Places in primaryyaxis Property: rounding-places

<ej-chart id="chartContainer">
<e-primary-y-axis rounding-places="2">
</e-primary-y-axis>
</ej-chart>
Property: labelFormat
<ejs-chart id="Container">
<e-chart-primaryyaxis labelFormat="n3">
</e-chart-primaryyaxis>
</ejs-chart>
ScrollBar settings of primaryyaxis Property: e-scrollbar-settings

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-scrollbar-settings visible="true">
</e-scrollbar-settings>
</e-primary-y-axis>
</ej-chart>
Property: Not Applicable
TickPosition in primaryyaxis Property: tick-lines-position

<ej-chart id="chartContainer">
<e-primary-y-axis tick-lines-position="Inside">
</e-primary-y-axis>
</ej-chart>
Property: tickPosition
<ejs-chart id="Container">
<e-chart-primaryyaxis tickPosition="Inside">
</e-chart-primaryyaxis>
</ejs-chart>
ValueType of primaryyaxis Property: value-type

<ej-chart id="chartContainer">
<e-primary-y-axis value-type="DateTime">
</e-primary-y-axis>
</ej-chart>
Property: valueType
<ejs-chart id="Container">
<e-chart-primaryyaxis valueType="DateTime">
</e-chart-primaryyaxis>
</ejs-chart>
visible of primaryyaxis Property: visible

<ej-chart id="chartContainer">
<e-primary-y-axis visible="true">
</e-primary-y-axis>
</ej-chart>
Property: visible
<ejs-chart id="Container">
<e-chart-primaryyaxis visible="true">
</e-chart-primaryyaxis>
</ejs-chart>
ZoomFactor of primaryyaxis Property: zoom-factor

<ej-chart id="chartContainer">
<e-primary-y-axis zoom-factor="0.3">
</e-primary-y-axis>
</ej-chart>
Property: zoomFactor
<ejs-chart id="Container">
<e-chart-primaryyaxis zoomFactor="0.3">
</e-chart-primaryyaxis>
</ejs-chart>
ZoomPosition of primaryyaxis Property: zoom-position

<ej-chart id="chartContainer">
<e-primary-y-axis zoom-position="0.3">
</e-primary-y-axis>
</ej-chart>
Property: zoomPosition
<ejs-chart id="Container">
<e-chart-primaryyaxis zoomPosition="0.3">
</e-chart-primaryyaxis>
</ejs-chart>
labelBorder of primaryyaxis Property: e-border

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-border color="red" width="3">
</e-border>
</e-primary-y-axis>
</ej-chart>
Property: border
<ejs-chart id="Container">
<e-chart-primaryyaxis>
<e-border color="red" width="2">
</e-border>
</e-chart-primaryyaxis>
</ejs-chart>
Title of primaryyaxis Property: e-title.text

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-title text="title">
</e-title>
</e-primary-y-axis>
</ej-chart>
Property: title
<ejs-chart id="Container">
<e-chart-primaryyaxis title="Title">
</e-chart-primaryyaxis>
</ejs-chart>
StripLine of primaryyaxis Property: e-strip-lines

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-strip-lines >
</e-strip-lines>
</e-primary-y-axis>
</ej-chart>
Property: e-primaryyaxis-striplines
<ejs-chart id="Container">
<e-chart-primaryyaxis >
<e-primaryyaxis-striplines>
</e-primaryyaxis-striplines>
</e-chart-primaryyaxis>
</ejs-chart>
Multilevel labels of primaryyaxis Property: e-multi-level-labels

<ej-chart id="chartContainer">
<e-primary-y-axis>
<e-multi-level-labels>
</e-multi-level-labels>
</e-primary-y-axis>
</ej-chart>
Property: e-primaryyaxis-multilevellabels
<ejs-chart id="Container">
<e-chart-primaryyaxis >
<e-primaryyaxis-multilevellabels>
</e-primaryyaxis-multilevellabels>
</e-chart-primaryyaxis>
</ejs-chart>
Skeleton for an axes Property: Not Applicable Property: skeleton
<ejs-chart id="Container">
<e-chart-primaryyaxis >
<e-chart-axes><e-chart-axis skeleton="yMd">
</e-chart-axis>
</e-chart-axes>
</e-chart-primaryyaxis>
</ejs-chart>
Skeleton type for an axes Property: Not Applicable Property: skeletonType
<ejs-chart id="Container">
<e-chart-primaryyaxis >
<e-chart-axes><e-chart-axis skeletonType="Date">
</e-chart-axis>
</e-chart-axes>
</e-chart-primaryyaxis>
</ejs-chart>

Axes

Behavior API in Essential JS 1 API in Essential JS 2
Alternate grid band Property: alternateGridBand

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-alternate-grid-band>
</e-alternate-grid-band>
</e-axes></e-axis >
</ej-chart>
Not applicable
Axis line cross value Property: crosses-at

<ej-chart id="chartContainer">
<e-axes><e-axis crosses-at="0">
</e-axes></e-axis >
</ej-chart>
Property: crossesAt
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis crossesAt="5">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Axis name with which the axis line has to be crossed Property: crosses-in-axis

<ej-chart id="chartContainer">
<e-axes><e-axis crosses-in-axis="">
</e-axes></e-axis >
</ej-chart>
Property: crossesInAxis
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis crossesInAxis="">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Axis elements placed with axis line Property: show-next-to-axis-line

<ej-chart id="chartContainer">
<e-axes><e-axis show-next-to-axis-line="false">
</e-axes></e-axis >
</ej-chart>
Property: placeNextToAxisLine
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis placeNextToAxisLine="">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Axis line style Property: e-axis-line.color

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-axis-line color="red">
</e-axis-line>
</e-axes></e-axis >
</ej-chart>
Property: e-linestyle.color
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-linestyle color="black">
</e-linestyle>
</e-chart-axes></e-chart-axis>
</ejs-chart>
Axis line dashArray Property: e-axis-line.dashArray

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-axis-line dashArray="10, 5">
</e-axis-line>
</e-axes></e-axis >
</ej-chart>
Property: e-linestyle.dashArray
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-linestyle dashArray="10, 5">
</e-flinestyle>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Offset for axis Property: e-axis-line.offset

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-axis-line offset="10">
</e-axis-line>
</e-axes></e-axis >
</ej-chart>
Property: plotOffset
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-linestyle plotOffset="10">
</e-linestyle>
</e-chart-axes></e-chart-axis
</ejs-chart>
Visible of an axis Property: e-axis-line.visible

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-axis-line visible="false">
</e-axis-line>
</e-axes></e-axis >
</ej-chart>
Property: visible
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-linestyle visible="false">
</e-linestyle>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Width of an axis Property: e-axis-line.width

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-axis-line width="30">
</e-axis-line>
</e-axes></e-axis >
</ej-chart>
Property: width
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-linestyle width="30">
</e-linestyle>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Column index of an axis Property: columnIndex

<ej-chart id="chartContainer">
<e-axes><e-axis columnIndex=2>
</e-axes></e-axis >
</ej-chart>
Property: columnIndex
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis columnIndex=2>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Span of an axis to place horizontally or vertically Property: columnSpan

<ej-chart id="chartContainer">
<e-axes><e-axis columnSpan=2>
</e-axes></e-axis >
</ej-chart>
Property: span
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis span=2>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Crosshair label of an axis Property: e-crosshair-label.visible

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-crosshair-label visible="true">
</e-crosshair-label>
</e-axes></e-axis >
</ej-chart>
Property: e-crosshairtooltip.enable
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-crosshairtooltip enable="true">
</e-crosshairtooltip>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Crosshair label color of an axis Property: Not applicable Property: e-crosshairtooltip.fill
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-crosshairtooltip fill="red">
</e-crosshairtooltip>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Crosshair label text style Property: Not applicable Property: e-crosshairtooltip.textStyle
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-crosshairtooltip textStyle="">
</e-crosshairtooltip>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Desired interval count for axes Property: desiredIntervals

<ej-chart id="chartContainer">
<e-axes><e-axis desiredIntervals=4>
</e-axes></e-axis >
</ej-chart>
Property: desiredIntervals
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis desiredIntervals=4 >
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Edges axes Property: edgeLabelPlacement

<ej-chart id="chartContainer">
<e-axes><e-axis edgeLabelPlacement="None">
</e-axes></e-axis >
</ej-chart>
Property: edgeLabelPlacement
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis edgeLabelPlacement="Shift" >
</e-chart-axes> </e-chart-axis
</ejs-chart>
Enables trim for axis labels Property: enable-trim

<ej-chart id="chartContainer">
<e-axes><e-axis enable-trim="true">
</e-axes></e-axis >
</ej-chart>
Property: enableTrim
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-crosshairtooltip enableTrim="true">
</e-crosshairtooltip>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Specifies the interval of the axis according to the zoomed data of the chart Property: enableAutoIntervalOnZooming

<ej-chart id="chartContainer">
<e-axes><e-axis enableAutoIntervalOnZooming="true">
</e-axes></e-axis >
</ej-chart>
Property: enableAutoIntervalOnZooming
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis enableAutoIntervalOnZooming="true">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Font style for axes Property: e-font

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-font color="Blue" font-weight="Bold" font-family="Segoe UI" font-size="14px">
</e-font>
</e-axes></e-axis >
</ej-chart>
Property: titleStyle
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-titlestyle>
</e-titlestyle>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Indexed for category axis Property: is-indexed

<ej-chart id="chartContainer">
<e-axes><e-axis is-indexed="true">
</e-axes></e-axis >
</ej-chart>
Property: isIndexed
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis isIndexed ="true">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Interval type for date time axis Property: interval-type

<ej-chart id="chartContainer">
<e-axes><e-axis interval-type="Auto">
</e-axes></e-axis >
</ej-chart>
Property: intervalType
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis intervalType ="Auto">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Inversed axis Property: is-inversed

<ej-chart id="chartContainer">
<e-axes><e-axis is-inversed="true">
</e-axes></e-axis >
</ej-chart>
Property: isInversed
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis isInversed ="true">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Custom label format Property: label-format

<ej-chart id="chartContainer">
<e-axes><e-axis label-format="{value}K">
</e-axes></e-axis >
</ej-chart>
Property: labelFormat
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis labelFormat ="{value}K">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
labelIntersectAction Property: label-intersect-action

<ej-chart id="chartContainer">
<e-axes><e-axis label-intersect-action="Hide">
</e-axes></e-axis >
</ej-chart>
Property: labelIntersectAction
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis labelIntersectAction="Hide">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
labelPosition Property: axislabel-position

<ej-chart id="chartContainer">
<e-axes><e-axis axislabel-position="Inside">
</e-axes></e-axis >
</ej-chart>
Property: labelPosition
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis labelPosition="Inside">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
labelPlacement for category axis Property: label-placement

<ej-chart id="chartContainer">
<e-axes><e-axis label-placement="onTicks">
</e-axes></e-axis >
</ej-chart>
Property: labelPlacement
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis labelPlacement="onTicks">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Rotation of axis labels Property: label-rotation

<ej-chart id="chartContainer">
<e-axes><e-axis label-rotation="45">
</e-axes></e-axis >
</ej-chart>
Property: labelRotation
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis labelRotation="45">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Axis label alignment Property: alignment

<ej-chart id="chartContainer">
<e-axes><e-axis alignment="Center">
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Log base value for logarithmic axis Property: log-base

<ej-chart id="chartContainer">
<e-axes><e-axis log-base="10">
</e-axes></e-axis >
</ej-chart>
Property: logBase
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis logBase="10">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Major grid line Property: e-major-grid-lines.visible

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-grid-lines visible="true">
</e-major-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Width of MajorGridLines Property: e-major-grid-lines.width

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-grid-lines width="2">
</e-major-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-majorgridlines.width
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorgridlines width="2">
</e-majorgridlines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Color of MajorGridLines Property: e-major-grid-lines.color

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-grid-lines color="red">
</e-major-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-majorgridlines.color
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorgridlines color="red">
</e-majorgridlines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
DashArray of MajorGridLines Property: e-major-grid-lines.dash-array

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-grid-lines dash-array="4,5">
</e-major-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-majorgridlines.dashArray
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorgridlines dashArray="4,5">
</e-majorgridlines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Opacity of MajorGridLines Property: e-major-grid-lines.opacity

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-grid-lines opacity="5">
</e-major-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Major Tick line Property: e-major-tick-lines.visible

<ej-chart id="chartContainer">
<e-axes><e-axis>
<e-major-tick-lines visible="true">
</e-major-tick-lines>
</e-axes></e-axis>
</ej-chart>
Property: Not Applicable
Width of MajorTickLines Property: e-major-tick-lines.width

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-tick-lines width="2">
</e-major-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-majorticklines.width
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorticklines width="2">
</e-majorticklines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Height of MajorTickLines Property: e-major-tick-lines.size

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-tick-lines size="2">
</e-major-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-majorticklines.height
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorticklines height="2">
</e-majorticklines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Color of MajorTickLines Property: e-major-tick-lines.color

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-tick-lines color="red">
</e-major-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-majorticklines.color
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorticklines color="red">
</e-majorticklines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Opacity of MajorTickLines Property: e-major-tick-lines.opacity

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-major-tick-lines opacity="3">
</e-major-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
maximum labels of axes Property: maximum-labels

<ej-chart id="chartContainer">
<e-axes><e-axis maximum-labels="3">
</e-axes></e-axis >
</ej-chart>
Property: maximumLabels
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis maximumLabels="3">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
maximum labels width of axes to trim Property: maximum-label-width

<ej-chart id="chartContainer">
<e-axes><e-axis maximum-label-width="3">
</e-axes></e-axis >
</ej-chart>
Property: maximumLabelWidth
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis maximumLabelWidth="3">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Minor grid line Property: e-minor-grid-lines.visible

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-grid-lines visible="true">
</e-minor-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Width of MinorGridLines Property: e-minor-grid-lines.width

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-grid-lines width="2">
</e-minor-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-minorgridlines.width
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-minorgridlines width="2">
</e-minorgridlines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Color of MinorGridLines Property: e-minor-grid-lines.color

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-grid-lines color="red">
</e-minor-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-minorgridlines.color
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-minorgridlines color="red">
</e-minorgridlines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
DashArray of MinorGridLines Property: e-minor-grid-lines.dash-array

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-grid-lines dash-array="4,5">
</e-minor-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-minorgridlines.dashArray
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-minorgridlines dashArray="4,5">
</e-minorgridlines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Opacity of MinorGridLines Property: e-minor-grid-lines.opacity

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-grid-lines opacity="5">
</e-minor-grid-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Minor Tick line Property: e-minor-tick-lines.visible

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-tick-lines visible="true">
</e-minor-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Width of MinorTickLines Property: e-minor-tick-lines.width

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-tick-lines width="2">
</e-minor-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-minorticklines.width
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-minorticklines width="2">
</e-minorticklines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Height of MinorTickLines Property: e-minor-tick-lines.size

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-tick-lines size="2">
</e-minor-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-minorticklines.height
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-majorticklines height="2">
</e-minorticklines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Color of MinorTickLines Property: e-minor-tick-lines.color

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-tick-lines color="red">
</e-minor-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-minorticklines.color
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-minorticklines color="red">
</e-minorticklines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Opacity of MinorTickLines Property: e-major-tick-lines.opacity

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-minor-tick-lines opacity="3">
</e-minor-tick-lines>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Minor ticks per interval of axes Property: minor-ticks-per-interval

<ej-chart id="chartContainer">
<e-axes><e-axis minor-ticks-per-interval="3">
</e-axes></e-axis >
</ej-chart>
Property: minorTicksPerInterval
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis minorTicksPerInterval="3">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Name of the axes Property: name

<ej-chart id="chartContainer">
<e-axes><e-axis name="axes ">
</e-axes></e-axis >
</ej-chart>
Property: name
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis name="axes ">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Orientation of the axes Property: orientation

<ej-chart id="chartContainer">
<e-axes><e-axis orientation="Vertical">
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
Plot offset for axes Property: plot-offset

<ej-chart id="chartContainer">
<e-axes><e-axis plot-offset="0">
</e-axes></e-axis >
</ej-chart>
Property: plotOffset
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis plotOffset="0">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Minimum for axes Property: e-range.min

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-range min="3">
</e-range>
</e-axes></e-axis >
</ej-chart>
Property: minimum
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis minimum="4">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Maximum for axes Property: e-range.max

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-range max="3">
</e-range>
</e-axes></e-axis >
</ej-chart>
Property: maximum
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis maximum="4">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Interval for axes Property: e-range.interval

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-range interval="3">
</e-range>
</e-axes></e-axis >
</ej-chart>
Property: interval
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis interval="4">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
RangePadding for axes Property: range-padding

<ej-chart id="chartContainer">
<e-axes><e-axis range-padding="None">
</e-axes></e-axis >
</ej-chart>
Property: rangePadding
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis rangePadding="None">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Rounding Places in axes Property: rounding-places

<ej-chart id="chartContainer">
<e-axes><e-axis rounding-places="2">
</e-axes></e-axis >
</ej-chart>
Property: labelFormat
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis labelFormat="n3">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
ScrollBar settings of axes Property: e-scrollbar-settings

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-scrollbar-settings visible="true">
</e-scrollbar-settings>
</e-axes></e-axis >
</ej-chart>
Property: Not Applicable
TickPosition in axes Property: tick-lines-position

<ej-chart id="chartContainer">
<e-axes><e-axis tick-lines-position="Inside">
</e-axes></e-axis >
</ej-chart>
Property: tickPosition
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis tickPosition="Inside">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
ValueType of axes Property: value-type

<ej-chart id="chartContainer">
<e-axes><e-axis value-type="DateTime">
</e-axes></e-axis >
</ej-chart>
Property: valueType
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis valueType="DateTime">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
visible of axes Property: visible

<ej-chart id="chartContainer">
<e-axes><e-axis visible="true">
</e-axes></e-axis >
</ej-chart>
Property: visible
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis visible="true">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
ZoomFactor of axes Property: zoom-factor

<ej-chart id="chartContainer">
<e-axes><e-axis zoom-factor="0.3">
</e-axes></e-axis >
</ej-chart>
Property: zoomFactor
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis zoomFactor="0.3">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
ZoomPosition of axes Property: zoom-position

<ej-chart id="chartContainer">
<e-axes><e-axis zoom-position="0.3">
</e-axes></e-axis >
</ej-chart>
Property: zoomPosition
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis zoomPosition="0.3">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
labelBorder of axes Property: e-border

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-border color="red" width="3">
</e-border>
</e-axes></e-axis >
</ej-chart>
Property: border
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis>
<e-border color="red" width="2">
</e-border>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Title of axes Property: e-title.text

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-title text="title">
</e-title>
</e-axes></e-axis >
</ej-chart>
Property: title
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis title="Title">
</e-chart-axes> </e-chart-axis>
</ejs-chart>
StripLine of axes Property: e-strip-lines

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-strip-lines >
</e-strip-lines>
</e-axes></e-axis >
</ej-chart>
Property: e-axes -striplines
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis >
<e-axes -striplines>
</e-axes -striplines>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Multilevel labels of axes Property: e-multi-level-labels

<ej-chart id="chartContainer">
<e-axes><e-axis >
<e-multi-level-labels>
</e-multi-level-labels>
</e-axes></e-axis >
</ej-chart>
Property: e-axes -multilevellabels
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis >
<e-axes -multilevellabels>
</e-axes -multilevellabels>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Skeleton for an axes Property: Not Applicable Property: skeleton
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis >
<e-chart-axes><e-chart-axis skeleton="yMd">
</e-chart-axis>
</e-chart-axes>
</e-chart-axes> </e-chart-axis>
</ejs-chart>
Skeleton type for an axes Property: Not Applicable Property: skeletonType
<ejs-chart id="Container">
<e-chart-axes> <e-chart-axis >
<e-chart-axes><e-chart-axis skeletonType="Date">
</e-chart-axis>
</e-chart-axes>
</e-chart-axes> </e-chart-axis>
</ejs-chart>

Series

Behavior API in Essential JS 1 API in Essential JS 2
BearFillColor Property: bear-fill-color

<ej-chart id="chartContainer">
<e-chart-series>
<e-series bear-fill-color="red">
</e-series>
</e-chart-series>
</ej-chart>
Property: bearFillColor

<ejs-chart id="Container">
<e-series-collection>
<e-series bearFillColor="red">
</e-series>
</e-series-collection>
</ejs-chart>
Border Property: e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
<e-border color="red" dash-array="4,5" width="3">
</e-border>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-border

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-border color="red" width="2">
</e-series-border>
</e-series>
</e-series-collection>
</ejs-chart>
BoxPlotMode Property: box-plot-mode

<ej-chart id="chartContainer">
<e-chart-series>
<e-series box-plot-mode="Exclusive">
</e-series>
</e-chart-series>
</ej-chart>
Property: boxPlotMode

<ejs-chart id="Container">
<e-series-collection>
<e-series boxPlotMode="Exclusive">
</e-series>
</e-series-collection>
</ejs-chart>
Minimum radius of Bubble series Property: e-bubble-options.min-Radius

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-bubble-options min-Radius="10">
</e-bubble-options>
</e-series>
</e-chart-series>
</ej-chart>
Property: minRadius

<ejs-chart id="Container">
<e-series-collection>
<e-series minRadius="4">
</e-series>
</e-series-collection>
</ejs-chart>
Maximum radius of Bubble series Property: e-bubble-options.max-Radius

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-bubble-options max-Radius="10">
</e-bubble-options>
</e-series>
</e-chart-series>
</ej-chart>
Property: maxRadius

<ejs-chart id="Container">
<e-series-collection>
<e-series maxRadius="4">
</e-series>
</e-series-collection>
</ejs-chart>
BullFillColor Property: bull-fill-color

<ej-chart id="chartContainer">
<e-chart-series>
<e-series bull-fill-color="red">
</e-series>
</e-chart-series>
</ej-chart>
Property: bullFillColor

<ejs-chart id="Container">
<e-series-collection>
<e-series bullFillColor="red">
</e-series>
</e-series-collection>
</ejs-chart>
Cardinal spline tension for spline series Property: cardinal-spline-tension

<ej-chart id="chartContainer">
<e-chart-series>
<e-series cardinal-spline-tension="0.5">
</e-series>
</e-chart-series>
</ej-chart>
Property: cardinalSplineTension

<ejs-chart id="Container">
<e-series-collection>
<e-series cardinalSplineTension="0.5">
</e-series>
</e-series-collection>
</ejs-chart>
Column Width for rectangle series Property: column-width

<ej-chart id="chartContainer">
<e-chart-series>
<e-series column-width="2">
</e-series>
</e-chart-series>
</ej-chart>
Property: columnWidth

<ejs-chart id="Container">
<e-series-collection>
<e-series columnWidth="5">
</e-series>
</e-series-collection>
</ejs-chart>
Column spacing for rectangle series Property: column-spacing

<ej-chart id="chartContainer">
<e-chart-series>
<e-series column-spacing="2">
</e-series>
</e-chart-series>
</ej-chart>
Property: columnSpacing

<ejs-chart id="Container">
<e-series-collection>
<e-series columnSpacing="5">
</e-series>
</e-series-collection>
</ejs-chart>
Topleft radius for rectangle series Property: e-corner-radius.top-left

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-corner-radius top-left="0">
</e-corner-radius>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-cornerradius.topLeft

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-cornerradius topLeft="0">
</e-series-cornerradius>
</e-series>
</e-series-collection>
</ejs-chart>
TopRight radius for rectangle series Property: e-corner-radius.top-right

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-corner-radius top-right="0">
</e-corner-radius>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-cornerradius.topRight

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-cornerradius topRight="0">
</e-series-cornerradius>
</e-series>
</e-series-collection>
</ejs-chart>
BottomRight radius for rectangle series Property: e-corner-radius.bottom-right

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-corner-radius bottom-right="0">
</e-corner-radius>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-cornerradius.bottomRight

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-cornerradius bottomRight="0">
</e-series-cornerradius>
</e-series>
</e-series-collection>
</ejs-chart>
BottomLeft radius for rectangle series Property: e-corner-radius.bottom-left

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-corner-radius bottom-left="0">
</e-corner-radius>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-cornerradius.bottomLeft

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-cornerradius bottomLeft="0">
</e-series-cornerradius>
</e-series>
</e-series-collection>
</ejs-chart>
DashArray property Property: dash-array

<ej-chart id="chartContainer">
<e-chart-series>
<e-series dash-array="2,3">
</e-series>
</e-chart-series>
</ej-chart>
Property: dashArray

<ejs-chart id="Container">
<e-series-collection>
<e-series dashArray="4,5">
</e-series>
</e-series-collection>
</ejs-chart>
DataSource for series Property: dataSource

<ej-chart id="chartContainer">
<e-chart-series>
<e-series dataSource="">
</e-series>
</e-chart-series>
</ej-chart>
Property: dataSource

<ejs-chart id="Container">
<e-series-collection>
<e-series dataSource="">
</e-series>
</e-series-collection>
</ejs-chart>
Draw type for Polar series Property: draw-type

<ej-chart id="chartContainer">
<e-chart-series>
<e-series draw-type="Line">
</e-series>
</e-chart-series>
</ej-chart>
Property: drawType

<ejs-chart id="Container">
<e-series-collection>
<e-series drawType="Line">
</e-series>
</e-series-collection>
</ejs-chart>
EmptyPointSettings for series Property: e-empty-point-settings.visible

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-empty-point-settings visible="true">
</e-empty-point-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Empty Point Display modes Property: e-empty-point-settings.display-mode

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-empty-point-settings display-mode="Average">
</e-empty-point-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-emptypointsettings.mode

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-emptypointsettings mode="Average">
</e-series-emptypointsettings>
</e-series>
</e-series-collection>
</ejs-chart>
Empty Point color Property: color

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-empty-point-settings>
<e-Style color="red">
</e-Style>
</e-empty-point-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-emptypointsettings.fill

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-emptypointsettings fill="red">
</e-series-emptypointsettings>
</e-series>
</e-series-collection>
</ejs-chart>
Empty Point Border Property: e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-empty-point-settings>
<e-Style color="red">
<e-border color="red" width="3">
</e-border>
</e-Style>
</e-empty-point-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-emptypointsettings-border

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-emptypointsettings>
<e-emptypointsettings-border color="red" width="2">
</e-emptypointsettings-border>
</e-series-emptypointsettings>
</e-series>
</e-series-collection>
</ejs-chart>
Enable animation for series Property: enable-animation

<ej-chart id="chartContainer">
<e-chart-series>
<e-series enable-animation="true">
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-animation.enable

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-animation enable="true">
</e-series-animation>
</e-series>
</e-series-collection>
</ejs-chart>
Animation duration for series Property: animation-duration

<ej-chart id="chartContainer">
<e-chart-series>
<e-series animation-duratio="1000">
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-animation.duration

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-animation duration="1000">
</e-series-animation>
</e-series>
</e-series-collection>
</ejs-chart>
Animation delay for series Property: Not Applicable Property: e-series-animation.delay

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-animation delay="100">
</e-series-animation>
</e-series>
</e-series-collection>
</ejs-chart>
Drag settings for series Property: e-drag-options

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-drag-options type="X">
</e-drag-options>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Errorbar settings for series Property: e-error-bar

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-error-bar >
</e-error-bar>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-errorbar

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-errorbar>
</e-series-errorbar>
</e-series>
</e-series-collection>
</ejs-chart>
Closed series Property: is-closed

<ej-chart id="chartContainer">
<e-chart-series>
<e-series is-closed="true" >
</e-series>
</e-chart-series>
</ej-chart>
Property: isClosed

<ejs-chart id="Container">
<e-series-collection>
<e-series isClosed="true" >
</e-series>
</e-series-collection>
</ejs-chart>
Stacking Property for series Property: is-stacking

<ej-chart id="chartContainer">
<e-chart-series>
<e-series is-stacking="true" >
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Line cap for series Property: line-cap

<ej-chart id="chartContainer">
<e-chart-series>
<e-series line-cap="Butt" >
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Line cap for series Property: line-join

<ej-chart id="chartContainer">
<e-chart-series>
<e-series line-join="Round" >
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Outlier settings of series Property: e-outlier-settings

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-outlier-settings shape="Rectangle">
</e-outlier-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Opacity for series Property: opacity

<ej-chart id="chartContainer">
<e-chart-series>
<e-series opacity="0.7" >
</e-series>
</e-chart-series>
</ej-chart>
Property: opacity

<ejs-chart id="Container">
<e-series-collection>
<e-series opacity="0.7" >
</e-series>
</e-series-collection>
</ejs-chart>
point Color Mapping Property: point-color-mapping-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series point-color-mapping-name="color" >
</e-series>
</e-chart-series>
</ej-chart>
Property: pointColorMapping

<ejs-chart id="Container">
<e-series-collection>
<e-series pointColorMapping="color" >
</e-series>
</e-series-collection>
</ejs-chart>
Positive fill for waterfall series Property: positive-fill

<ej-chart id="chartContainer">
<e-chart-series>
<e-series positive-fill="red" >
</e-series>
</e-chart-series>
</ej-chart>
Property: pointColorMapping

<ejs-chart id="Container">
<e-series-collection>
<e-series pointColorMapping="color" >
</e-series>
</e-series-collection>
</ejs-chart>
Show average value in box and whisker series Property: show-median

<ej-chart id="chartContainer">
<e-chart-series>
<e-series show-median="false" >
</e-series>
</e-chart-series>
</ej-chart>
Property: showMean

<ejs-chart id="Container">
<e-series-collection>
<e-series showMean="false" >
</e-series>
</e-series-collection>
</ejs-chart>
To group the series of stacking collection Property: stacking-group

<ej-chart id="chartContainer">
<e-chart-series>
<e-series stacking-group="group" >
</e-series>
</e-chart-series>
</ej-chart>
Property: stackingGroup

<ejs-chart id="Container">
<e-series-collection>
<e-series stackingGroup="group" >
</e-series>
</e-series-collection>
</ejs-chart>
Specifies the type of the series to render in chart Property: type

<ej-chart id="chartContainer">
<e-chart-series>
<e-series type="Line" >
</e-series>
</e-chart-series>
</ej-chart>
Property: type

<ejs-chart id="Container">
<e-series-collection>
<e-series type="Line" >
</e-series>
</e-series-collection>
</ejs-chart>
Defines the visibility of the series Property: visibility

<ej-chart id="chartContainer">
<e-chart-series>
<e-series visibility="true" >
</e-series>
</e-chart-series>
</ej-chart>
Property: visible

<ejs-chart id="Container">
<e-series-collection>
<e-series visible="true" >
</e-series>
</e-series-collection>
</ejs-chart>
Enables or disables the visibility of legend item Property: visible-on-legend

<ej-chart id="chartContainer">
<e-chart-series>
<e-series visible-on-legend="Visible" >
</e-series>
</e-chart-series>
</ej-chart>
Property: toggleVisibility

<ejs-chart id="Container">
<e-series-collection>
<e-series toggleVisibility="true" >
</e-series>
</e-series-collection>
</ejs-chart>
Specifies the different types of spline curve Property: spline-type

<ej-chart id="chartContainer">
<e-chart-series>
<e-series spline-type="Natural" >
</e-series>
</e-chart-series>
</ej-chart>
Property: splineType

<ejs-chart id="Container">
<e-series-collection>
<e-series splineType="Natural" >
</e-series>
</e-series-collection>
</ejs-chart>
Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection Property: x-axis-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series x-axis-name="secondaryXAxis" >
</e-series>
</e-chart-series>
</ej-chart>
Property: xAxisName

<ejs-chart id="Container">
<e-series-collection>
<e-series xAxisName="secondaryXAxis" >
</e-series>
</e-series-collection>
</ejs-chart>
Name of the property in the datasource that contains x value for the series Property: x-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series x-name="x" >
</e-series>
</e-chart-series>
</ej-chart>
Property: xName

<ejs-chart id="Container">
<e-series-collection>
<e-series xName="x" >
</e-series>
</e-series-collection>
</ejs-chart>
Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection Property: y-axis-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series y-axis-name="secondaryYAxis" >
</e-series>
</e-chart-series>
</ej-chart>
Property: yAxisName

<ejs-chart id="Container">
<e-series-collection>
<e-series yAxisName="secondaryYAxis" >
</e-series>
</e-series-collection>
</ejs-chart>
Name of the property in the datasource that contains y value for the series Property: x-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series y-name="y" >
</e-series>
</e-chart-series>
</ej-chart>
Property: yName

<ejs-chart id="Container">
<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 id="chartContainer">
<e-chart-series>
<e-series high="y" >
</e-series>
</e-chart-series>
</ej-chart>
Property: high

<ejs-chart id="Container">
<e-series-collection>
<e-series high="y" >
</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 id="chartContainer">
<e-chart-series>
<e-series low="y" >
</e-series>
</e-chart-series>
</ej-chart>
Property: low

<ejs-chart id="Container">
<e-series-collection>
<e-series low="y" >
</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 id="chartContainer">
<e-chart-series>
<e-series close="y" >
</e-series>
</e-chart-series>
</ej-chart>
Property: close

<ejs-chart id="Container">
<e-series-collection>
<e-series close="y" >
</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 id="chartContainer">
<e-chart-series>
<e-series open="y" >
</e-series>
</e-chart-series>
</ej-chart>
Property: open

<ejs-chart id="Container">
<e-series-collection>
<e-series open="y" >
</e-series>
</e-series-collection>
</ejs-chart>
Option to add trendlines to chart Property: e-trend-lines

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
<e-trend-lines>
</e-trend-lines>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-trendlines

<ejs-chart id="Container">
<e-series-collection>
<e-series >
<e-series-trendlines>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Options for customizing the appearance of the series or data point while highlighting Property: e-highlight-settings

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
<e-highlight-settings>
</e-highlight-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not applicable
Options for customizing the appearance of the series/data point on selection Property: e-selection-settings

<ej-chart id="chartContainer">
<e-chart-series>
<e-series >
<e-selection-settings>
</e-selection-settings>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not applicable

marker

Behavior API in Essential JS 1 API in Essential JS 2
visibility of marker Property: visible

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker visible="true">
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: visible

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker visible="true">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Fill for marker Property: fill

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker fill="red">
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: fill

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker fill="red">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Opacity for marker Property: opacity

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker opacity="0.5">
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: opacity

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker opacity="0.5">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Shape for marker Property: shape

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker shape="Circle">
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: shape

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker shape="Circle">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
ImageUrl for marker Property: image-url

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker image-url="">
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: imageUrl

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker imageUrl="">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Border for marker Property: e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-border color="red" width="2">
</e-border>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-marker-border

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-marker-border color="red" width="2">
</e-marker-border>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Height for marker Property: size.height

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-Size height="40">
</e-Size>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: height

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker height="40">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Width for marker Property: size.Width

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-Size Width="40">
</e-Size>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: Width

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker Width="40">
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
DataLabelSettings of marker Property: e-series-marker.e-data-label

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: marker.dataLabel

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Visibility of dataLabel Property: e-data-label.visible

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label visible="true">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.visible

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel visible="true">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Text mapping name of dataLabel Property: e-data-label.text-mapping-name

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label text-mapping-name="">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.name

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel name="">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Fill color of data label Property: e-data-label.fill

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label fill="red">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: dataLabel.fill

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel fill="red">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Opacity of data label Property: e-data-label.opacity

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label opacity="0.6">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.opacity

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel opacity="0.5">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Text position of data label Property: e-data-label.text-position

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label text-position="Middle">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.position

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel position="Top">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Alignment of data label Property: e-data-label.vertical-text-alignment

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label vertical-text-alignment="Center">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.alignment

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel alignment="Center">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Border of data label Property: e-data-label.e-border

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-border color="red" width="2">
</e-border>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-datalabelsettings-border

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel>
<e-datalabelsettings-border color="red" width="2">
</e-datalabelsettings-border>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Offset for data label Property: e-data-label.e-offset

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-offset x="5" y="6">
</e-offset>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Margin of data label Property: e-data-label.e-margin

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-margin top="10" bottom="10" left="10" right="10">
</e-margin>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabe.e-datalabelsettings-margin

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel>
<e-datalabelsettings-margin top="10" left="10" bottom="10" right="10">
</e-datalabelsettings-margin>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Font of data label Property: e-data-label.e-font

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label>
<e-font color="red">
</e-font>
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.e-font

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel>
<e-font color="red" opacity="4">
</e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
HTML template in dataLabel Property: e-data-label.template

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label template="<div>Chart</div>">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: e-series-datalabel.template

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel template="<div>Chart</div>">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Rounded corner radius X Property: Not Applicable Property: e-series-datalabel.rx

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel rx="10">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Rounded corner radius Y Property: Not Applicable Property: e-series-datalabel.ry

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-marker>
<e-series-datalabel ry="10">
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
Maximum Label width for data label Property: maximum-label-width

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label maximum-label-width="10">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
Enable wrapping of text for data label Property: enable-wrap

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label enable-wrap="true">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable
To show edge label for data label Property: show-edge-labels

<ej-chart id="chartContainer">
<e-chart-series>
<e-series>
<e-marker>
<e-data-label show-edge-labels="true">
</e-data-label>
</e-marker>
</e-series>
</e-chart-series>
</ej-chart>
Property: Not Applicable

TrendLines

Behavior API in Essential JS 1 API in Essential JS 2
Trendlines settings Property: e-series.e-trend-lines

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line>
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-series.e-series-trendlines

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline>
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Visibility of trendline Property: e-trend-line.visibility

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line visibility="true">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: Not applicable
Type of trendLine Property: e-trend-line.type

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line type="Linear">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.type

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline type="Polynomial">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Name of trendLine Property: e-trend-line.name

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line name="trendLine">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.name

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline name="trendLine">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Period of trendLine Property: Not available Property: e-trendline.period

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline period="45">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Polynomial order for Polynomial type trendLines Property: e-trend-line.polynomial-order

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line polynomial-order="3">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.polynomialOrder

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline polynomialOrder="3">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Backward forecost for trendLines Property: e-trend-line.backward-forecast

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line backward-forecast="3">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.backwardForecast

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline backwardForecast="3">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Forward forecost for trendLines Property: e-trend-line.forward-forecast

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line forward-forecast="3">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.forwardForecast

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline forwardForecast="3">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Fill for trendLines Property: e-trend-line.fill

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line fill="red">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.fill

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline fill="red">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Width for trendLines Property: e-trend-line.width

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line width="2">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: e-trendline.width

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline width="2">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Intercept value for trendLines Property: Not Applicable Property: e-trendline.intercept

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline intercept="2">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Intercept value for trendLines Property: Not Applicable Property: e-trendline.legendShape

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline legendShape="Rectangle">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Animation settings for trendLines Property: Not Applicable Property: e-trendline.animation

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline>
<e-trendline-animation enable="true">
</e-trendline-animation>
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Marker settings for trendLines Property: Not Applicable Property: e-trendline.marker

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline>
<e-trendline-marker visible="true">
</e-trendline-marker>
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
Tooltip for trendLines Property: Not Applicable Property: e-trendline.enableTooltip

<ejs-chart id="Container">
<e-series-collection>
<e-series>
<e-series-trendlines>
<e-trendline enableTooltip="true">
</e-trendline>
</e-series-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
DashArray for trendLines Property: e-trend-line.dash-array

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line dash-array="2,3">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: Not Applicable
Visible on legend for trendLines Property: e-trend-line.visible-on-legend

<ej-chart id="Container">
<e-chart-series>
<e-series>
<e-trend-lines>
<e-trend-line visible-on-legend="true">
</e-trend-line>
</e-trend-lines>
</e-series>
<e-chart-series>
</ej-chart>
Property: Not Applicable

StripLines

Behavior API in Essential JS 1 API in Essential JS 2
Default behaviour for striplines Property: e-primary-x-axis.e-strip-lines

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line visible="true">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.width

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline visible="true">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
border for stripline Property: e-strip-lines.border-color

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line border-color="red">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.e-primaryxaxis-border

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline>
<e-primaryxaxis-border color="red">
</e-primaryxaxis-border>
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Background color for stripline Property: e-strip-line.color

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line color="red">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.color

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline color="red">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Start value for stripline Property: e-strip-line.start

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line start="10">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.start

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline start="10">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
End value for stripline Property: e-strip-line.end

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line end="10">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.end

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline end="10">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
StartfromAxis value for stripline Property: e-strip-line.start-from-axis

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line start-from-axis="true">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.startFromAxis

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline startFromAxis="true">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Text in stripline Property: e-strip-line.text

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line text="StripLine">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.text

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline text="StripLine">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Text alignment in stripline Property: e-strip-line.text-alignment

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line text-alignment="MiddleCenter">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.horizontalAlignment

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline horizontalAlignment="Middle">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Vertical Text alignment in stripline Property: e-strip-line.text-alignment

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line text-alignment="MiddleCenter">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.verticalAlignment

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline verticalAlignment="Middle">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Size of stripline Property: e-strip-line.border-width

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line border-width="10">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.size

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline size="10">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
ZIndex of stripline Property: e-strip-line.z-index

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line z-index="Behind">
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.zIndex

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline zIndex="Behind">
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Font style of stripline Property: e-strip-line.e-Font

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-strip-lines>
<e-strip-line>
<e-Font>
</e-Font>
</e-strip-line>
</e-strip-lines>
</e-primary-x-axis>
<e-chart-series>
</ej-chart>
Property: e-primaryxaxis-stripline.zIndex

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-striplines>
<e-primaryxaxis-stripline>
<e-primaryxaxis-textstyle>
</e-primaryxaxis-textstyle>
</e-primaryxaxis-stripline>
</e-primaryxaxis-striplines>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>

Multilevel Labels

Behavior API in Essential JS 1 API in Essential JS 2
Default behaviour for multilevelLabels Property: e-primary-x-axis.e-multi-level-labels

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label visible="true">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: e-chart-primaryxaxis-stripline.e-primaryxaxis-multilevellabel

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels >
<e-primaryxaxis-multilevellabel visible="true">
</e-primaryxaxis-multilevellabel >
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Text alignment for multilevelLabels Property: text-alignment

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label text-alignment="Center">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: alignment

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel alignment="Center">
</e-primaryxaxis-multilevellabel >
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Text overflow for multilevelLabels Property: text-overflow

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label text-overflow="Trim">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: overFlow

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel overFlow="Trim">
</e-primaryxaxis-multilevellabel>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Border for multilevelLabels Property: text-overflow

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label>
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: overFlow

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel>
<e-primaryxaxis-border color="red" width="2">
</e-primaryxaxis-border>
</e-primaryxaxis-multilevellabel>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Start value for label Property: start

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label start="45">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: start

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel>
<e-primaryxaxis-categories>
<e-primaryxaxis-category start="45">
</e-primaryxaxis-category>
</e-primaryxaxis-categories>
</e-primaryxaxis-multilevellabel>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
End value for label Property: end

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label end="45">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: end

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel>
<e-primaryxaxis-categories>
<e-primaryxaxis-category end="45">
</e-primaryxaxis-category>
</e-primaryxaxis-categories>
</e-primaryxaxis-multilevellabel>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Text for label Property: text

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label text="Start">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: text

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel>
<e-primaryxaxis-categories>
<e-primaryxaxis-category text="Start">
</e-primaryxaxis-category>
</e-primaryxaxis-categories>
</e-primaryxaxis-multilevellabel>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
Maximum text width for label Property: maximum-text-width

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label maximum-text-width="10">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: maximumTextWidth

<ejs-chart id="Container">
<e-series-collection>
<e-chart-primaryxaxis>
<e-primaryxaxis-multilevellabels>
<e-primaryxaxis-multilevellabel>
<e-primaryxaxis-categories>
<e-primaryxaxis-category maximumTextWidth="10">
</e-primaryxaxis-category>
</e-primaryxaxis-categories>
</e-primaryxaxis-multilevellabel>
</e-primaryxaxis-multilevellabels>
</e-chart-primaryxaxis>
</e-series-collection>
</ejs-chart>
level of labels Property: level

<ej-chart id="Container">
<e-chart-series>
<e-primary-x-axis>
<e-multi-level-labels>
<e-multi-level-label level="1">
</e-multi-level-label>
</e-multi-level-labels>
</e-primary-x-axis>
</e-chart-series>
</ej-chart>
Property: Not applicable

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Animation for series Property: chart.animate

<ej-chart id="chart">
</ej-chart>
<script>
var chartobj=$("#chart").ejchart(instance);
chartobj.animate(); `</script>`
Not applicable
Redraw for chart Property chart.redraw

<ej-chart id="chart">
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.redraw();

</script>
Property: chart.refresh()

<ejs-chart id="chart">
</ejs-chart>
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.refresh();

</script>
Export Property chart.export

<ej-chart id="chart" >
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.export();

</script>
Property: chart.export()

<ejs-chart id="chart" >
</ejs-chart>
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.export('JPEG', 'chart');

</script>
Print Property chart.print

<ej-chart id="chart" >
</ej-chart>
<script>
var chartobj= $("#chart").ejchart(instance);
chartobj.print();

</script>
Property: chart.print()

<ejs-chart id="chart">
</ejs-chart>
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.print();

</script>
AddSeries Property Not Applicable Property: chart.addSeries()

<ejs-chart id="chart">
</ejs-chart>
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.addSeries();

</script>
RemoveSeries Property Not Applicable Property: chart.removeSeries()

<ejs-chart id="chart">
</ejs-chart>
<script>
var chartobj= document.getElementById('chart').ej2_instances[0];
chartobj.removeSeries();

</script>

Events

Behavior API in Essential JS 1 API in Essential JS 2
Fires on annotation click Property: annotation-click

<ej-chart id="chart" annotation-click="annotaionclick">
</ej-chart>
<script>
function annotaionclick(args) {
}
</script>
Not applicable
Fires after animation Property: animation-complete

<ej-chart id="chart" animation-complete="animationcomplete">
</ej-chart>
<script>
function animationcomplete(args) {
}
</script>
Property: animationComplete

<ejs-chart id="chart" animationComplete="animationComplete">
</ejs-chart>
<script>
function animationComplete(args) {
}
</script>
Fires on axis label click Property: axis-label-click

<ej-chart id="chart" axis-label-click="Axislabelclick">
</ej-chart>
<script>
function Axislabelclick(args) {
}
</script>
Property: Not applicable
Fires before axis label render Property: axes-label-rendering

<ej-chart id="chart" axes-label-rendering="axisLabelRendering">
</ej-chart>
<script>
function axisLabelRendering(args) {
}
</script>
Property: axisLabelRender

<ejs-chart id="chart" axisLabelRender="axisLabelRendering">
</ejs-chart>
<script>
function axisLabelRendering(args) {
}
</script>
Fires on axis label mouseMove Property: axis-label-mouse-move

<ej-chart id="chart" axis-label-mouse-move="axisLabelMouseMove">
</ej-chart>
<script>
function axisLabelMouseMove(args) {
}
</script>
Property: Not applicable
Fires on axis label initialize Property: axes-labels-initialize

<ej-chart id="chart" axes-labels-initialize="axisLabelInitialize">
</ej-chart>
<script>
function axisLabelInitialize(args) {
}
</script>
Property: Not applicable
Fires before axis range calculation Property: axes-range-calculate

<ej-chart id="chart" axes-range-calculate="axesRangeCalculate">
</ej-chart>
<script>
function axesRangeCalculate(args) {
}
</script>
Property: axisRangeCalculated

<ejs-chart id="chart" axisRangeCalculated="axesRangeCalculate">
</ejs-chart>
<script>
function axesRangeCalculate(args) {
}
</script>
Fires on axis title rendering Property: axes-title-rendering

<ej-chart id="chart" axes-title-rendering="axisTitleRendering">
</ej-chart>
<script>
function axisTitleRendering(args) {
}
</script>
Property: Not applicable
Fires on after chart resize Property: after-resize

<ej-chart id="chart" after-resize="afterResize">
</ej-chart>
<script>
function afterResize(args) {
}
</script>
Property: Not applicable
Fires on before chart resize Property: before-resize

<ej-chart id="chart" before-resize="beforeResize">
</ej-chart>
<script>
function beforeResize(args) {
}
</script>
Property: resized

<ejs-chart id="chart" resized="beforeResize">
</ejs-chart>
<script>
function beforeResize(args) {
}
</script>
Fires on chart click Property: chart-click

<ej-chart id="chart" chart-click="chartMouseClick">
</ej-chart>
<script>
function chartMouseClick(args) {
}
</script>
Property: chartMouseClick

<ejs-chart id="chart" chartMouseClick="chartMouseClick">
</ejs-chart>
<script>
function chartMouseClick(args) {
}
</script>
Fires on chart mouse move Property: chart-mouse-move

<ej-chart id="chart" chart-mouse-move="chartMouseMove">
</ej-chart>
<script>
function chartMouseMove(args) {
}
</script>
Property: chartMouseMove

<ejs-chart id="chart" chartMouseMove="chartMouseMove">
</ejs-chart>
<script>
function chartMouseMove(args) {
}
</script>
Fires on chart mouse leave Property: chart-mouse-leave

<ej-chart id="chart" chart-mouse-leave="chartMouseLeave">
</ej-chart>
<script>
function chartMouseLeave(args) {
}
</script>
Property: chartMouseLeave

<ejs-chart id="chart" chartMouseLeave="chartMouseLeave">
</ejs-chart>
<script>
function chartMouseLeave(args) {
}
</script>
Fires on before chart double click Property: chart-double-click

<ej-chart id="chart" chart-double-click="chartDoubleClick">
</ej-chart>
<script>
function chartDoubleClick(args) {
}
</script>
Property: Not applicable
Fires on chart mouse up Property: Not Applicable Property: chartmouseUp

<ejs-chart id="chart" chartmouseUp="chartmouseUp">
</ejs-chart>
<script>
function chartmouseUp(args) {
}
</script>
Fires on chart mouse down Property: Not Applicable Property: chartmouseDown

<ejs-chart id="chart" chartmouseDown="chartmouseDown">
</ejs-chart>
<script>
function chartmouseDown(args) {
}
</script>
Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area Property: chart-area-bounds-calculate

<ej-chart id="chart" chart-area-bounds-calculate="chartAreaBoundsCalculate">
</ej-chart>
<script>
function chartAreaBoundsCalculate(args) {
}
</script>
Property: Not applicable
Fires when the dragging is started Property: drag-start

<ej-chart id="chart" drag-start="dragStart">
</ej-chart>
<script>
function dragStart(args) {
}
</script>
Property: Not applicable
Fires while dragging Property: dragging

<ej-chart id="chart" dragging="dragging">
</ej-chart>
<script>
function dragging(args) {
}
</script>
Property: Not applicable
Fires when the dragging is completed Property: drag-end

<ej-chart id="chart" drag-end="dragEnd">
</ej-chart>
<script>
function dragEnd(args) {
}
</script>
Property: dragComplete

<ejs-chart id="chart" dragComplete="dragComplete">
</ejs-chart>
<script>
function dragComplete(args) {
}
</script>
Fires when chart is destroyed completely Property: destroy

<ej-chart id="chart" destroy="destroy">
</ej-chart>
<script>
function destroy(args) {
}
</script>
Property: Not applicable
Fires after chart is created Property: create

<ej-chart id="chart" create="create">
</ej-chart>
<script>
function create(args) {
}
</script>
Property: loaded

<ejs-chart id="chart" loaded="loaded">
</ejs-chart>
<script>
function loaded(args) {
}
</script>
Fires before rendering the data labels Property: display-text-rendering

<ej-chart id="chart" display-text-rendering="textRender">
</ej-chart>
<script>
function textRender(args) {
}
</script>
Property: textRender

<ejs-chart id="chart" textRender="textRender">
</ejs-chart>
<script>
function textRender(args) {
}
</script>
Fires during the calculation of legend bounds Property: lengend-bounds-calculate

<ej-chart id="chart" lengend-bounds-calculate="legendBoundsCalculate">
</ej-chart>
<script>
function legendBoundsCalculate(args) {
}
</script>
Property: Not applicable
Fires on clicking the legend item Property: legend-item-click

<ej-chart id="chart" legend-item-click="legendItemClick">
</ej-chart>
<script>
function legendItemClick(args) {
}
</script>
Property: Not applicable
Fires when moving mouse over legend item Property: legend-item-mouse-move

<ej-chart id="chart" legend-item-mouse-move="legendItemMouseMove">
</ej-chart>
<script>
function legendItemMouseMove(args) {
}
</script>
Property: Not applicable
Fires before rendering the legend item Property: legend-item-rendering

<ej-chart id="chart" legend-item-rendering="legendItemRendering">
</ej-chart>
<script>
function legendItemRendering(args) {
}
</script>
Property: legendRender

<ejs-chart id="chart" legendRender="legendItemRendering">
</ejs-chart>
<script>
function legendItemRendering(args) {
}
</script>
Fires before loading the chart Property: load

<ej-chart id="chart" load="load">
</ej-chart>
<script>
function load(args) {
}
</script>
Property: load

<ejs-chart id="chart" load="load">
</ejs-chart>
<script>
function load(args) {
}
</script>
Fires, when multi level labels are rendering Property: multi-level-label-rendering

<ej-chart id="chart" multi-level-label-rendering="MultiLabelRender">
</ej-chart>
<script>
function MultiLabelRender(args) {
}
</script>
Property: axisMultiLabelRender

<ejs-chart id="chart" axisMultiLabelRender="MultiLabelRender">
</ejs-chart>
<script>
function MultiLabelRender(args) {
}
</script>
Fires on clicking a point in chart Property: point-region-click

<ej-chart id="chart" point-region-click="pointRegionClick">
</ej-chart>
<script>
function pointRegionClick(args) {
}
</script>
Property: pointClick

<ejs-chart id="chart" pointClick="pointClick">
</ejs-chart>
<script>
function pointClick(args) {
}
</script>
Fires when mouse is moved over a point Property: point-region-click

<ej-chart id="chart" point-region-click="pointRegionMouseMove">
</ej-chart>
<script>
function pointRegionMouseMove(args) {
}
</script>
Property: pointMove

<ejs-chart id="chart" pointMove="pointRegionMouseMove">
</ejs-chart>
<script>
function pointRegionMouseMove(args) {
}
</script>
Fires before rendering chart Property: pre-render

<ej-chart id="chart" pre-render="preRender">
</ej-chart>
<script>
function preRender(args) {
}
</script>
Property: Not applicable
Fires after selected the data in chart Property: range-selected

<ej-chart id="chart" range-selected="rangeSelected">
</ej-chart>
<script>
function rangeSelected(args) {
}
</script>
Property: Not applicable
Fires after selecting a series Property: series-region-click

<ej-chart id="chart" series-region-click="seriesRegionClick">
</ej-chart>
<script>
function seriesRegionClick(args) {
}
</script>
Property: Not applicable
Fires when point render Property: Not Applicable Property: pointRender

<ejs-chart id="chart" pointRender="pointRender">
</ejs-chart>
<script>
function pointRender(args) {
}
</script>
Fires before rendering a series Property: series-rendering

<ej-chart id="chart" series-rendering="seriesRendering">
</ej-chart>
<script>
function seriesRendering(args) {
}
</script>
Property: seriesRender

<ejs-chart id="chart" seriesRender="seriesRendering">
</ejs-chart>
<script>
function seriesRendering(args) {
}
</script>
Fires before rendering the marker symbols Property: symbol-rendering

<ej-chart id="chart" symbol-rendering="symbolRendering">
</ej-chart>
<script>
function symbolRendering(args) {
}
</script>
Property: Not applicable
Fires before rendering the trendline Property: trendline-rendering

<ej-chart id="chart" trendline-rendering="trendlineRendering">
</ej-chart>
<script>
function trendlineRendering(args) {
}
</script>
Property: Not applicable
Fires before rendering the Chart title Property: title-rendering

<ej-chart id="chart" title-rendering="titleRendering">
</ej-chart>
<script>
function titleRendering(args) {
}
</script>
Property: Not applicable
Fires before rendering the tooltip Property: tool-tip-initialize

<ej-chart id="chart" tool-tip-initialize="tooltipRender">
</ej-chart>
<script>
function tooltipRender(args) {
}
</script>
Property: tooltipRender

<ejs-chart id="chart" tooltipRender="tooltipRender">
</ejs-chart>
<script>
function tooltipRender(args) {
}
</script>
Fires before rendering crosshair tooltip in axis Property: track-axis-tool-tip

<ej-chart id="chart" track-axis-tool-tip="trackAxisToolTip">
</ej-chart>
<script>
function trackAxisToolTip(args) {
}
</script>
Property: Not applicable
Fires before rendering trackball tooltip Property: track-tool-tip

<ej-chart id="chart" track-tool-tip="trackToolTip">
</ej-chart>
<script>
function trackToolTip(args) {
}
</script>
Property: Not applicable
Event triggered when scroll starts Property: scroll-start

<ej-chart id="chart" scroll-start="scrollStart">
</ej-chart>
<script>
function scrollStart(args) {
}
</script>
Property: scrollStart

<ejs-chart id="chart" scrollStart="scrollStart">
</ejs-chart>
<script>
function scrollStart(args) {
}
</script>
Event triggered when scroll ends Property: scroll-end

<ej-chart id="chart" scroll-end="scrollEnd">
</ej-chart>
<script>
function scrollEnd(args) {
}
</script>
Property: scrollEnd

<ejs-chart id="chart" scrollEnd="scrollEnd">
</ejs-chart>
<script>
function scrollEnd(args) {
}
</script>
Event triggered when scroll changes Property: scrollChanged

<ej-chart id="chart" scrollChanged="scrollChange">
</ej-chart>
<script>
function scrollChange(args) {
}
</script>
Property: scrollChanged

<ejs-chart id="chart" scrollChanged="scrollChange">
</ejs-chart>
<script>
function scrollChange(args) {
}
</script>
Fires while performing rectangle zooming in chart Property: zoomed

<ej-chart id="chart" zoomed="zoomComplete">
</ej-chart>
<script>
function zoomComplete(args) {
}
</script>
Property: zoomComplete

<ejs-chart id="chart" zoomComplete="zoomComplete">
</ejs-chart>
<script>
function zoomComplete(args) {
}
</script>

Chart properties

Behavior API in Essential JS 1 API in Essential JS 2
selected data index Property: e-selected-data-point-indexes

<ej-chart id="Container">
<e-selected-data-point-indexes series-index=0 point-index=1 >
</e-selected-data-point-indexes>
</ej-chart>
Property: overFlow

<ejs-chart id="Container">
<e-chart-selecteddataindexes >
<e-chart-selecteddataindex point="1" series="0">
</e-chart-selecteddataindex>
</e-chart-selecteddataindexes>
</ejs-chart>
sideBySideSeriesPlacement for column based series Property: side-by-side-series-placement

<ej-chart id="Container" side-by-side-series-placement="true">
</ej-chart>
Property: enableSideBySidePlacement

<ejs-chart id="Container" enableSideBySidePlacement="true">
</ejs-chart>
ZoomSettings Property: zooming

<ej-chart id="Container">
<e-zooming enable="true" enable-pinching="true">
</e-zooming>
</ej-chart>
Property: e-chart-zoomsettings

<ejs-chart id="Container">
<e-chart-zoomsettings enableDeferredZooming="true" enablePinchZooming="true">
</e-chart-zoomsettings>
</ejs-chart>
Background color of the chart Property: background

<ej-chart id="Container" background="transparent">
</ej-chart>
Property: background

<ejs-chart id="Container" background="#EEFFCC">
</ejs-chart>
URL of the image to be used as chart background Property: back-ground-image-url

<ej-chart id="Container" back-ground-image-url="../images/chart/wheat.png">
</ej-chart>
Property: Not Applicable
Customizing border of the chart Property: background

<ej-chart id="Container" >
<e-border color="red">
</e-border>
</ej-chart>
Property: background

<ejs-chart id="Container">
<e-chart-border color="red" width="4">
</e-chart-border>
</ejs-chart>
ChartArea customization Property: background

<ej-chart id="Container" >
<e-chart-area background="transparent">
</e-chart-area>
</ej-chart>
Property: background

<ejs-chart id="Container">
<e-chart-chartarea background="transparent">
</e-chart-chartarea>
</ejs-chart>