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

Migration from Essential JS 1 in React Chart component

23 Feb 2021 / 50 minutes to read

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

Annotations

Behavior API in Essential JS 1 API in Essential JS 2
Annotations Property: annotations.content

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

<ChartComponent id='charts'>
<AnnotationDirective content='<div>Highest Medal Count</div>'>
</AnnotationsDirective>
</ChartComponent>
rotation of annotation Property: annotations

annotations: [{ }],
<EJ.Chart
annotations={annotations}>
</EJ.Chart>		 Not applicable.
coordinate unit for annotation Property: annotations.coordinateUnit

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

<ChartComponent id='charts'>
<AnnotationDirective coordinateUnits='Pixels'>
</AnnotationsDirective>
</ChartComponent>
horizontalAlignment for annotation Property: annotations.horizontalAlignment

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

<ChartComponent id='charts'>
<AnnotationDirective horizontalAlignment='Near'>
</AnnotationsDirective>
</ChartComponent>
horizontalAlignment for annotation Property: annotations.horizontalAlignment

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

<ChartComponent id='charts'>
<AnnotationDirective horizontalAlignment='Near'>
</AnnotationsDirective>
</ChartComponent>
margin for annotation Property: annotations.margin

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

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

<ChartComponent id='charts'>
<AnnotationDirective horizontalAlignment='Near'>
</AnnotationsDirective>
</ChartComponent>
Region for annotation with respect to chart or series Property: annotations.region

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

<ChartComponent id='charts'>
<AnnotationDirective region='Series'>
</AnnotationsDirective>
</ChartComponent>
verticalAlignment for annotation Property: annotations.verticalAlignment

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

<ChartComponent id='charts'>
<AnnotationDirective verticalAlignment='Middle'>
</AnnotationsDirective>
</ChartComponent>
Visibility of annotations Property: annotations.visible

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

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

<ChartComponent id='charts'>
<AnnotationDirective x={170}>
</AnnotationsDirective>
</ChartComponent>
X axis name in which annotation to be rendered Property: annotations.xAxisName

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

<ChartComponent id='charts'>
<AnnotationDirective xAxisName='xAxis'>
</AnnotationsDirective>
</ChartComponent>
Y offset for annotation Property: annotations.y

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

<ChartComponent id='charts'>
<AnnotationDirective y={170}>
</AnnotationsDirective>
</ChartComponent>
Y axis name in which annotation to be rendered Property: annotations.yAxisName

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

<ChartComponent id='charts'>
<AnnotationDirective yAxisName='yAxis'>
</AnnotationsDirective>
</ChartComponent>

Columns

Behavior API in Essential JS 1 API in Essential JS 2
Columns in chart Property: columntype

var series= [{ type: ‘column’ }];
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: columntype

<ChartComponent id='charts'>
<SeriesDirective type='Column'>
</SeriesDirective>
</ChartComponent>
width of columns in chart Property: columnWidth

var series= [{ columnWidth : 0.8 }];
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: width

<ChartComponent id='charts' width='80%'>
<SeriesDirective type='Column'>
</SeriesDirective>
</ChartComponent>
Rounded column Property: cornerRadius

var commonSeriesOptions= { cornerRadius :20 };
<EJ.Chart
commonSeriesOptions={commonSeriesOptions}>
</EJ.Chart>		 Property: cornerRadius

<ChartComponent id='charts' width='80%'>
<SeriesDirective cornerRadius={ bottomLeft: 10 }>
</SeriesDirective>
</ChartComponent>

CommonSeriesOptions

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

var commonSeriesOptions= { cornerRadius :20 };
<EJ.Chart
commonSeriesOptions={commonSeriesOptions}>
</EJ.Chart>		 Not Applicable

Crosshair

Behavior API in Essential JS 1 API in Essential JS 2
crosshair Property: crosshair Label visible

var crosshair={ visible: true };
<EJ.Chart
crosshair={crosshair}>
</EJ.Chart>		 Property: crosshair enable

<ChartComponent id='charts' crosshair = {enable:true}>
</ChartComponent>
trackballTooltipSettings Property: trackballTooltipSettings

var crosshair={ type: ‘trackball’ };
<EJ.Chart
crosshair={crosshair}>
</EJ.Chart>		 Not applicable
marker Property: marker

var series = [{ marker: { shape: ‘Diamond’, visible: true }}];
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: marker

<ChartComponent id='charts'>
<SeriesDirective marker={ visible: true }}>
</SeriesDirective>
</ChartComponent>
crosshair line style Property: line

var crosshair={ line: { color: ‘gray’, width: 2 } };
<EJ.Chart
crosshair={crosshair}>
</EJ.Chart>		 Property: line

<ChartComponent id='charts' line:{width:2, color:'green'}>
</ChartComponent>
type Property: type

var crosshair={ type: ‘trackball’ };
<EJ.Chart
crosshair={crosshair}>
</EJ.Chart>		 Not applicable

3D chart

Behavior API in Essential JS 1 API in Essential JS 2
type Property: type

var enable3D= true;
<EJ.Chart
enable3D={enable3D}>
</EJ.Chart>		 Not applicable

Indicators

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

var indicators= [{ type: “accumulationdistribution” }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: marker

<ChartComponent id='charts'>
<IndicatorDirective type='AccumulationDistribution'>
</IndicatorDirective>
</ChartComponent>
Period for indicator Property: period

var indicators= [{ period: 3 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: marker

<ChartComponent id='charts'>
<IndicatorDirective period={3}'>
</IndicatorDirective>
</ChartComponent>
%K value in stochastic indicator Property: kPeriod

var indicators= [{ kPeriod: 3 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: kPeriod

<ChartComponent id='charts'>
<IndicatorDirective kPeriod={2}>
</IndicatorDirective>
</ChartComponent>
%D value in stochastic indicator Property: dPeriod

var indicators= [{ dPeriod: 3 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: dPeriod

<ChartComponent id='charts'>
<IndicatorDirective dPeriod={2}>
</IndicatorDirective>
</ChartComponent>
Shows overSold/overBought values Not applicable Property: showZones

<ChartComponent id='charts'>
<IndicatorDirective showZones={true}>
</IndicatorDirective>
</ChartComponent>
Overbought value for RSI and stochastic indicator Not applicable Property: overBought

<ChartComponent id='charts'>
<IndicatorDirective overBought={70}>
</IndicatorDirective>
</ChartComponent>
Overbought value for RSI and stochastic indicator Not applicable Property: overSold

<ChartComponent id='charts'>
<IndicatorDirective overSold={70}>
</IndicatorDirective>
</ChartComponent>
Field for indicator Property: field

var indicators= [{ field: “close” }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: field

<ChartComponent id='charts'>
<IndicatorDirective field='Close'>
</IndicatorDirective>
</ChartComponent>
Slow period for MACD indicator Property: shortPeriod

var indicators= [{ shortPeriod: 5 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: slowPeriod

<ChartComponent id='charts'>
<IndicatorDirective slowPeriod={5}>
</IndicatorDirective>
</ChartComponent>
Fast period for MACD indicator Property: longPeriod

var indicators= [{ longPeriod: 5 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: fastPeriod

<ChartComponent id='charts'>
<IndicatorDirective fastPeriod={5}>
</IndicatorDirective>
</ChartComponent>
Type of MACD indicator Property: macdType

var indicators= [{ macdType : “both” }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: macdType

<ChartComponent id='charts'>
<IndicatorDirective macdType='Both'>
</IndicatorDirective>
</ChartComponent>
Color of the positive bars in Macd indicators Not applicable Property: macdPositiveColor

<ChartComponent id='charts'>
<IndicatorDirective macdPositiveColor: 'red'>
</IndicatorDirective>
</ChartComponent>
Color of the negative bars in Macd indicators Not applicable Property: macdPositiveColor

<ChartComponent id='charts'>
<IndicatorDirective macdNegativeColor='#e74c3d'>
</IndicatorDirective>
</ChartComponent>
Appearance of upper line in indicator Property: upperLine

var indicators= [{ upperLine: { fill: ‘#EECCAA’} }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: upperLine

<ChartComponent id='charts'>
<IndicatorDirective upperLine={ color: '#ffb735', width: 1 }>
</IndicatorDirective>
</ChartComponent>
Appearance of lower line in indicator Property: lowerLine

var indicators= [{ lowerLine: { fill: ‘#EECCAA’} }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: lowerLine

<ChartComponent id='charts'>
<IndicatorDirective lowerLine={ color: '#ffb735', width: 1 }>
</IndicatorDirective>
</ChartComponent>
Appearance of period line in indicator Property: periodLine

var indicators= [{ periodLine: { fill: ‘#EECCAA’} }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: periodLine

<ChartComponent id='charts'>
<IndicatorDirective periodLine={ color: '#ffb735', width: 1 }>
</IndicatorDirective>
</ChartComponent>
Name of the series for which indicator has to be drawn Property: seriesName

var indicators= [{ seriesName =“Apple Inc” }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: seriesName

<ChartComponent id='charts'>
<IndicatorDirective seriesName ='Apple Inc'>
</IndicatorDirective>
</ChartComponent>
Enabling animation Property: enableAnimation

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

<ChartComponent id='charts'>
<IndicatorDirective animation={ enable: true }>
</IndicatorDirective>
</ChartComponent>
Animation duration Property: animationDuration

var indicators= [{ animationDuration: 3000 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: animation.duration

<ChartComponent id='charts'>
<IndicatorDirective animation={ duration: 3000}>
</IndicatorDirective>
</ChartComponent>
Tooltip Property: tooltip

var indicators= [{ tooltip: { visible: true } }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Not applicable
Trigger value of MACD indicator Property: trigger

var indicators= [{ trigger: 14 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Not applicable
Fill color for indicator Property: fill

var indicators= [{ fill: ‘#EEDDCC’ }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: fill

<ChartComponent id='charts'>
<IndicatorDirective fill='#606eff'>
</IndicatorDirective>
</ChartComponent>
Width for indicator Property: width

var indicators= [{ width: 2 }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: width

<ChartComponent id='charts'>
<IndicatorDirective width={3}>
</IndicatorDirective>
</ChartComponent>
xAxis Name of indicator Property: xAxisName

var indicators= [{ xAxisName: ” }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: xAxisName

<ChartComponent id='charts'>
<IndicatorDirective xAxisName=''>
</IndicatorDirective>
</ChartComponent>
yAxis Name of indicator Property: yAxisName

var indicators= [{ yAxisName: ” }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Property: yAxisName

<ChartComponent id='charts'>
<IndicatorDirective yAxisName=''>
</IndicatorDirective>
</ChartComponent>
Visibility of indicator Property: visibility

var indicators= [{ visibility: true }];
<EJ.Chart
indicators={indicators}>
</EJ.Chart>		 Not applicable

Legend

Behavior API in Essential JS 1 API in Essential JS 2
Default legend Property: visible

var legend= { visible: true };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: yAxisName

<ChartComponent id='charts' legendSettings = { visible: true, position: 'Top' }>
</ChartComponent>
Legend height Property: height

var legend= { size : { height: 50 } };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: yAxisName

<ChartComponent id='charts' legendSettings = { height: '30' }>
</ChartComponent>
Legend width Property: size.width

var legend= { size : { width: 50 } };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: width

<ChartComponent id='charts' legendSettings = { width: '30' }>
</ChartComponent>
Legend location in chart Property: location

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

<ChartComponent id='charts' legendSettings = { location: { x: 3, y: 45} }>
</ChartComponent>
Legend position in chart Property: position

var legend= { position: ‘top’ };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: position

<ChartComponent id='charts' legendSettings = { position: 'Top'}>
</ChartComponent>
Legend padding Not applicable Property: padding

<ChartComponent id='charts' legendSettings = { padding: 8}>
</ChartComponent>
Legend alignment Property: alignment

var legend= { alignment: ‘center’ };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: alignment

<ChartComponent id='charts' legendSettings = { alignment: 'Near'}>
</ChartComponent>
text style for legend Property: font

var legend= { font: { fontFamily: ”} };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: textStyle

<ChartComponent id='charts' legendSettings = { textStyle: { size: '12px'}}>
</ChartComponent>
shape height of legend Property: itemStyle.height

var legend= { itemStyle : { height: 20 } };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: shapeHeight

<ChartComponent id='charts' legendSettings = { shapeHeight: 20}>
</ChartComponent>
shape width of legend Property: itemStyle.width

var legend= { itemStyle : { width: 20 } };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: shapeWidth

<ChartComponent id='charts' legendSettings = { shapeWidth: 20}>
</ChartComponent>
shape border of legend Property: itemStyle.border

var legend= { itemStyle : { border: {width: 20 }}};
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Not Applicable
shape padding of legend Property: itemPadding

var legend= { itemPadding : 10 };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: shapePadding

<ChartComponent id='charts' legendSettings = { shapePadding: 20}>
</ChartComponent>
Background of legend Property: background

var legend= { background: ‘transparent’ };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: backgorund

<ChartComponent id='charts' legendSettings = { background: 'transparent'}>
</ChartComponent>
Opacity of legend Property: opacity

var legend= { opacity: 0.3 };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: opacity

<ChartComponent id='charts' legendSettings = { opacity: 0.4}>
</ChartComponent>
Toggle visibility of series while legend click Property: toggleSeriesVisibility

var legend= { toggleSeriesVisibility : true };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: toggleVisibility

<ChartComponent id='charts' legendSettings = { toggleVisibility: true}>
</ChartComponent>
Title for legend Property: title

var legend= { title: { text: ‘LegendTitle’} };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Not applicable
Text Overflow for legend Property: textOverFlow

var legend= { textOverFlow : ‘trim’ };
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Property: textStyle.textOverFlow

<ChartComponent id='charts' legendSettings = { text: { textOverFlow : 'trim' }}>
</ChartComponent>
Text width for legend while setting text overflow Property: textWidth

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

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

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

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

var legend= { fill: ‘#EEFFCC’};
<EJ.Chart
legend={legend}>
</EJ.Chart>		 Not applicable

primaryXAxis

Behavior API in Essential JS 1 API in Essential JS 2
Axis line cross value Property: crossesAt

var primaryXAxis = { crossesAt : 0 };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: crossesAt

<ChartComponent id='charts' primaryXAxis ={ crossesAt : 15 }>
</ChartComponent>
axis name with which the axis line has to be crossed Property: crossesInAxis

var primaryXAxis = { crossesInAxis : ” };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: crossesInAxis

<ChartComponent id='charts' primaryXAxis ={ crossesInAxis : '' }>
</ChartComponent>
axis elements placed with axis line Property: showNextToAxisLine

var primaryXAxis = { showNextToAxisLine : true };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: placeNextToAxisLine

<ChartComponent id='charts' primaryXAxis ={ placeNextToAxisLine: '' }>
</ChartComponent>
axis line style Property: axisLine.color

var primaryXAxis = { axisLine: { color : ‘red’ } };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: lineStyle.color

<ChartComponent id='charts' primaryXAxis ={ lineStyle: { color: 'black' } }>
</ChartComponent>
axis line dashArray Property: axisLine.dashArray

var primaryXAxis = { axisLine: { dashArray : ‘10, 5’ } };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: lineStyle.dashArray

<ChartComponent id='charts' primaryXAxis ={ lineStyle: { dashArray: '10, 5' } }>
</ChartComponent>
Offset for axis Property: axisLine.offset

var primaryXAxis = { axisLine: { offset : 10 } };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: plotOffset

<ChartComponent id='charts' primaryXAxis ={ plotOffset: 10 }>
</ChartComponent>
Visible of an axis Property: axisLine.visible

var primaryXAxis = { axisLine: { visible : false } };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: visible

<ChartComponent id='charts' primaryXAxis ={ visible: false }>
</ChartComponent>
Width of an axis Property: axisLine.width

var primaryXAxis = { axisLine: { width : 2 } };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: lineStyle.width

<ChartComponent id='charts' primaryXAxis ={ lineStyle: { width: 3 }}>
</ChartComponent>
Column index of an axis Property: columnIndex

var primaryXAxis = { columnIndex: 2 };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: columnIndex

<ChartComponent id='charts' primaryXAxis ={ columnIndex: 2}>
</ChartComponent>
span of an axis to place horizontally or vertically Property: columnSpan

var primaryXAxis = { columnSpan: 2 };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: span

<ChartComponent id='charts' primaryXAxis ={ span: 2}>
</ChartComponent>
Crosshair label of an axis Property: crossHairLabel.visible

var primaryXAxis = { crossHairLabel: { visible: true } };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: crossHairTooltip.enable

<ChartComponent id='charts' crossHairTooltip: { enable: true }>
</ChartComponent>
Crosshair label color of an axis Not applicable Property: crossHairTooltip.fill

<ChartComponent id='charts' crossHairTooltip: { fill: 'red' }>
</ChartComponent>
Crosshair label text style Not applicable Property: crossHairTooltip.textStyle

<ChartComponent id='charts' crossHairTooltip: { textStyle: { } }>
</ChartComponent>
Desired interval count for primaryXAxis Property: desiredIntervals

var primaryXAxis = { desiredIntervals: 4};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: desiredIntervals

<ChartComponent id='charts' primaryXAxis ={ desiredIntervals: 4 }>
</ChartComponent>
Edges primaryXAxis Property: edgeLabelPlacement

var primaryXAxis = { edgeLabelPlacement: ‘none’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: edgeLabelPlacement

<ChartComponent id='charts' primaryXAxis ={ edgeLabelPlacement: 'Shift' }>
</ChartComponent>
Enables trim for axis labels Property: enableTrim

var primaryXAxis = { enableTrim: true};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: enableTrim

<ChartComponent id='charts' primaryXAxis ={ enableTrim: true }>
</ChartComponent>
Specifies the interval of the axis according to the zoomed data of the chart Property: enableAutoIntervalOnZooming

var primaryXAxis = { enableAutoIntervalOnZooming: true};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: enableAutoIntervalOnZooming

<ChartComponent id='charts' primaryXAxis ={ enableAutoIntervalOnZooming: true }>
</ChartComponent>
Font style for primaryXAxis Property: font

var primaryXAxis = { font: { fontFamily: ‘Calibri’} };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: titleStyle

<ChartComponent id='charts' primaryXAxis ={ titleStyle: { }}>
</ChartComponent>
Indexed for category axis Property: isIndexed

var primaryXAxis = { font: { isIndexed: true} };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: isIndexed

<ChartComponent id='charts' primaryXAxis ={ isIndexed: true}>
</ChartComponent>
Interval type for date time axis Property: intervalType

var primaryXAxis = { intervalType: ‘Auto’ };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: intervalType

<ChartComponent id='charts' primaryXAxis ={ intervalType: 'Auto'}>
</ChartComponent>
Inversed axis Property: isInversed

var primaryXAxis = {isInversed: true};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: isInversed

<ChartComponent id='charts' primaryXAxis ={ isInversed: true}>
</ChartComponent>
Custom label format Property: labelFormat

var primaryXAxis = {labelFormat: ‘{value}K’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: labelFormat

<ChartComponent id='charts' primaryXAxis ={ labelFormat: '{value}K'}>
</ChartComponent>
labelIntersectAction Property: labelIntersectAction

var primaryXAxis = {labelIntersectAction: ‘trim’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: labelIntersectAction

<ChartComponent id='charts' primaryXAxis ={labelIntersectAction: 'Trim' }>
</ChartComponent>
labelPosition Property: labelPosition

var primaryXAxis = {labelPosition: ‘inside’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: labelPosition

<ChartComponent id='charts' primaryXAxis ={labelPosition: 'Inside' }>
</ChartComponent>
labelPlacement for category axis Property: labelPlacement

var primaryXAxis = {labelPlacement: ‘onTicks’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: labelPlacement

<ChartComponent id='charts' primaryXAxis ={ labelPlacement: 'OnTicks' }>
</ChartComponent>
Axis label alignment Property: alignment

var primaryXAxis = {alignment: ‘center’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Rotation of axis labels Property: labelRotation

var primaryXAxis = {labelRotation: 45};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: labelRotation

<ChartComponent id='charts' primaryXAxis ={ labelRotation: 45 }>
</ChartComponent>
Log base value for logarithmic axis Property: logBase

var primaryXAxis = {logBase: 10};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: logBase

<ChartComponent id='charts' primaryXAxis ={ logBase: 10 }>
</ChartComponent>
Major grid line Property: majorGridLines.visible

var primaryXAxis = {majorGridLines: { visible: true}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Width of MajorGridLines Property: majorGridLines.width

var primaryXAxis = {majorGridLines: { width: 2}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: majorGridLines.width

<ChartComponent id='charts' primaryXAxis ={ majorGridLines: { width: 2} }>
</ChartComponent>
Color of MajorGridLines Property: majorGridLines.color

var primaryXAxis = {majorGridLines: { color: ‘black’ }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: majorGridLines.color

<ChartComponent id='charts' primaryXAxis ={ majorGridLines: { color: 'black' } }>
</ChartComponent>
DashArray of MajorGridLines Property: majorGridLines.dashArray

var primaryXAxis = {majorGridLines: { dashArray: ‘10,5’ }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: majorGridLines.dashArray

<ChartComponent id='charts' primaryXAxis ={ majorGridLines: { dashArray: '10,5' } }>
</ChartComponent>
Opacity of major grid line Property: majorGridLines.opacity

var primaryXAxis = {majorGridLines: { opacity: true }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Major Tick line Property: majorTickLines.visible

var primaryXAxis = {majorTickLines: { visible: true }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Width of MajorTickLines Property: majorTickLines.width

var primaryXAxis = {majorTickLines: { width: 2 }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: majorTickLines.width

<ChartComponent id='charts' primaryXAxis ={ majorTickLines: { width: 2 } }>
</ChartComponent>
Height of MajorTickLines Property: majorTickLines.size

var primaryXAxis = {majorTickLines: { size: 2 }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: majorTickLines.height

<ChartComponent id='charts' primaryXAxis ={ majorTickLines: { height: 2} }>
</ChartComponent>
Color of MajorTickLines Property: majorTickLines.color

var primaryXAxis = {majorTickLines: { color: ‘black’ }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: majorTickLines.color

<ChartComponent id='charts' primaryXAxis ={ majorTickLines: { color: 'black' } }>
</ChartComponent>
Opacity of major Tick line Property: majorTickLines.opacity

var primaryXAxis = {majorTickLines: { opacity: true};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
maximum labels of primaryXAxis Property: maximumLabels

var primaryXAxis = { maximumLabels: 5};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: maximumLabels

<ChartComponent id='charts' primaryXAxis ={ maximumLabels: 4 }>
</ChartComponent>
maximum labels width of primaryXAxis to trim Property: maximumLabelWidth

var primaryXAxis = { maximumLabelWidth: 40};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: maximumLabelWidth

<ChartComponent id='charts' primaryXAxis ={ maximumLabelWidth: 40 }>
</ChartComponent>
minor grid line Property: minorGridLines.visible

var primaryXAxis = { minorGridLines: { visible: true}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Width of minorGridLines Property: minorGridLines.width

var primaryXAxis = { minorGridLines: { width: 2}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorGridLines.width

<ChartComponent id='charts' primaryXAxis ={ minorGridLines: { width: 2} }>
</ChartComponent>
Color of minorGridLines Property: minorGridLines.color

var primaryXAxis = { minorGridLines: { color: ‘black’}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorGridLines.color

<ChartComponent id='charts' primaryXAxis ={ minorGridLines: { color: 'black' } }>
</ChartComponent>
DashArray of minorGridLines Property: minorGridLines.dashArray

var primaryXAxis = { minorGridLines: { dashArray: ‘10,5’}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorGridLines.dashArray

<ChartComponent id='charts' primaryXAxis ={ minorGridLines: { dashArray: '10,5' } }>
</ChartComponent>
Opacity of minor grid line Property: minorGridLines.opacity

var primaryXAxis = { minorGridLines: { opacity: true}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
minor Tick line Property: minorTickLines.visible

var primaryXAxis = { minorTickLines: { visible: true}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Width of minorTickLines Property: minorTickLines.width

var primaryXAxis = { minorTickLines: { width: 2 }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorTickLines.width

<ChartComponent id='charts' primaryXAxis ={ minorTickLines: { width: 2}}>
</ChartComponent>
Height of minorTickLines Property: minorTickLines.size

var primaryXAxis = { minorTickLines: { size: 2}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorTickLines.height

<ChartComponent id='charts' primaryXAxis ={ minorTickLines: { height: 2}}>
</ChartComponent>
Color of minorTickLines Property: minorTickLines.color

var primaryXAxis = { minorTickLines: { color: ‘black’ }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorTickLines.color

<ChartComponent id='charts' primaryXAxis ={ minorTickLines: { color: 'black' }}>
</ChartComponent>
Opacity of minor Tick line Property: minorTickLines.opacity

var primaryXAxis = { minorTickLines: { opacity: true }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Minor ticks per interval of primaryXAxis Property: minorTicksPerInterval

var primaryXAxis = { minorTicksPerInterval: 4};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minorTicksPerInterval

<ChartComponent id='charts' primaryXAxis ={ minorTicksPerInterval: 4 }>
</ChartComponent>
name of the primaryXAxis Property: name

var primaryXAxis = { name: ‘primaryXAxis’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: name

<ChartComponent id='charts' primaryXAxis ={ name: 'primaryXAxis' }>
</ChartComponent>
Orientation of primaryXAxis Property: orientation

var primaryXAxis = { orientation: ‘Vertical’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
Plot offset for primaryXAxis Property: plotOffset

var primaryXAxis = { plotOffset: 0};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: plotOffset

<ChartComponent id='charts' primaryXAxis ={ plotOffset: 0 }>
</ChartComponent>
minimum for primaryXAxis Property: range.minimum

var primaryXAxis = { range: { minimum: 10 }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: minimum

<ChartComponent id='charts' primaryXAxis ={ minimum: 23 }>
</ChartComponent>
maximum for primaryXAxis Property: range.maximum

var primaryXAxis = { range: { maximum: 10 }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: maximum

<ChartComponent id='charts' primaryXAxis ={ maximum: 23 }>
</ChartComponent>
interval for primaryXAxis Property: range.interval

var primaryXAxis = { range: { interval: 1 }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: interval

<ChartComponent id='charts' primaryXAxis ={ interval: 2 }>
</ChartComponent>
RangePadding for primaryXAxis Property: rangePadding

var primaryXAxis = { rangePadding: ‘None’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: rangePadding

<ChartComponent id='charts' primaryXAxis ={ rangePadding : 'None'}>
</ChartComponent>
Rounding Places in primaryXAxis Property: roundingPlaces

var primaryXAxis = { roundingPlaces: 3};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: labelFormat

<ChartComponent id='charts' primaryXAxis ={ labelFormat: 'n3'}>
</ChartComponent>
ScrollBar settings of primaryXAxis Property: scrollbarSettings

var primaryXAxis = { scrollbarSettings : { }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not Applicable
TickPosition in primaryXAxis Property: tickLinesPosition

var primaryXAxis = { tickLinesPosition: ‘Inside’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: tickPosition

<ChartComponent id='charts' primaryXAxis ={ tickPosition: 'Inside'}>
</ChartComponent>
valueType of primaryXAxis Property: valueType

var primaryXAxis = { valueType: ‘DateTime’};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: valueType

<ChartComponent id='charts' primaryXAxis ={ valueType: 'DateTime'}>
</ChartComponent>
visible of primaryXAxis Property: visible

var primaryXAxis = { visible: true};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: visible

<ChartComponent id='charts' primaryXAxis ={ visible: true}>
</ChartComponent>
zoomFactor of primaryXAxis Property: zoomFactor

var primaryXAxis = { zoomFactor: 0.3};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: zoomFactor

<ChartComponent id='charts' primaryXAxis ={ zoomFactor: 0.3}>
</ChartComponent>
zoomPosition of primaryXAxis Property: zoomPosition

var primaryXAxis = { zoomPosition: 0.3};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: zoomPosition

<ChartComponent id='charts' primaryXAxis ={ zoomPosition: 0.3}>
</ChartComponent>
labelBorder of primaryXAxis Property: labelBorder

var primaryXAxis = { labelBorder: { color: ‘red’, width: 2}};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: border

<ChartComponent id='charts' primaryXAxis ={ border: { color: 'red', width: 3 }}>
</ChartComponent>
title of primaryXAxis Property: title.text

var primaryXAxis = { title: { text: ‘Chart title’ }};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: title

<ChartComponent id='charts' primaryXAxis ={title: 'Chart title'}>
</ChartComponent>
StripLine of primaryXAxis Property: stripLine

var primaryXAxis = { stripLine: []};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines

<ChartComponent id='charts' primaryXAxis ={stripLines: []}>
</ChartComponent>
Multilevel labels of primaryXAxis Property: multiLevelLabels

var primaryXAxis = { multiLevelLabels: []};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels

<ChartComponent id='charts' primaryXAxis ={multiLevelLabels: []}>
</ChartComponent>
skeleton for an axes Not Applicable Property: axes.skeleton

<ChartComponent id='charts' primaryXAxis ={axes=[ { skeleton: 'yMd' }}>
</ChartComponent>
skeleton type for an axes Not Applicable Property: axes.skeletonType

<ChartComponent id='charts' primaryXAxis ={axes=[{skeletonType: 'DateTime'}]}>
</ChartComponent>

primaryYAxis

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

var primaryYAxis = {alternateGridBand: { even: { fill: ‘red } } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not applicable
Axis line cross value Property: crossesAt

var primaryYAxis = { crossesAt : 0 };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: crossesAt

<ChartComponent id='charts' primaryYAxis ={ crossesAt : 15 }>
</ChartComponent>
axis name with which the axis line has to be crossed Property: crossesInAxis

var primaryYAxis = { crossesInAxis : ” };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: crossesInAxis

<ChartComponent id='charts' primaryYAxis ={ crossesInAxis : '' }>
</ChartComponent>
axis elements placed with axis line Property: showNextToAxisLine

var primaryYAxis = { showNextToAxisLine : true };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: placeNextToAxisLine

<ChartComponent id='charts' primaryYAxis ={ placeNextToAxisLine: '' }>
</ChartComponent>
axis line style Property: axisLine.color

var primaryYAxis = { axisLine: { color : ‘red’ } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: lineStyle.color

<ChartComponent id='charts' primaryYAxis ={ lineStyle: { color: 'black' } }>
</ChartComponent>
axis line dashArray Property: axisLine.dashArray

var primaryYAxis = { axisLine: { dashArray : ‘10, 5’ } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: lineStyle.dashArray

<ChartComponent id='charts' primaryYAxis ={ lineStyle: { dashArray: '10, 5' } }>
</ChartComponent>
Offset for axis Property: axisLine.offset

var primaryYAxis = { axisLine: { offset : 10 } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: plotOffset

<ChartComponent id='charts' primaryYAxis ={ plotOffset: 10 }>
</ChartComponent>
Visible of an axis Property: axisLine.visible

var primaryYAxis = { axisLine: { visible : false } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: visible

<ChartComponent id='charts' primaryYAxis ={ visible: false }>
</ChartComponent>
Width of an axis Property: axisLine.width

var primaryYAxis = { axisLine: { width : 2 } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: lineStyle.width

<ChartComponent id='charts' primaryYAxis ={ lineStyle: { width: 3 }}>
</ChartComponent>
Column index of an axis Property: columnIndex

var primaryYAxis = { columnIndex: 2 };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: columnIndex

<ChartComponent id='charts' primaryYAxis ={ columnIndex: 2}>
</ChartComponent>
span of an axis to place horizontally or vertically Property: columnSpan

var primaryYAxis = { columnSpan: 2 };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: span

<ChartComponent id='charts' primaryYAxis ={ span: 2}>
</ChartComponent>
Crosshair label of an axis Property: crossHairLabel.visible

var primaryYAxis = { crossHairLabel: { visible: true } };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: crossHairTooltip.enable

<ChartComponent id='charts' crossHairTooltip: { enable: true }>
</ChartComponent>
Crosshair label color of an axis Not applicable Property: crossHairTooltip.fill

<ChartComponent id='charts' crossHairTooltip: { fill: 'red' }>
</ChartComponent>
Crosshair label text style Not applicable Property: crossHairTooltip.textStyle

<ChartComponent id='charts' crossHairTooltip: { textStyle: { } }>
</ChartComponent>
Desired interval count for primaryYAxis Property: desiredIntervals

var primaryYAxis = { desiredIntervals: 4};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: desiredIntervals

<ChartComponent id='charts' primaryYAxis ={ desiredIntervals: 4 }>
</ChartComponent>
Edges primaryYAxis Property: edgeLabelPlacement

var primaryYAxis = { edgeLabelPlacement: ‘none’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: edgeLabelPlacement

<ChartComponent id='charts' primaryYAxis ={ edgeLabelPlacement: 'Shift' }>
</ChartComponent>
Enables trim for axis labels Property: enableTrim

var primaryYAxis = { enableTrim: true};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: enableTrim

<ChartComponent id='charts' primaryYAxis ={ enableTrim: true }>
</ChartComponent>
Specifies the interval of the axis according to the zoomed data of the chart Property: enableAutoIntervalOnZooming

var primaryYAxis = { enableAutoIntervalOnZooming: true};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: enableAutoIntervalOnZooming

<ChartComponent id='charts' primaryYAxis ={ enableAutoIntervalOnZooming: true }>
</ChartComponent>
Font style for primaryYAxis Property: font

var primaryYAxis = { font: { fontFamily: ‘Calibri’} };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: titleStyle

<ChartComponent id='charts' primaryYAxis ={ titleStyle: { }}>
</ChartComponent>
Indexed for category axis Property: isIndexed

var primaryYAxis = { font: { isIndexed: true} };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: isIndexed

<ChartComponent id='charts' primaryYAxis ={ isIndexed: true}>
</ChartComponent>
Interval type for date time axis Property: intervalType

var primaryYAxis = { intervalType: ‘Auto’ };
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: intervalType

<ChartComponent id='charts' primaryYAxis ={ intervalType: 'Auto'}>
</ChartComponent>
Inversed axis Property: isInversed

var primaryYAxis = {isInversed: true};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: isInversed

<ChartComponent id='charts' primaryYAxis ={ isInversed: true}>
</ChartComponent>
Custom label format Property: labelFormat

var primaryYAxis = {labelFormat: ‘{value}K’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: labelFormat

<ChartComponent id='charts' primaryYAxis ={ labelFormat: '{value}K'}>
</ChartComponent>
labelIntersectAction Property: labelIntersectAction

var primaryYAxis = {labelIntersectAction: ‘trim’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: labelIntersectAction

<ChartComponent id='charts' primaryYAxis ={labelIntersectAction: 'Trim' }>
</ChartComponent>
labelPosition Property: labelPosition

var primaryYAxis = {labelPosition: ‘inside’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: labelPosition

<ChartComponent id='charts' primaryYAxis ={labelPosition: 'Inside' }>
</ChartComponent>
labelPlacement for category axis Property: labelPlacement

var primaryYAxis = {labelPlacement: ‘onTicks’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: labelPlacement

<ChartComponent id='charts' primaryYAxis ={ labelPlacement: 'OnTicks' }>
</ChartComponent>
Axis label alignment Property: alignment

var primaryYAxis = {alignment: ‘center’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Rotation of axis labels Property: labelRotation

var primaryYAxis = {labelRotation: 45};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: labelRotation

<ChartComponent id='charts' primaryYAxis ={ labelRotation: 45 }>
</ChartComponent>
Log base value for logarithmic axis Property: logBase

var primaryYAxis = {logBase: 10};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: logBase

<ChartComponent id='charts' primaryYAxis ={ logBase: 10 }>
</ChartComponent>
Major grid line Property: majorGridLines.visible

var primaryYAxis = {majorGridLines: { visible: true}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Width of MajorGridLines Property: majorGridLines.width

var primaryYAxis = {majorGridLines: { width: 2}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: majorGridLines.width

<ChartComponent id='charts' primaryYAxis ={ majorGridLines: { width: 2} }>
</ChartComponent>
Color of MajorGridLines Property: majorGridLines.color

var primaryYAxis = {majorGridLines: { color: ‘black’ }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: majorGridLines.color

<ChartComponent id='charts' primaryYAxis ={ majorGridLines: { color: 'black' } }>
</ChartComponent>
DashArray of MajorGridLines Property: majorGridLines.dashArray

var primaryYAxis = {majorGridLines: { dashArray: ‘10,5’ }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: majorGridLines.dashArray

<ChartComponent id='charts' primaryYAxis ={ majorGridLines: { dashArray: '10,5' } }>
</ChartComponent>
Opacity of major grid line Property: majorGridLines.opacity

var primaryYAxis = {majorGridLines: { opacity: true }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Major Tick line Property: majorTickLines.visible

var primaryYAxis = {majorTickLines: { visible: true }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Width of MajorTickLines Property: majorTickLines.width

var primaryYAxis = {majorTickLines: { width: 2 }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: majorTickLines.width

<ChartComponent id='charts' primaryYAxis ={ majorTickLines: { width: 2 } }>
</ChartComponent>
Height of MajorTickLines Property: majorTickLines.size

var primaryYAxis = {majorTickLines: { size: 2 }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: majorTickLines.height

<ChartComponent id='charts' primaryYAxis ={ majorTickLines: { height: 2} }>
</ChartComponent>
Color of MajorTickLines Property: majorTickLines.color

var primaryYAxis = {majorTickLines: { color: ‘black’ }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: majorTickLines.color

<ChartComponent id='charts' primaryYAxis ={ majorTickLines: { color: 'black' } }>
</ChartComponent>
Opacity of major Tick line Property: majorTickLines.opacity

var primaryYAxis = {majorTickLines: { opacity: true};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
maximum labels of primaryYAxis Property: maximumLabels

var primaryYAxis = { maximumLabels: 5};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: maximumLabels

<ChartComponent id='charts' primaryYAxis ={ maximumLabels: 4 }>
</ChartComponent>
maximum labels width of primaryYAxis to trim Property: maximumLabelWidth

var primaryYAxis = { maximumLabelWidth: 40};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: maximumLabelWidth

<ChartComponent id='charts' primaryYAxis ={ maximumLabelWidth: 40 }>
</ChartComponent>
minor grid line Property: minorGridLines.visible

var primaryYAxis = { minorGridLines: { visible: true}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Width of minorGridLines Property: minorGridLines.width

var primaryYAxis = { minorGridLines: { width: 2}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorGridLines.width

<ChartComponent id='charts' primaryYAxis ={ minorGridLines: { width: 2} }>
</ChartComponent>
Color of minorGridLines Property: minorGridLines.color

var primaryYAxis = { minorGridLines: { color: ‘black’}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorGridLines.color

<ChartComponent id='charts' primaryYAxis ={ minorGridLines: { color: 'black' } }>
</ChartComponent>
DashArray of minorGridLines Property: minorGridLines.dashArray

var primaryYAxis = { minorGridLines: { dashArray: ‘10,5’}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorGridLines.dashArray

<ChartComponent id='charts' primaryYAxis ={ minorGridLines: { dashArray: '10,5' } }>
</ChartComponent>
Opacity of minor grid line Property: minorGridLines.opacity

var primaryYAxis = { minorGridLines: { opacity: true}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
minor Tick line Property: minorTickLines.visible

var primaryYAxis = { minorTickLines: { visible: true}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Width of minorTickLines Property: minorTickLines.width

var primaryYAxis = { minorTickLines: { width: 2 }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorTickLines.width

<ChartComponent id='charts' primaryYAxis ={ minorTickLines: { width: 2}}>
</ChartComponent>
Height of minorTickLines Property: minorTickLines.size

var primaryYAxis = { minorTickLines: { size: 2}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorTickLines.height

<ChartComponent id='charts' primaryYAxis ={ minorTickLines: { height: 2}}>
</ChartComponent>
Color of minorTickLines Property: minorTickLines.color

var primaryYAxis = { minorTickLines: { color: ‘black’ }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorTickLines.color

<ChartComponent id='charts' primaryYAxis ={ minorTickLines: { color: 'black' }}>
</ChartComponent>
Opacity of minor Tick line Property: minorTickLines.opacity

var primaryYAxis = { minorTickLines: { opacity: true }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Minor ticks per interval of primaryYAxis Property: minorTicksPerInterval

var primaryYAxis = { minorTicksPerInterval: 4};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minorTicksPerInterval

<ChartComponent id='charts' primaryYAxis ={ minorTicksPerInterval: 4 }>
</ChartComponent>
name of the primaryYAxis Property: name

var primaryYAxis = { name: ‘primaryYAxis’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: name

<ChartComponent id='charts' primaryYAxis ={ name: 'primaryYAxis' }>
</ChartComponent>
Orientation of primaryYAxis Property: orientation

var primaryYAxis = { orientation: ‘Vertical’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
Plot offset for primaryYAxis Property: plotOffset

var primaryYAxis = { plotOffset: 0};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: plotOffset

<ChartComponent id='charts' primaryYAxis ={ plotOffset: 0 }>
</ChartComponent>
minimum for primaryYAxis Property: range.minimum

var primaryYAxis = { range: { minimum: 10 }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: minimum

<ChartComponent id='charts' primaryYAxis ={ minimum: 23 }>
</ChartComponent>
maximum for primaryYAxis Property: range.maximum

var primaryYAxis = { range: { maximum: 10 }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: maximum

<ChartComponent id='charts' primaryYAxis ={ maximum: 23 }>
</ChartComponent>
interval for primaryYAxis Property: range.interval

var primaryYAxis = { range: { interval: 1 }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: interval

<ChartComponent id='charts' primaryYAxis ={ interval: 2 }>
</ChartComponent>
RangePadding for primaryYAxis Property: rangePadding

var primaryYAxis = { rangePadding: ‘None’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: rangePadding

<ChartComponent id='charts' primaryYAxis ={ rangePadding: 'None'}>
</ChartComponent>
Rounding Places in primaryYAxis Property: roundingPlaces

var primaryYAxis = { roundingPlaces: 3};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: labelFormat

<ChartComponent id='charts' primaryYAxis ={ labelFormat: 'n3'}>
</ChartComponent>
ScrollBar settings of primaryYAxis Property: scrollbarSettings

var primaryYAxis = { scrollbarSettings : { }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Not Applicable
TickPosition in primaryYAxis Property: tickLinesPosition

var primaryYAxis = { tickLinesPosition: ‘Inside’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: tickPosition

<ChartComponent id='charts' primaryYAxis ={ tickPosition: 'Inside'}>
</ChartComponent>
valueType of primaryYAxis Property: valueType

var primaryYAxis = { valueType: ‘DateTime’};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: valueType

<ChartComponent id='charts' primaryYAxis ={ valueType: 'DateTime'}>
</ChartComponent>
visible of primaryYAxis Property: visible

var primaryYAxis = { visible: true};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: visible

<ChartComponent id='charts' primaryYAxis ={ visible: true}>
</ChartComponent>
zoomFactor of primaryYAxis Property: zoomFactor

var primaryYAxis = { zoomFactor: 0.3};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: zoomFactor

<ChartComponent id='charts' primaryYAxis ={ zoomFactor: 0.3}>
</ChartComponent>
zoomPosition of primaryYAxis Property: zoomPosition

var primaryYAxis = { zoomPosition: 0.3};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: zoomPosition

<ChartComponent id='charts' primaryYAxis ={ zoomPosition: 0.3}>
</ChartComponent>
labelBorder of primaryYAxis Property: labelBorder

var primaryYAxis = { labelBorder: { color: ‘red’, width: 2}};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: border

<ChartComponent id='charts' primaryYAxis ={ border: { color: 'red', width: 3 }}>
</ChartComponent>
title of primaryYAxis Property: title.text

var primaryYAxis = { title: { text: ‘Chart title’ }};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: title

<ChartComponent id='charts' primaryYAxis ={title: 'Chart title'}>
</ChartComponent>
StripLine of primaryYAxis Property: stripLine

var primaryYAxis = { stripLine: []};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: stripLines

<ChartComponent id='charts' primaryYAxis ={stripLines: []}>
</ChartComponent>
Multilevel labels of primaryYAxis Property: multiLevelLabels

var primaryYAxis = { multiLevelLabels: []};
<EJ.Chart
primaryYAxis ={primaryYAxis}>
</EJ.Chart>		 Property: multiLevelLabels

<ChartComponent id='charts' primaryYAxis ={multiLevelLabels: []}>
</ChartComponent>
skeleton for an axes Not Applicable Property: axes.skeleton

<ChartComponent id='charts' primaryYAxis ={axes=[ { skeleton: 'yMd' }}>
</ChartComponent>
skeleton type for an axes Not Applicable Property: axes.skeletonType

<ChartComponent id='charts' primaryYAxis ={axes=[{skeletonType: 'DateTime'}]}>
</ChartComponent>

Axes

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

var axes= {alternateGridBand: { even: { fill: ‘red } } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not applicable
Axis line cross value Property: crossesAt

var axes= { crossesAt : 0 };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: crossesAt

<ChartComponent id='charts'>
<AxisDirective crossesAt='4'>
</AxisDirective>
</ChartComponent>
axis name with which the axis line has to be crossed Property: crossesInAxis

var axes= { crossesInAxis : ” };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: crossesInAxis

<ChartComponent id='charts'>
<AxisDirective crossesInAxis : '' >
</AxisDirective>
</ChartComponent>
axis elements placed with axis line Property: showNextToAxisLine

var axes= { showNextToAxisLine : true };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: placeNextToAxisLine

<ChartComponent id='charts'>
<AxisDirective placeNextToAxisLine: ''>
</AxisDirective>
</ChartComponent>
axis line style Property: axisLine.color

var axes= { axisLine: { color : ‘red’ } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: lineStyle.color

<ChartComponent id='charts'>
<AxisDirective lineStyle: { color: 'black' }>
</AxisDirective>
</ChartComponent>
axis line dashArray Property: axisLine.dashArray

var axes= { axisLine: { dashArray : ‘10, 5’ } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: lineStyle.dashArray

<ChartComponent id='charts'>
<AxisDirective lineStyle: { dashArray: '10, 5'} >
</AxisDirective>
</ChartComponent>
Offset for axis Property: axisLine.offset

var axes= { axisLine: { offset : 10 } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: plotOffset

<ChartComponent id='charts'>
<AxisDirective plotOffset: 10>
</AxisDirective>
</ChartComponent>
Visible of an axis Property: axisLine.visible

var axes= { axisLine: { visible : false } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: visible

<ChartComponent id='charts'>
<AxisDirective visible: false>
</AxisDirective>
</ChartComponent>
Width of an axis Property: axisLine.width

var axes= { axisLine: { width : 2 } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: lineStyle.width

<ChartComponent id='charts'>
<AxisDirective lineStyle: { width: 3 }>
</AxisDirective>
</ChartComponent>
Column index of an axis Property: columnIndex

var axes= { columnIndex: 2 };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: columnIndex

<ChartComponent id='charts'>
<AxisDirective columnIndex: 2>
</AxisDirective>
</ChartComponent>
span of an axis to place horizontally or vertically Property: columnSpan

var axes= { columnSpan: 2 };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: span

<ChartComponent id='charts'>
<AxisDirective span: 2>
</AxisDirective>
</ChartComponent>
Crosshair label of an axis Property: crossHairLabel.visible

var axes= { crossHairLabel: { visible: true } };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: crossHairTooltip.enable

<ChartComponent id='charts'>
<AxisDirective crossHairTooltip: { enable: true }>
</AxisDirective>
</ChartComponent>
Crosshair label color of an axis Not applicable Property: crossHairTooltip.fill

<ChartComponent id='charts'>
<AxisDirective crossHairTooltip: { fill: 'red' } >
</AxisDirective>
</ChartComponent>
Crosshair label text style Not applicable Property: crossHairTooltip.textStyle

<ChartComponent id='charts'>
<AxisDirective crossHairTooltip: { textStyle: { } }>
</AxisDirective>
</ChartComponent>
Desired interval count for primaryYAxis Property: desiredIntervals

var axes= { desiredIntervals: 4};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: desiredIntervals

<ChartComponent id='charts'>
<AxisDirective desiredIntervals: 4>
</AxisDirective>
</ChartComponent>
Edges axes Property: edgeLabelPlacement

var axes= { edgeLabelPlacement: ‘none’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: edgeLabelPlacement

<ChartComponent id='charts'>
<AxisDirective edgeLabelPlacement: 'Shift'>
</AxisDirective>
</ChartComponent>
Enables trim for axis labels Property: enableTrim

var axes= { enableTrim: true};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: enableTrim

<ChartComponent id='charts'>
<AxisDirective enableTrim: true>
</AxisDirective>
</ChartComponent>
Specifies the interval of the axis according to the zoomed data of the chart Property: enableAutoIntervalOnZooming

var axes= { enableAutoIntervalOnZooming: true};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: enableAutoIntervalOnZooming

<ChartComponent id='charts'>
<AxisDirective enableAutoIntervalOnZooming: true>
</AxisDirective>
</ChartComponent>
Font style for axes Property: font

var axes= { font: { fontFamily: ‘Calibri’} };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: titleStyle

<ChartComponent id='charts'>
<AxisDirective titleStyle: { }>
</AxisDirective>
</ChartComponent>
Indexed for category axis Property: isIndexed

var axes= { font: { isIndexed: true} };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: isIndexed

<ChartComponent id='charts'>
<AxisDirective isIndexed: true>
</AxisDirective>
</ChartComponent>
Interval type for date time axis Property: intervalType

var axes= { intervalType: ‘Auto’ };
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: intervalType

<ChartComponent id='charts'>
<AxisDirective intervalType: 'Auto'>
</AxisDirective>
</ChartComponent>
Inversed axis Property: isInversed

var axes= {isInversed: true};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: isInversed

<ChartComponent id='charts'>
<AxisDirective isInversed: true>
</AxisDirective>
</ChartComponent>
Custom label format Property: labelFormat

var axes= {labelFormat: ‘{value}K’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: labelFormat

<ChartComponent id='charts'>
<AxisDirective labelFormat: '{value}K'>
</AxisDirective>
</ChartComponent>
labelIntersectAction Property: labelIntersectAction

var axes= {labelIntersectAction: ‘trim’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: labelIntersectAction

<ChartComponent id='charts'>
<AxisDirective labelIntersectAction: 'Trim'>
</AxisDirective>
</ChartComponent>
labelPosition Property: labelPosition

var axes= {labelPosition: ‘inside’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: labelPosition

<ChartComponent id='charts'>
<AxisDirective labelPosition: 'Inside'>
</AxisDirective>
</ChartComponent>
labelPlacement for category axis Property: labelPlacement

var axes= {labelPlacement: ‘onTicks’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: labelPlacement

<ChartComponent id='charts'>
<AxisDirective labelPlacement: 'OnTicks'>
</AxisDirective>
</ChartComponent>
Axis label alignment Property: alignment

var axes= {alignment: ‘center’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Rotation of axis labels Property: labelRotation

var axes= {labelRotation: 45};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: labelRotation

<ChartComponent id='charts'>
<AxisDirective labelRotation: 45>
</AxisDirective>
</ChartComponent>
Log base value for logarithmic axis Property: logBase

var axes= {logBase: 10};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: logBase

<ChartComponent id='charts'>
<AxisDirective logBase: 10>
</AxisDirective>
</ChartComponent>
Major grid line Property: majorGridLines.visible

var axes= {majorGridLines: { visible: true}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Width of MajorGridLines Property: majorGridLines.width

var axes= {majorGridLines: { width: 2}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: majorGridLines.width

<ChartComponent id='charts'>
<AxisDirective majorGridLines: { width: 2}>
</AxisDirective>
</ChartComponent>
Color of MajorGridLines Property: majorGridLines.color

var axes= {majorGridLines: { color: ‘black’ }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: majorGridLines.color

<ChartComponent id='charts'>
<AxisDirective majorGridLines: { color: 'black' }>
</AxisDirective>
</ChartComponent>
DashArray of MajorGridLines Property: majorGridLines.dashArray

var axes= {majorGridLines: { dashArray: ‘10,5’ }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: majorGridLines.dashArray

<ChartComponent id='charts'>
<AxisDirective majorGridLines: { dashArray: '10,5' }>
</AxisDirective>
</ChartComponent>
Opacity of major grid line Property: majorGridLines.opacity

var axes= {majorGridLines: { opacity: true }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Major Tick line Property: majorTickLines.visible

var axes= {majorTickLines: { visible: true }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Width of MajorTickLines Property: majorTickLines.width

var axes= {majorTickLines: { width: 2 }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: majorTickLines.width

<ChartComponent id='charts'>
<AxisDirective majorTickLines: { width: 2 }>
</AxisDirective>
</ChartComponent>
Height of MajorTickLines Property: majorTickLines.size

var axes= {majorTickLines: { size: 2 }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: majorTickLines.height

<ChartComponent id='charts'>
<AxisDirective majorTickLines: { height: 2}>
</AxisDirective>
</ChartComponent>
Color of MajorTickLines Property: majorTickLines.color

var axes= {majorTickLines: { color: ‘black’ }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: majorTickLines.color

<ChartComponent id='charts'>
<AxisDirective majorTickLines: { color: 'black' }>
</AxisDirective>
</ChartComponent>
Opacity of major Tick line Property: majorTickLines.opacity

var axes= {majorTickLines: { opacity: true};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
maximum labels of axes Property: maximumLabels

var axes= { maximumLabels: 5};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: maximumLabels

<ChartComponent id='charts'>
<AxisDirective maximumLabels: 4>
</AxisDirective>
</ChartComponent>
maximum labels width of axes to trim Property: maximumLabelWidth

var axes= { maximumLabelWidth: 40};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: maximumLabelWidth

<ChartComponent id='charts'>
<AxisDirective maximumLabelWidth: 40>
</AxisDirective>
</ChartComponent>
minor grid line Property: minorGridLines.visible

var axes= { minorGridLines: { visible: true}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Width of minorGridLines Property: minorGridLines.width

var axes= { minorGridLines: { width: 2}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorGridLines.width

<ChartComponent id='charts'>
<AxisDirective minorGridLines: { width: 2}>
</AxisDirective>
</ChartComponent>
Color of minorGridLines Property: minorGridLines.color

var axes= { minorGridLines: { color: ‘black’}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorGridLines.color

<ChartComponent id='charts'>
<AxisDirective minorGridLines: { color: 'black'}>
</AxisDirective>
</ChartComponent>
DashArray of minorGridLines Property: minorGridLines.dashArray

var axes= { minorGridLines: { dashArray: ‘10,5’}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorGridLines.dashArray

<ChartComponent id='charts'>
<AxisDirective minorGridLines: { dashArray: '10,5' }>
</AxisDirective>
</ChartComponent>
Opacity of minor grid line Property: minorGridLines.opacity

var axes= { minorGridLines: { opacity: true}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
minor Tick line Property: minorTickLines.visible

var axes= { minorTickLines: { visible: true}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Width of minorTickLines Property: minorTickLines.width

var axes= { minorTickLines: { width: 2 }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorTickLines.width

<ChartComponent id='charts'>
<AxisDirective minorTickLines: { width: 2}>
</AxisDirective>
</ChartComponent>
Height of minorTickLines Property: minorTickLines.size

var axes= { minorTickLines: { size: 2}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorTickLines.height

<ChartComponent id='charts'>
<AxisDirective minorTickLines: { height: 2}>
</AxisDirective>
</ChartComponent>
Color of minorTickLines Property: minorTickLines.color

var axes= { minorTickLines: { color: ‘black’ }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorTickLines.color

<ChartComponent id='charts'>
<AxisDirective minorTickLines: { color: 'black' }>
</AxisDirective>
</ChartComponent>
Opacity of minor Tick line Property: minorTickLines.opacity

var axes= { minorTickLines: { opacity: true }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Minor ticks per interval of axes Property: minorTicksPerInterval

var axes= { minorTicksPerInterval: 4};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minorTicksPerInterval

<ChartComponent id='charts'>
<AxisDirective minorTicksPerInterval: 4>
</AxisDirective>
</ChartComponent>
name of the axes Property: name

var axes= { name: ‘axes’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: name

<ChartComponent id='charts'>
<AxisDirective name: 'primaryYAxis'>
</AxisDirective>
</ChartComponent>
Orientation of axes Property: orientation

var axes= { orientation: ‘Vertical’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
Plot offset for axes Property: plotOffset

var axes= { plotOffset: 0};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: plotOffset

<ChartComponent id='charts'>
<AxisDirective plotOffset: 0>
</AxisDirective>
</ChartComponent>
minimum for axes Property: range.minimum

var axes= { range: { minimum: 10 }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: minimum

<ChartComponent id='charts'>
<AxisDirective minimum: 23>
</AxisDirective>
</ChartComponent>
maximum for axes Property: range.maximum

var axes= { range: { maximum: 10 }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: maximum

<ChartComponent id='charts'>
<AxisDirective maximum: 23>
</AxisDirective>
</ChartComponent>
interval for axes Property: range.interval

var axes= { range: { interval: 1 }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: interval

<ChartComponent id='charts'>
<AxisDirective interval: 2>
</AxisDirective>
</ChartComponent>
RangePadding for axes Property: rangePadding

var axes= { rangePadding: ‘None’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: rangePadding

<ChartComponent id='charts'>
<AxisDirective rangePadding: 'None'>
</AxisDirective>
</ChartComponent>
Rounding Places in axes Property: roundingPlaces

var axes= { roundingPlaces: 3};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: labelFormat

<ChartComponent id='charts'>
<AxisDirective labelFormat: 'n3'>
</AxisDirective>
</ChartComponent>
ScrollBar settings of axes Property: scrollbarSettings

var axes= { scrollbarSettings : { }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Not Applicable
TickPosition in axes Property: tickLinesPosition

var axes= { tickLinesPosition: ‘Inside’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: tickPosition

<ChartComponent id='charts'>
<AxisDirective tickPosition: 'Inside'>
</AxisDirective>
</ChartComponent>
valueType of axes Property: valueType

var axes= { valueType: ‘DateTime’};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: valueType

<ChartComponent id='charts'>
<AxisDirective valueType: 'DateTime'>
</AxisDirective>
</ChartComponent>
visible of axes Property: visible

var axes= { visible: true};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: visible

<ChartComponent id='charts'>
<AxisDirective visible: true>
</AxisDirective>
</ChartComponent>
zoomFactor of axes Property: zoomFactor

var axes= { zoomFactor: 0.3};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: zoomFactor

<ChartComponent id='charts'>
<AxisDirective zoomFactor: 0.3 >
</AxisDirective>
</ChartComponent>
zoomPosition of axes Property: zoomPosition

var axes= { zoomPosition: 0.3};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: zoomPosition

<ChartComponent id='charts'>
<AxisDirective zoomPosition: 0.3 >
</AxisDirective>
</ChartComponent>
labelBorder of axes Property: labelBorder

var axes= { labelBorder: { color: ‘red’, width: 2}};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: border

<ChartComponent id='charts'>
<AxisDirective border: { color: 'red', width: 3 } >
</AxisDirective>
</ChartComponent>
title of axes Property: title.text

var axes= { title: { text: ‘Chart title’ }};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: title

<ChartComponent id='charts'>
<AxisDirective title: 'Chart title'>
</AxisDirective>
</ChartComponent>
StripLine of axes Property: stripLine

var axes= { stripLine: []};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: stripLines

<ChartComponent id='charts'>
<AxisDirective stripLines: []>
</AxisDirective>
</ChartComponent>
Multilevel labels of axes Property: multiLevelLabels

var axes= { multiLevelLabels: []};
<EJ.Chart
axes={axes}>
</EJ.Chart>		 Property: multiLevelLabels

<ChartComponent id='charts'>
<AxisDirective multiLevelLabels: []>
</AxisDirective>
</ChartComponent>
skeleton for an axes Not Applicable Property: axes.skeleton

<ChartComponent id='charts'>
<AxisDirective skeleton: 'yMd' >
</AxisDirective>
</ChartComponent>
skeleton type for an axes Not Applicable Property: axes.skeletonType

<ChartComponent id='charts'>
<AxisDirective skeletonType: 'DateTime' >
</AxisDirective>
</ChartComponent>

Rows

Behavior API in Essential JS 1 API in Essential JS 2
rows in chart Property: rowDefinitions

var rowDefinitions=[{ }];
<EJ.Chart
rowDefinitions={rowDefinitions}>
</EJ.Chart>		 Property: rowDirective

<ChartComponent id='charts'>
<rowDirective>
</rowDirective>
</ChartComponent>
Unit Property: unit

var rowDefinitions=[{ unit : ‘percentage’ }];
<EJ.Chart
rowDefinitions={rowDefinitions}>
</EJ.Chart>		 Not Applicable
height of rows in chart Property: rowHeight

var rowDefinitions=[{rowHeight : 50}]
<EJ.Chart
rowDefinitions={rowDefinitions}>
</EJ.Chart>		 Property: height

<ChartComponent id='charts'>
<RowDirective height='50%' >
</RowDirective>
</ChartComponent>
Line customization Property: lineColor, lineWidth

var rowDefinitions=[{lineColor : ‘Gray’, linewidth : 0}]
<EJ.Chart
rowDefinitions={rowDefinitions}>
</EJ.Chart>		 Property: border

<ChartComponent id='charts'>
<RowDirective border={width: 2, color:'brown'>
</RowDirective>
</ChartComponent>

Series

Behavior API in Essential JS 1 API in Essential JS 2
bearFillColor Property: bearFillColor

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

<ChartComponent id='charts'>
<SeriesDirective bearFillColor='red'>
</SeriesDirective>
</ChartComponent>
Border Property: border

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

<ChartComponent id='charts'>
<SeriesDirective border={ color: 'red', width: 2}>
</SeriesDirective>
</ChartComponent>
BoxPlotMode Property: boxPlotMode

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

<ChartComponent id='charts'>
<SeriesDirective boxPlotMode='Inclusive'>
</SeriesDirective>
</ChartComponent>
Minimum radius of Bubble series Property: bubbleOptions.minRadius

var series =[{ bubbleOptions: { minRadius: 2}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: minRadius

<ChartComponent id='charts'>
<SeriesDirective minRadius='2'>
</SeriesDirective>
</ChartComponent>
Maximum radius of Bubble series Property: bubbleOptions.maxRadius

var series =[{ bubbleOptions: { maxRadius: 2}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: maxRadius

<ChartComponent id='charts'>
<SeriesDirective minRadius='2'>
</SeriesDirective>
</ChartComponent>
bullFillColor Property: bullFillColor

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

<ChartComponent id='charts'>
<SeriesDirective bullFillColor='red'>
</SeriesDirective>
</ChartComponent>
Cardinal spline tension for spline series Property: cardinalSplineTension

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

<ChartComponent id='charts'>
<SeriesDirective cardinalSplineTension='0.5'>
</SeriesDirective>
</ChartComponent>
Column Width for rectangle series Property: columnWidth

var series =[{ columnWidth : 0.5}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: cardinalSplineTension

<ChartComponent id='charts'>
<SeriesDirective columnWidth='0.5'>
</SeriesDirective>
</ChartComponent>
Column spacing for rectangle series Property: columnSpacing

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

<ChartComponent id='charts'>
<SeriesDirective columnSpacing='0.5'>
</SeriesDirective>
</ChartComponent>
Topleft radius for rectangle series Property: cornerRadius.topLeft

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

<ChartComponent id='charts'>
<SeriesDirective topLeft='0.5'>
</SeriesDirective>
</ChartComponent>
topRight radius for rectangle series Property: cornerRadius.topRight

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

<ChartComponent id='charts'>
<SeriesDirective topRight: 0>
</SeriesDirective>
</ChartComponent>
bottomRight radius for rectangle series Property: cornerRadius.bottomRight

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

<ChartComponent id='charts'>
<SeriesDirective bottomRight: 0>
</SeriesDirective>
</ChartComponent>
bottomLeft radius for rectangle series Property: cornerRadius.bottomLeft

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

<ChartComponent id='charts'>
<SeriesDirective bottomLeft: 0>
</SeriesDirective>
</ChartComponent>
DashArray property Property: dashArray

var series =[{ dashArray: ‘10, 5’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: dashArray

<ChartComponent id='charts'>
<SeriesDirective dashArray='10, 5'>
</SeriesDirective>
</ChartComponent>
DataSource for series Property: dataSource

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

<ChartComponent id='charts'>
<SeriesDirective dataSource: []>
</SeriesDirective>
</ChartComponent>
Draw type for Polar series Property: drawType

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

<ChartComponent id='charts'>
<SeriesDirective drawType='Line'>
</SeriesDirective>
</ChartComponent>
EmptyPointSettings for series Property: emptyPointSettings.visible

var series =[{emptyPointSettings: { visible: false }}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Empty Point Display mode Property: emptyPointSettings.displayMode

var series =[{emptyPointSettings: { displayMode: ‘gap’} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: emptyPointSettings.displayMode

<ChartComponent id='charts'>
<SeriesDirective emptyPointSettings={displayMode: 'gap'}>
</SeriesDirective>
</ChartComponent>
Empty Point color Property: emptyPointSettings.color

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

<ChartComponent id='charts'>
<SeriesDirective emptyPointSettings={color: 'red'}>
</SeriesDirective>
</ChartComponent>
Empty Point Border Property: emptyPointSettings.border

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

<ChartComponent id='charts'>
<SeriesDirective emptyPointSettings={border: {}}>
</SeriesDirective>
</ChartComponent>
Enable animation for series Property: enableAnimation

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

<ChartComponent id='charts'>
<SeriesDirective animation={ enable={false}}>
</SeriesDirective>
</ChartComponent>
Animation duration for series Property: animationDuration

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

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

<ChartComponent id='charts'>
<SeriesDirective animation={ delay={100} }>
</SeriesDirective>
</ChartComponent>
Drag settings for series Property: dragSettings

var series =[{dragSettings : { mode: ‘X’ }}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Errorbar settings for series Property: errorBarSettings

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

<ChartComponent id='charts'>
<SeriesDirective errorBarSettings={ }>
</SeriesDirective>
</ChartComponent>
Closed series Property: isClosed

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

<ChartComponent id='charts'>
<SeriesDirective isClosed={true}>
</SeriesDirective>
</ChartComponent>
Stacking Property for series Property: isStacking

var series =[{isStacking : true}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Line cap for series Property: lineCap

var series =[{lineCap : ‘butt’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Line join for series Property: lineJoin

var series =[{lineJoin : ‘round’}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Opacity for series Property: opacity

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

<ChartComponent id='charts'>
<SeriesDirective opacity={0.7}>
</SeriesDirective>
</ChartComponent>
Outlier settings of series Property: outLierSettings

var series =[{outLierSettings: { }}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Palette Property: palette

var series =[{palette: “ColorFieldName”}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: pointColorMapping

<ChartComponent id='charts'>
<SeriesDirective pointColorMapping='color'>
</SeriesDirective>
</ChartComponent>
Positive fill for waterfall series Property: positiveFill

var series =[{ positiveFill: “red”}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: positiveFill

<ChartComponent id='charts'>
<SeriesDirective positiveFill: "red">
</SeriesDirective>
</ChartComponent>
Show average value in box and whisker series Property: showMedian

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

<ChartComponent id='charts'>
<SeriesDirective showMean={false}>
</SeriesDirective>
</ChartComponent>
To group the series of stacking collection Property: stackingGroup

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

<ChartComponent id='charts'>
<SeriesDirective stackingGroup='group'>
</SeriesDirective>
</ChartComponent>
Specifies the type of the series to render in chart. Property: type

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

<ChartComponent id='charts'>
<SeriesDirective type: 'Line'>
</SeriesDirective>
</ChartComponent>
Defines the visibility of the series Property: visibility

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

<ChartComponent id='charts'>
<SeriesDirective visible={true}>
</SeriesDirective>
</ChartComponent>
Specifies the different types of spline curve Property: splineType

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

<ChartComponent id='charts'>
<SeriesDirective splineType='Natural'>
</SeriesDirective>
</ChartComponent>
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: xAxisName

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

<ChartComponent id='charts'>
<SeriesDirective xAxisName='secondaryXAxis'>
</SeriesDirective>
</ChartComponent>
Name of the property in the datasource that contains x value for the series. Property: xName

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

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

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

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

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

<ChartComponent id='charts'>
<SeriesDirective yName='y'>
</SeriesDirective>
</ChartComponent>
Name of the property in the datasource that contains high value for the series. Property: high

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

<ChartComponent id='charts'>
<SeriesDirective high='y'>
</SeriesDirective>
</ChartComponent>
Name of the property in the datasource that contains low value for the series. Property: low

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

<ChartComponent id='charts'>
<SeriesDirective low='y'>
</SeriesDirective>
</ChartComponent>
Name of the property in the datasource that contains close value for the series. Property: close

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

<ChartComponent id='charts'>
<SeriesDirective close='y'>
</SeriesDirective>
</ChartComponent>
Name of the property in the datasource that contains open value for the series Property: open

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

<ChartComponent id='charts'>
<SeriesDirective open='y'>
</SeriesDirective>
</ChartComponent>
Option to add trendlines to chart Property: trendLines

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

<ChartComponent id='charts'>
<SeriesDirective trendLines=[{}]>
</SeriesDirective>
</ChartComponent>
Options for customizing the appearance of the series or data point while highlighting Property: highlightSettings

var series =[{ highlightSettings : {}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not applicable.
Options for customizing the appearance of the series/data point on selection Property: selectionSettings

var series =[{ selectionSettings : {}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not applicable.

marker

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

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

<ChartComponent id='charts'>
<SeriesDirective marker={ visible: false }>
</SeriesDirective>
</ChartComponent>
visibility of marker Property: marker.visible

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

<ChartComponent id='charts'>
<SeriesDirective marker={ visible: false }>
</SeriesDirective>
</ChartComponent>
Fill for marker Property: marker.fill

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

<ChartComponent id='charts'>
<SeriesDirective marker={ fill : 'red' }>
</SeriesDirective>
</ChartComponent>
Opacity for marker Property: marker.opacity

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

<ChartComponent id='charts'>
<SeriesDirective marker={ opacity : 0.5 }>
</SeriesDirective>
</ChartComponent>
Shape of marker Property: marker.shape

var series =[{marker: { shape : ‘Circle’}}]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: marker.shape

<ChartComponent id='charts'>
<SeriesDirective marker={ shape : 'Triangle' }>
</SeriesDirective>
</ChartComponent>
ImageUrl of marker Property: imageUrl

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

<ChartComponent id='charts'>
<SeriesDirective marker={ imageUrl : '' }>
</SeriesDirective>
</ChartComponent>
Border of marker Property: border

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

<ChartComponent id='charts'>
<SeriesDirective marker={ border : { width: 2, color: 'red'}}>
</SeriesDirective>
</ChartComponent>
Height of marker Property: size.height

var series =[{marker:{ size: { height: 30}} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: height

<ChartComponent id='charts'>
<SeriesDirective marker={ height: 25}>
</SeriesDirective>
</ChartComponent>
Width of marker Property: size.width

var series =[{marker:{ size: { width: 30}} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: width

<ChartComponent id='charts'>
<SeriesDirective marker={ width: 30}>
</SeriesDirective>
</ChartComponent>
DataLabelSettings of marker Property: marker.dataLabel

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { }}>
</SeriesDirective>
</ChartComponent>
Visibility of dataLabel Property: dataLabel.visible

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { visible: true }}>
</SeriesDirective>
</ChartComponent>
Text mapping name of dataLabel Property: dataLabel.textMappingName

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { name: '' }}>
</SeriesDirective>
</ChartComponent>
Fill color of data label Property: dataLabel.fill

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { fill: 'pink' }}>
</SeriesDirective>
</ChartComponent>
Opacity of data label Property: dataLabel.opacity

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { opacity: 0.6 }}>
</SeriesDirective>
</ChartComponent>
Text position of data label Property: dataLabel.textPosition

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { position: 'Top' }}>
</SeriesDirective>
</ChartComponent>
Alignment of data label Property: dataLabel.verticalAlignment

var series =[{marker:{ dataLabel: {verticalAlignment: ‘near’ }} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: dataLabel.alignment

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { alignment: 'Near' }}>
</SeriesDirective>
</ChartComponent>
Border of data label Property: dataLabel.border

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { border: {} }}>
</SeriesDirective>
</ChartComponent>
Offset for data label Property: dataLabel.offset

var series =[{marker:{ dataLabel: {offset: { x: 5, y: 6 }} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Margin of data label Property: dataLabel.margin

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { margin: {} }}>
</SeriesDirective>
</ChartComponent>
Font of data label Property: dataLabel.font

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { font: {} }}>
</SeriesDirective>
</ChartComponent>
HTML template in dataLabel Property: dataLabel.template

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { template: '<div>Chart</div>' }}>
</SeriesDirective>
</ChartComponent>
Rounded corner radius X Not Applicable Property: dataLabel.rx

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

<ChartComponent id='charts'>
<SeriesDirective marker={ dataLabel: { ry: 10 }}>
</SeriesDirective>
</ChartComponent>
Maximum Label width for data label Property: dataLabel.maximumLabelWidth

var series =[{marker:{ dataLabel: {maximumLabelWidth: 20} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
Enable wrapping of text for data label Property: dataLabel.enableWrap

var series =[{marker:{ dataLabel: {enableWrap: true} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
To show contrast color for data label Property: dataLabel.showContrastColor

var series =[{marker:{ dataLabel: {showContrastColor: true} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable
To show edge label for data label Property: dataLabel.showEdgeLabels

var series =[{marker:{ dataLabel: {showEdgeLabels: true} }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable

TrendLines

Behavior API in Essential JS 1 API in Essential JS 2
Trendlines settings Property: series.trendLines

var series =[{trendlines: [{ visibility: “visible”, type: “linear” }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: series.trendLines

<ChartComponent id='charts'>
<TrendlineDirective>
</TrendlineDirective>
</ChartComponent>
Visibility of trendline Property: trendLines.visibility

var series =[{trendlines: [{ visibility: “visible”}] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not applicable
Type of trendLine Property: trendLines.type

var series =[{trendlines: [{type: “linear” }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.type

<ChartComponent id='charts'>
<TrendlineDirective type='Linear'>
</TrendlineDirective>
</ChartComponent>
Name of trendLine Property: trendLines.name

var series =[{trendlines: [{ name: ‘trendLine’ }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.name

<ChartComponent id='charts'>
<TrendlineDirective name='trendLine'>
</TrendlineDirective>
</ChartComponent>
Period of trendLine Property: trendLines.period

var series =[{trendlines: [{ period: 45}] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.period

<ChartComponent id='charts'>
<TrendlineDirective name='trendLine'>
</TrendlineDirective>
</ChartComponent>
Polynomial order for Polynomial type trendLines Property: trendLines.polynomialOrder

var series =[{trendlines: [{ polynomialOrder: 3}] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.polynomialOrder

<ChartComponent id='charts'>
<TrendlineDirective polynomialOrder={3}>
</TrendlineDirective>
</ChartComponent>
Backward forecost for trendLines Property: trendLines.backwardforecast

var series =[{trendlines: [{ backwardforecast: 3 }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.backwardforecast

<ChartComponent id='charts'>
<TrendlineDirective backwardforecast={3}>
</TrendlineDirective>
</ChartComponent>
Forward forecost for trendLines Property: trendLines.forwardforecast

var series =[{trendlines: [{ forwardforecast: 3 }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.forwardforecast

<ChartComponent id='charts'>
<TrendlineDirective forwardforecast={3}>
</TrendlineDirective>
</ChartComponent>
Fill for trendLines Property: trendLines.fill

var series =[{trendlines: [{ fill: ‘#EEFFCC’}] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.fill

<ChartComponent id='charts'>
<TrendlineDirective fill='EEFFCC'>
</TrendlineDirective>
</ChartComponent>
Width for trendLines Property: trendLines.width

var series =[{trendlines: [{ width: 2 }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.width

<ChartComponent id='charts'>
<TrendlineDirective width={2}>
</TrendlineDirective>
</ChartComponent>
Intercept value for trendLines Property: trendLines.intercept

var series =[{trendlines: [{ intercept: 2 }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.intercept

<ChartComponent id='charts'>
<TrendlineDirective intercept={2}>
</TrendlineDirective>
</ChartComponent>
Legend shape for trendLines Not Applicable Property: trendLines.legendShape

<ChartComponent id='charts'>
<TrendlineDirective legendShape='Rectangle'>
</TrendlineDirective>
</ChartComponent>
Animation settings for trendLines Not Applicable Property: trendLines.animation

<ChartComponent id='charts'>
<TrendlineDirective animation={ enable: true }>
</TrendlineDirective>
</ChartComponent>
Marker settings for trendLines Not Applicable Property: trendLines.marker

<ChartComponent id='charts'>
<TrendlineDirective marker={ visible: true}>
</TrendlineDirective>
</ChartComponent>
Tooltip for trendLines Property: trendLines.tooltip

var series =[{trendlines: [{ tooltip: { } }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Property: trendLines.enableTooltip

<ChartComponent id='charts'>
<TrendlineDirective enableTooltip={true}>
</TrendlineDirective>
</ChartComponent>
DashArray for trendLines Property: trendLines.dashArray

var series =[{trendlines: [{ dashArray: ‘10, 5’ }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable.
Visible on legend for trendLines Property: trendLines.visibleOnLegend

var series =[{trendlines: [{ visibleOnLegend: true }] }]
<EJ.Chart
series={series}>
</EJ.Chart>		 Not Applicable.

StripLines

Behavior API in Essential JS 1 API in Essential JS 2
Default behaviour for striplines Property: primaryXAxis.stripLines

var primaryYAxis = { stripLine: [{ visible: true, start: 30, end: 40,}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: primaryXAxis.stripLines

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ visible: true }] }>
</ChartComponent>
border for stripline Property: stripLines.borderColor

var primaryYAxis = { stripLine: [{ borderColor: ‘pink’}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.border

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{border: { color: 'red'} }] }>
</ChartComponent>
Background color for stripline Property: stripLines.color

var primaryYAxis = { stripLine: [{ color: ‘pink’}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.color

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ color: 'red' }] }>
</ChartComponent>
Start value for stripline Property: stripLines.start

var primaryYAxis = { stripLine: [{ start: 10}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.start

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ start: 5 }] }>
</ChartComponent>
End value for stripline Property: stripLines.end

var primaryYAxis = { stripLine: [{ end: 10}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.end

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ end: 5 }] }>
</ChartComponent>
StartfromAxis for stripline Property: stripLines.startFromAxis

var primaryYAxis = { stripLine: [{ startFromAxis: true}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.startFromAxis

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ startFromAxis: true}] }>
</ChartComponent>
Text in stripline Property: stripLines.text

var primaryYAxis = { stripLine: [{ text: ‘StripLine’}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.text

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ text: 'stripline'}] }>
</ChartComponent>
Text alignment in stripline Property: stripLines.textAlignment

var primaryYAxis = { stripLine: [{ textAlignment: ‘Far’}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.horizontalAlignment

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ horizontalAlignment: 'Far'}] }>
</ChartComponent>
Text alignment in stripline Not Applicable Property: stripLines.verticalAlignment

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ verticalAlignment: 'Far'}] }>
</ChartComponent>
Size of stripline Property: stripLines.width

var primaryYAxis = { stripLine: [{ width: 10}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.size

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ size: 10}] }>
</ChartComponent>
ZIndex of stripline Property: stripLines.zIndex

var primaryYAxis = { stripLine: [{ zIndex: ‘Behind’}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.zIndex

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ zIndex: 'Behind' }] }>
</ChartComponent>
Font style of stripline Property: stripLines.fontStyle

var primaryYAxis = { stripLine: [{ fontStyle: {}}]};
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: stripLines.textStyle

<ChartComponent id='charts' primaryXAxis ={ stripLines:[{ textStyle: {}}] }>
</ChartComponent>

Multilevel Labels

Behavior API in Essential JS 1 API in Essential JS 2
Default behaviour for multilevelLabels Property: stripLines.fontStyle

var primaryYAxis = { multiLevelLabels: [{ }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: primaryXAxis.multilevelLabels

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ }] }>
</ChartComponent>
Text alignment for multilevelLabels Property: multiLevelLabels.textAlignment

var primaryYAxis = { multiLevelLabels: [{ textAlignment: ‘Near’ }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: primaryXAxis.multilevelLabels

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ }] }}>
</ChartComponent>
multilevelLabels.alignment Property: multiLevelLabels.textAlignment

var primaryYAxis = { multiLevelLabels: [{ textAlignment: ‘Near’ }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multilevelLabels.alignment

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ alignment: 'Near' }] }}>
</ChartComponent>
Text overflow for multilevelLabels Property: multiLevelLabels.textOverFlow

var primaryYAxis = { multiLevelLabels: [{ textOverFlow : ‘Trim’ }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels.overFlow

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ overFlow: 'Trim' }] }}>
</ChartComponent>
Border for multilevelLabels Property: multiLevelLabels.border

var primaryYAxis = { multiLevelLabels: [{ border: { } }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels.border

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ border: { }}] }}>
</ChartComponent>
Start value for label Property: multiLevelLabels.start

var primaryYAxis = { multiLevelLabels: [{ start: 45 }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels.categories.start

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ start: 45}] }] }>
</ChartComponent>
End value for label Property: multiLevelLabels.end

var primaryYAxis = { multiLevelLabels: [{ end: 45 }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels.categories.end

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ end: 45}] }] }>
</ChartComponent>
Text for label Property: multiLevelLabels.text

var primaryYAxis = { multiLevelLabels: [{ text: ‘Start’ }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels.categories.text

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ text: 'text'}] }] }>
</ChartComponent>
maximum text width for label Property: multiLevelLabels.maximumTextWidth

var primaryYAxis = { multiLevelLabels: [{ maximumTextWidth: 10 }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Property: multiLevelLabels.categories.maximumTextWidth

<ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ maximumTextWidth: 20 }] }] }>
</ChartComponent>
level of label Property: multiLevelLabels.level

var primaryYAxis = { multiLevelLabels: [{ level: 10 }] };
<EJ.Chart
primaryXAxis ={primaryXAxis}>
</EJ.Chart>		 Not applicable

Methods

Behavior API in Essential JS 1 API in Essential JS 2
animation for series Property: animate()

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

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

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

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

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

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

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

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

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

Events

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<ChartComponent
id='charts' tooltipRender={this.tooltipRender.bind(this)}>
</ChartComponent>
public tooltipRender(): void {};
Fires before rendering crosshair tooltip in axis Property: trackAxisToolTip

<EJ.Chart
id= 'chartcontainer' trackAxisToolTip= {trackAxisToolTip}>
</EJ.Chart>
function trackAxisToolTip(){ };		 Not applicable
Fires before rendering trackball tooltip. Property: trackToolTip

<EJ.Chart
id= 'chartcontainer' trackToolTip= {trackToolTip}>
</EJ.Chart>
function trackToolTip(){ };		 Not applicable
Event triggered when scroll starts Property: scrollStart

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

<ChartComponent
id='charts' scrollStart ={this.scrollStart.bind(this)}>
</ChartComponent>
public scrollStart(): void {};
Event triggered when scroll ends. Property: scrollEnd

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

<ChartComponent
id='charts' scrollEnd ={this.scrollEnd.bind(this)}>
</ChartComponent>
public scrollEnd(): void {};
Event triggered when scroll Change. Property: scrollChange

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

<ChartComponent
id='charts' scrollChange ={this.scrollChange.bind(this)}>
</ChartComponent>
public scrollChange(): void {};
Fires while performing rectangle zooming in chart Property: zoomComplete

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

<ChartComponent
id='charts' zoomComplete ={this.zoomComplete.bind(this)}>
</ChartComponent>
public zoomComplete(): void {};

Chart properties

Behavior API in Essential JS 1 API in Essential JS 2
selected data index Property: selectedDataPointIndexes

var selectedDataPointIndexes = [ { seriesIndex: 0, pointIndex: 1}];
<EJ.Chart
id= 'chartcontainer' selectedDataPointIndexes= {selectedDataPointIndexes}>
</EJ.Chart>		 Property: selectedDataIndexes

public selectedDataIndexes: [ { series: 0, point: 1}];
<ChartComponent
id='charts' selectedDataIndexes={this.selectedDataIndexes}>
</ChartComponent>
sideBySideSeriesPlacement for column based series Property: sideBySideSeriesPlacement

var sideBySideSeriesPlacement = [ { seriesIndex: 0, pointIndex: 1}];
<EJ.Chart
id= 'chartcontainer' sideBySideSeriesPlacement= {sideBySideSeriesPlacement}>
</EJ.Chart>		 Property: sideBySidePlacement

public sideBySidePlacement: [{true}];
<ChartComponent
id='charts' sideBySidePlacement={this.sideBySidePlacement}>
</ChartComponent>
ZoomSettings Property: zooming

var zooming = {enable: true};
<EJ.Chart
id= 'chartcontainer' zooming= {zooming}>
</EJ.Chart>		 Property: zoomSettings

public zoomsettings: ZoomSettingsModel =
{enableMouseWheelZooming: true}
<ChartComponent
id='charts' zoomSettings={this.zoomsettings}>
</ChartComponent>
Background color of the chart Property: background

<EJ.Chart
id= 'chartcontainer' background='transparent'>
</EJ.Chart>		 Property: background

<ChartComponent
id='charts' background='#EEFFCC'>
</ChartComponent>
URL of the image to be used as chart background. Property: backGroundImageUrl

<EJ.Chart
id= 'chartcontainer' background='transparent'>
</EJ.Chart>		 Not Applicable
Customizing border of the chart Property: border

<EJ.Chart
id= 'chartcontainer' border= {}>
</EJ.Chart>		 Property: border

<ChartComponent
id='charts' border= {}>
</ChartComponent>
This provides options for customizing export settings Property: exportSettings

var exportSettings= { filename : “chart”, angle: ‘45’ }
<EJ.Chart
id= 'chartcontainer' exportSettings={exportSettings}>
</EJ.Chart>		 Property: export()

<ChartComponent
id='charts' border= {}>
</ChartComponent>
public onClick(): void {
let fileName: string = (document.getElementById(‘fileName’) as HTMLInputElement).value;
this.chartInstance.export((this.mode.value as ExportType), fileName);
ChartArea customization Property: chartArea

var chartArea= {}
<EJ.Chart
id= 'chartcontainer' chartArea={chartArea}>
</EJ.Chart>		 Property: chartArea

<ChartComponent
id='charts' chartArea={this.chartArea}>
</ChartComponent>
Previous
Next