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

Migration from Essential JS 1 in JavaScript Chart control

06 Jun 2023 / 97 minutes to read

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

Annotations

Behaviour API in Essential JS 1 API in Essential JS 2
rotation of annotation Property:annotations.angle

$("#chart").ejChart({ annotations: [{angle: 90}]; }); 		Property:annotations.rotation

let chart: Chart = new Chart({ annotations: [{ rotation: 90}]; }); chart.appendTo('#chart');
annotations Property:annotations.content

$("#chart").ejChart({ annotations: [{ content: '
Chart
'}]; }); 		Property:annotations.content

let chart: Chart = new Chart({ annotations: [{ content: '
Chart
'}] }); chart.appendTo('#chart');
coordinate unit for annotation Property:annotations.coordinateUnit

$("#container").ejChart({ annotations :[{ coordinateUnit :"pixels"}] }); 		Property:annotations.coordinateUnits

let chart: Chart = new Chart({ annotations: [{ coordinateUnits: 'Pixel'}] }); chart.appendTo('#chart');
horizontalAlignment for annotation Property:annotations.horizontalAlignment

$("#container").ejChart({ annotations :[{ horizontalAlignment :"middle"}] }); 		Property:annotations.horizontalAlignment

let chart: Chart = new Chart({ annotations: [{ horizontalAlignment: 'Center'}] }); chart.appendTo('#chart');
margin for annotation Property:annotations.margin

$("#container").ejChart({ annotations :[{ margin { right: 5, left: 5, top: 5, bottom: 5}}] }); 		Not applicable
Opacity for annotation Property:annotations.opacity

$("#container").ejChart({ annotations :[{ opacity: 0.4 }] }); 		Not applicable
Region for annotation with respect to chart or series Property:annotations.region

$("#container").ejChart({ annotations :[{ region :"chart"}] }); 		Property:annotations.region

let chart: Chart = new Chart({ annotations: [{ region: 'Chart'}] }); chart.appendTo('#chart');
verticalAlignment for annotation Property:annotations.verticalAlignment

$("#container").ejChart({ annotations :[{ verticalAlignment :"middle"}] }); 		Property:annotations.verticalAlignment

let chart: Chart = new Chart({ annotations: [{ verticalAlignment: 'Center'}] }); chart.appendTo('#chart');
Visibility of annotations Property:annotations.visible

$("#container").ejChart({ annotations :[{ visible: true }] }); 		Not applicable
X offset for annotation Property:annotations.x

$("#container").ejChart({ annotations :[{ x :"100"}] }); 		Property:annotations.x

let chart: Chart = new Chart({ annotations: [{ x: '100'}] }); chart.appendTo('#chart');
X axis name in which annotation to be rendered Property:annotations.xAxisName

$("#container").ejChart({ annotations :[{ xAxisName :"xAxis"}] }); 		Property:annotations.xAxisName

let chart: Chart = new Chart({ annotations: [{ xAxisName: 'xAxis'}] }); chart.appendTo('#chart');
Y offset for annotation Property:annotations.y

$("#container").ejChart({ annotations :[{ y :"100"}] }); 		Property:annotations.y

let chart: Chart = new Chart({ annotations: [{ y: '100'}] }); chart.appendTo('#chart');
Y axis name in which annotation to be rendered Property:annotations.yAxisName

$("#container").ejChart({ annotations :[{ xAxisName :"yAxis"}] }); 		Property:annotations.yAxisName

let chart: Chart = new Chart({ annotations: [{ xAxisName: 'yAxis'}] }); chart.appendTo('#chart');

Columns

Behaviour API in Essential JS 1 API in Essential JS 2
Columns in chart Property:columnDefinitions

$("#chart").ejChart({ columnDefinitions: []; }); 		Property:columns

let chart: Chart = new Chart({ columns: []; }); chart.appendTo('#chart');
unit Property:unit

$("#container").ejChart({ columnDefinitions :[{unit : "percentage"}] }); 		Not Applicable
width of columns in chart Property:columnWidth

$("#chart").ejChart({ columnDefinitions: [{ columnWidth: '50%'}]; }); 		Property:width

let chart: Chart = new Chart({ columns: [ { width: '300'}]; }); chart.appendTo('#chart');
Line customization Property:lineColor, lineWidth

$("#chart").ejChart({ columnDefinitions: [{ columnWidth: '50%', lineColor: 'brown', lineWidth: 2}]; }); 		Property:border

let chart: Chart = new Chart({ columns: [ { width: '300', border: { width: 2, color: 'brown'}}]; }); chart.appendTo('#chart');

CommonSeriesOptions

Behaviour API in Essential JS 1 API in Essential JS 2
commonSeriesOptios Property:commonSeriesOptions

$("#container").ejChart({ commonSeriesOptions: { } }); 		Not Applicable

Crosshair

3D chart

Behaviour API in Essential JS 1 API in Essential JS 2
crosshair Property:visible

$("#container").ejChart({ crosshair: { visible: true} }); 		Property:enable

let chart: Chart = new Chart({ crosshair: { enable: false } }); chart.appendTo('#chart');
trackballTooltipSettings Property:trackballTooltipSettings

$("#container").ejChart({ crosshair : { trackballTooltipSettings : { border : { width :2 } } } }); 		Not applicable
marker Property:marker

$("#container").ejChart({ crosshair : { marker : { border : { width :2 } } } }); 		Not applicable
crosshair line style Property:line

$("#container").ejChart({ crosshair : { line: { width: 2, color: 'red' } } }); 		let chart: Chart = new Chart({ crosshair: { border: { width: 2, color: 'black' }} });
type Property:type

$("#container").ejChart({ crosshair : { type: 'trackball' } }); 		Not applicable
Behaviour API in Essential JS 1 API in Essential JS 2
3d chart Property:enable3D

$("#container").ejChart({ enable3D: true }); 		Not applicable
Rotation of 3d chart Property:enableRotation

$("#container").ejChart({ enableRotation: false }); 		Not applicable
depth Property:depth

$("#container").ejChart({ depth: 45 }); 		Not applicable

Canvas rendering

Behaviour API in Essential JS 1 API in Essential JS 2
canvas rendering Property:enableCanvasRendering

$("#container").ejChart({ enableCanvasRendering: true }); 		Not applicable

Indicators

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

$("#container").ejChart({ indicators: [ { type: 'Sma' }] }); 		Property:type

let chart: Chart = new Chart({ indicators: [ { type: 'Sma' }] });
Period for indicator Property:period

$("#container").ejChart({ indicators: [ { period: 14 }] }); 		Property:type

let chart: Chart = new Chart({ indicators: [ { period: 14 }] });
Period for indicator Property:period

$("#container").ejChart({ indicators: [ { period: 14 }] }); 		Property:period

let chart: Chart = new Chart({ indicators: [ { period: 14 }] });
%K value in stochastic indicator Property:kPeriod

$("#container").ejChart({ indicators: [ { kPeriod: 14 }] }); 		Property:kPeriod

let chart: Chart = new Chart({ indicators: [ { kPeriod: 14 }] });
%D value in stochastic indicator Property:dPeriod

$("#container").ejChart({ indicators: [ { dPeriod: 3 }] }); 		Property:dPeriod

let chart: Chart = new Chart({ indicators: [ { dPeriod: 3 }] });
Shows overSold/overBought values Not applicable Property:showZones

let chart: Chart = new Chart({ indicators: [ { showZones: true }] });
Overbought value for RSI and stochastic indicator Not applicable Property:overBought

let chart: Chart = new Chart({ indicators: [ { overBought: 80 }] });
Oversold value for RSI and stochastic indicator Not applicable Property:overSold

let chart: Chart = new Chart({ indicators: [ { overSold: 20 }] });
Standard deviation for Bollingerbands Property:standardDeviations

$("#container").ejChart({ indicators: [ { standardDeviations: 2 }] }); 		Property:standardDeviation

let chart: Chart = new Chart({ indicators: [ { standardDeviation: 2 }] });
standard deviation Property:standardDeviations

$("#container").ejChart({ indicators: [ { standardDeviations: 2 }] }); 		Property:standardDeviation

let chart: Chart = new Chart({ indicators: [ { standardDeviation: 2 }] });
Field for indicator Property:field

$("#container").ejChart({ indicators: [ { field: 'Close' }] }); 		Property:field

let chart: Chart = new Chart({ indicators: [ { field: 'Close' }] });
Slow period for MACD indicator Property:shortPeriod

$("#container").ejChart({ indicators: [ { shortPeriod: 12 }] }); 		Property:slowPeriod

let chart: Chart = new Chart({ indicators: [ { slowPeriod: 12 }] });
Fast period for MACD indicator Property:longPeriod

$("#container").ejChart({ indicators: [ { longPeriod: 26 }] }); 		Property:fastPeriod

let chart: Chart = new Chart({ indicators: [ { fastPeriod: 26 }] });
Line style for MACD indicator Property:macdLine

$("#container").ejChart({ indicators: [ { macdLine: { width: 2, fill: 'red' } }] }); 		Property:fastPeriod

let chart: Chart = new Chart({ indicators: [ { macdLine: { width: 2, color: 'red' } }] });
Type of MACD indicator Property:macdType

$("#container").ejChart({ indicators: [ { macdType: 'both' }] }); 		Property:fastPeriod

let chart: Chart = new Chart({ indicators: [ { macdType: 'Both' }] });
Color of the positive bars in Macd indicators Not applicable Property:macdPositiveColor

let chart: Chart = new Chart({ indicators: [ { macdPositiveColor: 'red' }] });
Color of the negative bars in Macd indicators Not applicable Property:macdNegativeColor

let chart: Chart = new Chart({ indicators: [ { macdNegativeColor: 'red' }] });
Color for Bollinger bands Not applicable Property:bandColor

let chart: Chart = new Chart({ indicators: [ { bandColor: 'red' }] });
Appearance of upper line in indicator Property:upperLine

$("#container").ejChart({ indicators: [ { upperLine: { fill: '#EECCAA', width: 2 } }] }); 		Property:upperLine

let chart: Chart = new Chart({ indicators: [ { upperLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }] });
Appearance of lower line in indicator Property:lowerLine

$("#container").ejChart({ indicators: [ { lowerLine: { fill: '#EECCAA', width: 2 } }] }); 		Property:lowerLine

let chart: Chart = new Chart({ indicators: [ { lowerLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }] });
Appearance of period line in indicator Property:periodLine

$("#container").ejChart({ indicators: [ { periodLine: { fill: '#EECCAA', width: 2 } }] }); 		Property:lowerLine

let chart: Chart = new Chart({ indicators: [ { lowerLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }] });
Name of the series for which indicator has to be drawn. Property:seriesName

$("#container").ejChart({ indicators: [ { seriesName: '' }] }); 		Property:lowerLine

let chart: Chart = new Chart({ indicators: [ { seriesName: '' }] });
Options to customize the histogram in MACD indicator Property:seriesName

$("#container").ejChart({ indicators: [ { histogram: { } }] }); 		Not applicable
Enabling animation Property:enableAnimation

$("#container").ejChart({ indicators: [ { enableAnimation: true }] }); 		Property:animation.enable

let chart: Chart = new Chart({ indicators: [ { animation: { enable: true }] });
Animation duration Property:animationDuration

$("#container").ejChart({ indicators: [ { animationDuration: 3000 }] }); 		Property:animation.duration

let chart: Chart = new Chart({ indicators: [ { animation: { duration: 3000 }] });
Tooltip Property:tooltip

$("#container").ejChart({ indicators: [ { tooltip: { visible: true } }] }); 		Not applicable
Trigger value of MACD indicator. Property:trigger

$("#container").ejChart({ indicators: [ { trigger: 14 }] }); 		Not applicable
Fill color for indicator Property:fill

$("#container").ejChart({ indicators: [ { fill: '#EEDDCC' }] }); 		Property:animation.enable

let chart: Chart = new Chart({ indicators: [ { fill: 'red' }] });
Width for indicator Property:width

$("#container").ejChart({ indicators: [ { width: 2 }] }); 		Property:width

let chart: Chart = new Chart({ indicators: [ { width: 3 }] });
xAxis Name of indicator Property:xAxisName

$("#container").ejChart({ indicators: [ { xAxisName: '' }] }); 		Property:xAxisName

let chart: Chart = new Chart({ indicators: [ { xAxisName: '' }] });
yAxis Name of indicator Property:yAxisName

$("#container").ejChart({ indicators: [ { yAxisName: '' }] }); 		Property:yAxisName

let chart: Chart = new Chart({ indicators: [ { yAxisName: '' }] });
Visibility of indicator Property:visibility

$("#container").ejChart({ indicators: [ { visibility: true }] }); 		Not applicable

Legend

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

$("#container").ejChart({ legend: { visible: true } }); 		Property:visible

let chart: Chart = new Chart({ legendSettings: { visible: true } });
Legend height Property:size.height

$("#container").ejChart({ legend: { size : { height: 50 } } }); 		Property:height

let chart: Chart = new Chart({ legendSettings: { height: '30' } });
Legend width Property:size.width

$("#container").ejChart({ legend: { size: { width: 20 } } }); 		Property:width

let chart: Chart = new Chart({ legendSettings: { width: '30' } });
Legend location in chart Property:location

$("#container").ejChart({ legend: { location: { x: 3, y: 45} } }); 		Property:height

let chart: Chart = new Chart({ legendSettings: { location: { x: 3, y: 45} } });
Legend position in chart Property:position

$("#container").ejChart({ legend: { position: 'top' } }); 		Property:position

let chart: Chart = new Chart({ legendSettings: { position: 'Top' } });
Legend padding Not applicable Property:padding

let chart: Chart = new Chart({ legendSettings: { padding: 8 } });
Legend alignment Property:position

$("#container").ejChart({ legend: { alignment: 'center' } }); 		Property:position

let chart: Chart = new Chart({ legendSettings: { alignment: 'Center' } });
text style for legend Property:font

$("#container").ejChart({ legend: { font: { fontFamily: '', fontWeight: '400', fontStyle: 'italic', size: '12px' } } }); 		Property:textStyle

let chart: Chart = new Chart({ legendSettings: { textStyle: { size: '12px' , color: 'red', fontFamily: 'Italic', fontWeight: '400', fontStyle: 'Normal', opacity: 1, textAlignment: 'Center', textOverFlow: 'Trim'} } });
shape height of legend Property:itemStyle.height

$("#container").ejChart({ legend: { itemStyle: { height: 20 } } }); 		Property:shapeHeight

let chart: Chart = new Chart({ legendSettings: { shapeHeight: 20 } });
shape width of legend Property:itemStyle.width

$("#container").ejChart({ legend: { itemStyle: { width: 20 } } }); 		Property:shapeWidth

let chart: Chart = new Chart({ legendSettings: { shapeWidth: 20 } });
shape width of legend Property:itemStyle.width

$("#container").ejChart({ legend: { itemStyle: { width: 20 } } }); 		Property:shapeWidth

let chart: Chart = new Chart({ legendSettings: { shapeWidth: 20 } });
shape border of legend Property:itemStyle.border

$("#container").ejChart({ legend: { itemStyle: { border: { width: 2, color: 'red' } } } }); 		Not Applicable
shape padding of legend Property:itemPadding

$("#container").ejChart({ legend: { itemPadding: 10 } }); 		Property:shapePadding

let chart: Chart = new Chart({ legendSettings: { shapePadding: 20 } });
Background of legend Property:background

$("#container").ejChart({ legend: { background: 'transparent' } }); 		Property:backgorund

let chart: Chart = new Chart({ legendSettings: { background: 'transparent' } });
Opacity of legend Property:opacity

$("#container").ejChart({ legend: { opacity: 0.3 } }); 		Property:opacity

let chart: Chart = new Chart({ legendSettings: { opacity: 0.4 } });
Toggle visibility of series while legend click Property:toggleSeriesVisibility

$("#container").ejChart({ legend: { toggleSeriesVisibility: true } }); 		Property:toggleVisibility

let chart: Chart = new Chart({ legendSettings: { toggleVisibility: true } });
Title for legend Property:title

$("#container").ejChart({ legend: { title: { text: 'LegendTitle', font: { }, textAlignment: 'middle' } } }); 		Not applicable
Text Overflow for legend Property:title

$("#container").ejChart({ legend: { textOverFlow: 'trim' } }); 		Property:textStyle.textOverFlow

let chart: new Chart({ legend: { text: { textOverFlow: 'trim' } } });
Text width for legend while setting text overflow Property:textWidth

$("#container").ejChart({ legend: { textWidth: 20 } }); 		Not applicable
Scroll bar for legend Property:enableScrollBar

$("#container").ejChart({ legend: { enableScrollBar: true } }); 		Not applicable
Row count for legend Property:rowCount

$("#container").ejChart({ legend: { rowCount: 2 } }); 		Not applicable
Column count for legend Property:columnCount

$("#container").ejChart({ legend: { columnCount: 2 } }); 		Not applicable
Color for legend items Property:fill

$("#container").ejChart({ legend: { fill: '#EEFFCC' } }); 		Not applicable

primaryXAxis

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

$("#container").ejChart({ primaryXAxis: { alternateGridBand: { even: { fill: 'red }}} }); 		Not applicable
Axis line cross value Property:crossesAt

$("#container").ejChart({ primaryXAxis: { crossesAt: 0 } }); 		Property:crossesAt

let chart: Chart = new Chart({ primaryXAxis: { crossesAt: 4} }); chart.appendTo('#chart');
axis name with which the axis line has to be crossed Property:crossesInAxis

$("#container").ejChart({ primaryXAxis: { crossesInAxis: '' } }); 		Property:crossesInAxis

let chart: Chart = new Chart({ primaryXAxis: { crossesInAxis: '' } }); chart.appendTo('#chart');
axis elements placed with axis line Property:showNextToAxisLine

$("#container").ejChart({ primaryXAxis: { showNextToAxisLine : true } }); 		Property:placeNextToAxisLine

let chart: Chart = new Chart({ primaryXAxis: { placeNextToAxisLine: '' } }); chart.appendTo('#chart');
axis line style Property:axisLine.color

$("#container").ejChart({ primaryXAxis: { axisLine: { color : 'red' } } }); 		Property:lineStyle.color

let chart: Chart = new Chart({ primaryXAxis: { lineStyle: { color: 'black' } } }); chart.appendTo('#chart');
axis line dashArray Property:axisLine.color

$("#container").ejChart({ primaryXAxis: { axisLine: { dashArray : '10, 5' } } }); 		Property:lineStyle.dashArray

let chart: Chart = new Chart({ primaryXAxis: { lineStyle: { dashArray: '10, 5' } } }); chart.appendTo('#chart');
Offset for axis Property:axisLine.offset

$("#container").ejChart({ primaryXAxis: { axisLine: { offset : 10 } } }); 		Property:plotOffset

let chart: Chart = new Chart({ primaryXAxis: { plotOffset: 10 } }); chart.appendTo('#chart');
Visible of an axis Property:axisLine.offset

$("#container").ejChart({ primaryXAxis: { axisLine: { visible : false } } }); 		Property:visible

let chart: Chart = new Chart({ primaryXAxis: { visible: false } }); chart.appendTo('#chart');
Width of an axis Property:axisLine.width

$("#container").ejChart({ primaryXAxis: { axisLine: { width : 2 } } }); 		Property:lineStyle.width

let chart: Chart = new Chart({ primaryXAxis: { lineStyle: { width: 3 } } }); chart.appendTo('#chart');
Column index of an axis Property:columnIndex

$("#container").ejChart({ primaryXAxis: { columnIndex: 2 } }); 		Property:columnIndex

let chart: Chart = new Chart({ primaryXAxis: { columnIndex: 2 } }); chart.appendTo('#chart');
span of an axis to place horizontally or vertically Property:columnSpan

$("#container").ejChart({ primaryXAxis: { columnIndex: 2 } }); 		Property:span

let chart: Chart = new Chart({ primaryXAxis: { span: 2 } }); chart.appendTo('#chart');
Crosshair label of an axis Property:crossHairLabel.visible

$("#container").ejChart({ primaryXAxis: { crossHairLabel: { visible: true }} }); 		Property:crossHairTooltip.enable

let chart: Chart = new Chart({ primaryXAxis: { crossHairTooltip: { enable: true }} }); chart.appendTo('#chart');
Crosshair label color of an axis Not applicable Property:crossHairTooltip.fill

let chart: Chart = new Chart({ primaryXAxis: { crossHairTooltip: { fill: 'red' }} }); chart.appendTo('#chart');
Crosshair label text style Not applicable Property:crossHairTooltip.textStyle

let chart: Chart = new Chart({ primaryXAxis: { crossHairTooltip: { textStyle: { } }} }); chart.appendTo('#chart');
Desired interval count for primaryXAxis Property:desiredIntervals

$("#container").ejChart({ primaryXAxis: { desiredIntervals: 4} }); 		Property:desiredIntervals

let chart: Chart = new Chart({ primaryXAxis: { desiredIntervals: 4 } }); chart.appendTo('#chart');
Edges primaryXAxis Property:edgeLabelPlacement

$("#container").ejChart({ primaryXAxis: { edgeLabelPlacement: 'none' } }); 		Property:edgeLabelPlacement

let chart: Chart = new Chart({ primaryXAxis: { edgeLabelPlacement: 'Shift' } }); chart.appendTo('#chart');
Enables trim for axis labels Property:enableTrim

$("#container").ejChart({ primaryXAxis: { enableTrim: true } }); 		Property:enableTrim

let chart: Chart = new Chart({ primaryXAxis: { enableTrim: true } }); chart.appendTo('#chart');
Specifies the interval of the axis according to the zoomed data of the chart Property:enableAutoIntervalOnZooming

$("#container").ejChart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); 		Property:enableAutoIntervalOnZooming

let chart: Chart = new Chart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); chart.appendTo('#chart');
Specifies the interval of the axis according to the zoomed data of the chart Property:enableAutoIntervalOnZooming

$("#container").ejChart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); 		Property:enableAutoIntervalOnZooming

let chart: Chart = new Chart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); chart.appendTo('#chart');
Font style for primaryXAxis Property:font

$("#container").ejChart({ primaryXAxis: { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} } }); 		Property:titleStyle

let chart: Chart = new Chart({ primaryXAxis: { titleStyle: { } } }); chart.appendTo('#chart');
Indexed for category axis Property:isIndexed

$("#container").ejChart({ primaryXAxis: { isIndexed: true } }); 		Property:isIndexed

let chart: Chart = new Chart({ primaryXAxis: { isIndexed: true } }); chart.appendTo('#chart');
Interval type for date time axis Property:intervalType

$("#container").ejChart({ primaryXAxis: { intervalType}: 'Auto' } }); 		Property:intervalType

let chart: Chart = new Chart({ primaryXAxis: { intervalType: 'Auto } }); chart.appendTo('#chart');
Inversed axis Property:isInversed

$("#container").ejChart({ primaryXAxis: { isInversed: true } }); 		Property:isInversed

let chart: Chart = new Chart({ primaryXAxis: { isInversed: true } }); chart.appendTo('#chart');
Custom label format Property:labelFormat

$("#container").ejChart({ primaryXAxis: { labelFormat: '{value}K' } }); 		Property:labelFormat

let chart: Chart = new Chart({ primaryXAxis: { labelFormat: '{value}K' } }); chart.appendTo('#chart');
labelIntersectAction Property:labelIntersectAction

$("#container").ejChart({ primaryXAxis: { labelIntersectAction: 'trim' } }); 		Property:labelIntersectAction

let chart: Chart = new Chart({ primaryXAxis: { labelIntersectAction: 'Trim' } }); chart.appendTo('#chart');
labelPosition Property:labelPosition

$("#container").ejChart({ primaryXAxis: { labelPosition: 'inside' } }); 		Property:labelPosition

let chart: Chart = new Chart({ primaryXAxis: { labelPosition: 'Inside' } }); chart.appendTo('#chart');
labelPlacement for category axis Property:labelPlacement

$("#container").ejChart({ primaryXAxis: { labelPlacement: 'onTicks' } }); 		Property:labelPlacement

let chart: Chart = new Chart({ primaryXAxis: { labelPlacement: 'OnTicks' } }); chart.appendTo('#chart');
Axis label alignment Property:alignment

$("#container").ejChart({ primaryXAxis: { alignment: 'center' } }); 		Not Applicable
Rotation of axis labels Property:labelRotation

$("#container").ejChart({ primaryXAxis: { labelRotation: 45 } }); 		Property:labelRotation

let chart: Chart = new Chart({ primaryXAxis: { labelRotation: 45 } }); chart.appendTo('#chart');
Log base value for logarithmic axis Property:logBase

$("#container").ejChart({ primaryXAxis: { logBase: 10 } }); 		Property:labelRotation

let chart: Chart = new Chart({ primaryXAxis: { logBase: 10 } }); chart.appendTo('#chart');
Major grid line Property:majorGridLines.visible

$("#container").ejChart({ primaryXAxis: { majorGridLines: { visible: true} } }); 		Not Applicable
Width of MajorGridLines Property:majorGridLines.width

$("#container").ejChart({ primaryXAxis: { majorGridLines: { width: 2} } }); 		Property:majorGridLines.width

let chart: Chart = new Chart({ primaryXAxis: { majorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of MajorGridLines Property:majorGridLines.color

$("#container").ejChart({ primaryXAxis: { majorGridLines: { color: 'black' } } }); 		Property:majorGridLines.color

let chart: Chart = new Chart({ primaryXAxis: { majorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of MajorGridLines Property:majorGridLines.dashArray

$("#container").ejChart({ primaryXAxis: { majorGridLines: { dashArray: 'black' } } }); 		Property:majorGridLines.dashArray

let chart: Chart = new Chart({ primaryXAxis: { majorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of major grid line Property:majorGridLines.opacity

$("#container").ejChart({ primaryXAxis: { majorGridLines: { opacity: true} } }); 		Not Applicable
Major Tick line Property:majorTickLines.visible

$("#container").ejChart({ primaryXAxis: { majorTickLines: { visible: true} } }); 		Not Applicable
Width of MajorTickLines Property:majorTickLines.width

$("#container").ejChart({ primaryXAxis: { majorTickLines: { width: 2} } }); 		Property:majorTickLines.width

let chart: Chart = new Chart({ primaryXAxis: { majorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of MajorTickLines Property:majorTickLines.size

$("#container").ejChart({ primaryXAxis: { majorTickLines: { size: 2} } }); 		Property:majorTickLines.height

let chart: Chart = new Chart({ primaryXAxis: { majorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of MajorTickLines Property:majorTickLines.color

$("#container").ejChart({ primaryXAxis: { majorTickLines: { color: 'black' } } }); 		Property:majorTickLines.color

let chart: Chart = new Chart({ primaryXAxis: { majorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of major Tick line Property:majorTickLines.opacity

$("#container").ejChart({ primaryXAxis: { majorTickLines: { opacity: true} } }); 		Not Applicable
maximum labels of primaryXAxis Property:maximumLabels

$("#container").ejChart({ primaryXAxis: { maximumLabels: 5 } }); 		Property:maximumLabels

let chart: Chart = new Chart({ primaryXAxis: { maximumLabels: 4 } }); chart.appendTo('#chart');
maximum labels width of primaryXAxis to trim Property:maximumLabelWidth

$("#container").ejChart({ primaryXAxis: { maximumLabelWidth: 40 } }); 		Property:maximumLabelWidth

let chart: Chart = new Chart({ primaryXAxis: { maximumLabelWidth: 4 } }); chart.appendTo('#chart');
minor grid line Property:minorGridLines.visible

$("#container").ejChart({ primaryXAxis: { minorGridLines: { visible: true} } }); 		Not Applicable
Width of minorGridLines Property:minorGridLines.width

$("#container").ejChart({ primaryXAxis: { minorGridLines: { width: 2} } }); 		Property:minorGridLines.width

let chart: Chart = new Chart({ primaryXAxis: { minorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of minorGridLines Property:minorGridLines.color

$("#container").ejChart({ primaryXAxis: { minorGridLines: { color: 'black' } } }); 		Property:minorGridLines.color

let chart: Chart = new Chart({ primaryXAxis: { minorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of minorGridLines Property:minorGridLines.dashArray

$("#container").ejChart({ primaryXAxis: { minorGridLines: { dashArray: 'black' } } }); 		Property:minorGridLines.dashArray

let chart: Chart = new Chart({ primaryXAxis: { minorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of minor grid line Property:minorGridLines.opacity

$("#container").ejChart({ primaryXAxis: { minorGridLines: { opacity: true} } }); 		Not Applicable
minor Tick line Property:minorTickLines.visible

$("#container").ejChart({ primaryXAxis: { minorTickLines: { visible: true} } }); 		Not Applicable
Width of minorTickLines Property:minorTickLines.width

$("#container").ejChart({ primaryXAxis: { minorTickLines: { width: 2} } }); 		Property:minorTickLines.width

let chart: Chart = new Chart({ primaryXAxis: { minorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of minorTickLines Property:minorTickLines.size

$("#container").ejChart({ primaryXAxis: { minorTickLines: { size: 2} } }); 		Property:minorTickLines.height

let chart: Chart = new Chart({ primaryXAxis: { minorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of minorTickLines Property:minorTickLines.color

$("#container").ejChart({ primaryXAxis: { minorTickLines: { color: 'black' } } }); 		Property:minorTickLines.color

let chart: Chart = new Chart({ primaryXAxis: { minorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of minor Tick line Property:minorTickLines.opacity

$("#container").ejChart({ primaryXAxis: { minorTickLines: { opacity: true} } }); 		Not Applicable
Minor ticks per interval of primaryXAxis Property:minorTicksPerInterval

$("#container").ejChart({ primaryXAxis: { minorTicksPerInterval: 4 } }); 		Property:minorTickLines.color

let chart: Chart = new Chart({ primaryXAxis: { minorTicksPerInterval: 4 } }); chart.appendTo('#chart');
name of the primaryXAxis Property:name

$("#container").ejChart({ primaryXAxis: { name: 'primaryXAxis' } }); 		Property:name

let chart: Chart = new Chart({ primaryXAxis: { name: 'primaryXAxis' } }); chart.appendTo('#chart');
Orientation of primaryXAxis Property:orientation

$("#container").ejChart({ primaryXAxis: { orientation: 'Vertical' } }); 		Not Applicable
Plot offset for primaryXAxis Property:plotOffset

$("#container").ejChart({ primaryXAxis: { plotOffset: 0 } }); 		Property:plotOffset

let chart: Chart = new Chart({ primaryXAxis: { plotOffset: 0 } }); chart.appendTo('#chart');
minimum for primaryXAxis Property:range.minimum

$("#container").ejChart({ primaryXAxis: { range: { minimum: 10 }} }); 		Property:minimum

let chart: Chart = new Chart({ primaryXAxis: { minimum: 23 } }); chart.appendTo('#chart');
maximum for primaryXAxis Property:range.maximum

$("#container").ejChart({ primaryXAxis: { range: { maximum: 10 }} }); 		Property:maximum

let chart: Chart = new Chart({ primaryXAxis: { maximum: 23 } }); chart.appendTo('#chart');
interval for primaryXAxis Property:range.interval

$("#container").ejChart({ primaryXAxis: { range: { interval: 1 }} }); 		Property:interval

let chart: Chart = new Chart({ primaryXAxis: { interval: 2 } }); chart.appendTo('#chart');
RangePadding for primaryXAxis Property:rangePadding

$("#container").ejChart({ primaryXAxis: { rangePadding: 'None' }} }); 		Property:rangePadding

let chart: Chart = new Chart({ primaryXAxis: { rangePadding: 'None' } }); chart.appendTo('#chart');
Rounding Places in primaryXAxis Property:roundingPlaces

$("#container").ejChart({ primaryXAxis: { roundingPlaces: 3 } }); 		Property:labelFormat

let chart: Chart = new Chart({ primaryXAxis: { labelFormat: 'n3' } }); chart.appendTo('#chart');
ScrollBar settings of primaryXAxis Property:scrollbarSettings

$("#container").ejChart({ primaryXAxis: { scrollbarSettings : { } } }); 		Not Applicable
TickPosition in primaryXAxis Property:tickLinesPosition

$("#container").ejChart({ primaryXAxis: { tickLinesPosition: 'Inside' } }); 		Property:tickPosition

let chart: Chart = new Chart({ primaryXAxis: { tickPosition: 'Inside' } }); chart.appendTo('#chart');
valueType of primaryXAxis Property:valueType

$("#container").ejChart({ primaryXAxis: { valueType: 'DateTime' } }); 		Property:valueType

let chart: Chart = new Chart({ primaryXAxis: { valueType: 'DateTime' } }); chart.appendTo('#chart');
visible of primaryXAxis Property:visible

$("#container").ejChart({ primaryXAxis: { visible: true } }); 		Property:visible

let chart: Chart = new Chart({ primaryXAxis: { visible: true } }); chart.appendTo('#chart');
zoomFactor of primaryXAxis Property:zoomFactor

$("#container").ejChart({ primaryXAxis: { zoomFactor: 0.3 } }); 		Property:zoomFactor

let chart: Chart = new Chart({ primaryXAxis: { zoomFactor: 0.3 } }); chart.appendTo('#chart');
zoomPosition of primaryXAxis Property:zoomPosition

$("#container").ejChart({ primaryXAxis: { zoomPosition: 0.3 } }); 		Property:zoomPosition

let chart: Chart = new Chart({ primaryXAxis: { zoomPosition: 0.3 } }); chart.appendTo('#chart');
labelBorder of primaryXAxis Property:labelBorder

$("#container").ejChart({ primaryXAxis: { labelBorder: { color: 'red', width: 2} } }); 		Property:border

let chart: Chart = new Chart({ primaryXAxis: { border: { color: 'red', width: 3 } } }); chart.appendTo('#chart');
title of primaryXAxis Property:title.text

$("#container").ejChart({ primaryXAxis: { title: { text: 'Chart title' } } }); 		Property:title

let chart: Chart = new Chart({ primaryXAxis: { title: 'Chart title' } }); chart.appendTo('#chart');
StripLine of primaryXAxis Property:stripLine

$("#container").ejChart({ primaryXAxis: { stripLine: [] } }); 		Property:stripLines

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [] } }); chart.appendTo('#chart');
Multilevel labels of primaryXAxis Property:multiLevelLabels

$("#container").ejChart({ primaryXAxis: { multiLevelLabels: [] } }); 		Property:multiLevelLabels

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [] } }); chart.appendTo('#chart');
skeleton for an axes Not Applicable Property:skeleton

let chart: Chart = new Chart({ axes: [ { skeleton: 'yMd' }] }); chart.appendTo('#chart');
skeleton type for an axes Not Applicable Property:skeletonType

let chart: Chart = new Chart({ axes: [ { skeletonType: 'DateTime' }] }); chart.appendTo('#chart');

primaryYAxis

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

$("#container").ejChart({ primaryYAxis: { alternateGridBand: { even: { fill: 'red }}} }); 		Not applicable
Axis line cross value Property:crossesAt

$("#container").ejChart({ primaryYAxis: { crossesAt: 0 } }); 		Property:crossesAt

let chart: Chart = new Chart({ primaryYAxis: { crossesAt: 4} }); chart.appendTo('#chart');
axis name with which the axis line has to be crossed Property:crossesInAxis

$("#container").ejChart({ primaryYAxis: { crossesInAxis: '' } }); 		Property:crossesInAxis

let chart: Chart = new Chart({ primaryYAxis: { crossesInAxis: '' } }); chart.appendTo('#chart');
axis elements placed with axis line Property:showNextToAxisLine

$("#container").ejChart({ primaryYAxis: { showNextToAxisLine : true } }); 		Property:placeNextToAxisLine

let chart: Chart = new Chart({ primaryYAxis: { placeNextToAxisLine: '' } }); chart.appendTo('#chart');
axis line style Property:axisLine.color

$("#container").ejChart({ primaryYAxis: { axisLine: { color : 'red' } } }); 		Property:lineStyle.color

let chart: Chart = new Chart({ primaryYAxis: { lineStyle: { color: 'black' } } }); chart.appendTo('#chart');
axis line dashArray Property:axisLine.color

$("#container").ejChart({ primaryYAxis: { axisLine: { dashArray : '10, 5' } } }); 		Property:lineStyle.dashArray

let chart: Chart = new Chart({ primaryYAxis: { lineStyle: { dashArray: '10, 5' } } }); chart.appendTo('#chart');
Offset for axis Property:axisLine.offset

$("#container").ejChart({ primaryYAxis: { axisLine: { offset : 10 } } }); 		Property:plotOffset

let chart: Chart = new Chart({ primaryYAxis: { plotOffset: 10 } }); chart.appendTo('#chart');
Visible of an axis Property:axisLine.offset

$("#container").ejChart({ primaryYAxis: { axisLine: { visible : false } } }); 		Property:visible

let chart: Chart = new Chart({ primaryYAxis: { visible: false } }); chart.appendTo('#chart');
Width of an axis Property:axisLine.width

$("#container").ejChart({ primaryYAxis: { axisLine: { width : 2 } } }); 		Property:lineStyle.width

let chart: Chart = new Chart({ primaryYAxis: { lineStyle: { width: 3 } } }); chart.appendTo('#chart');
Column index of an axis Property:columnIndex

$("#container").ejChart({ primaryYAxis: { columnIndex: 2 } }); 		Property:columnIndex

let chart: Chart = new Chart({ primaryYAxis: { columnIndex: 2 } }); chart.appendTo('#chart');
span of an axis to place horizontally or vertically Property:columnSpan

$("#container").ejChart({ primaryYAxis: { columnIndex: 2 } }); 		Property:span

let chart: Chart = new Chart({ primaryYAxis: { span: 2 } }); chart.appendTo('#chart');
Crosshair label of an axis Property:crossHairLabel.visible

$("#container").ejChart({ primaryYAxis: { crossHairLabel: { visible: true }} }); 		Property:crossHairTooltip.enable

let chart: Chart = new Chart({ primaryYAxis: { crossHairTooltip: { enable: true }} }); chart.appendTo('#chart');
Crosshair label color of an axis Not applicable Property:crossHairTooltip.fill

let chart: Chart = new Chart({ primaryYAxis: { crossHairTooltip: { fill: 'red' }} }); chart.appendTo('#chart');
Crosshair label text style Not applicable Property:crossHairTooltip.textStyle

let chart: Chart = new Chart({ primaryYAxis: { crossHairTooltip: { textStyle: { } }} }); chart.appendTo('#chart');
Desired interval count for primaryYAxis Property:desiredIntervals

$("#container").ejChart({ primaryYAxis: { desiredIntervals: 4} }); 		Property:desiredIntervals

let chart: Chart = new Chart({ primaryYAxis: { desiredIntervals: 4 } }); chart.appendTo('#chart');
Edges primaryYAxis Property:edgeLabelPlacement

$("#container").ejChart({ primaryYAxis: { edgeLabelPlacement: 'none' } }); 		Property:edgeLabelPlacement

let chart: Chart = new Chart({ primaryYAxis: { edgeLabelPlacement: 'Shift' } }); chart.appendTo('#chart');
Enables trim for axis labels Property:enableTrim

$("#container").ejChart({ primaryYAxis: { enableTrim: true } }); 		Property:enableTrim

let chart: Chart = new Chart({ primaryYAxis: { enableTrim: true } }); chart.appendTo('#chart');
Specifies the interval of the axis according to the zoomed data of the chart Property:enableAutoIntervalOnZooming

$("#container").ejChart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); 		Property:enableAutoIntervalOnZooming

let chart: Chart = new Chart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); chart.appendTo('#chart');
Specifies the interval of the axis according to the zoomed data of the chart Property:enableAutoIntervalOnZooming

$("#container").ejChart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); 		Property:enableAutoIntervalOnZooming

let chart: Chart = new Chart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); chart.appendTo('#chart');
Font style for primaryYAxis Property:font

$("#container").ejChart({ primaryYAxis: { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} } }); 		Property:titleStyle

let chart: Chart = new Chart({ primaryYAxis: { titleStyle: { } } }); chart.appendTo('#chart');
Indexed for category axis Property:isIndexed

$("#container").ejChart({ primaryYAxis: { isIndexed: true } }); 		Property:isIndexed

let chart: Chart = new Chart({ primaryYAxis: { isIndexed: true } }); chart.appendTo('#chart');
Interval type for date time axis Property:intervalType

$("#container").ejChart({ primaryYAxis: { intervalType}: 'Auto' } }); 		Property:intervalType

let chart: Chart = new Chart({ primaryYAxis: { intervalType: 'Auto } }); chart.appendTo('#chart');
Inversed axis Property:isInversed

$("#container").ejChart({ primaryYAxis: { isInversed: true } }); 		Property:isInversed

let chart: Chart = new Chart({ primaryYAxis: { isInversed: true } }); chart.appendTo('#chart');
Custom label format Property:labelFormat

$("#container").ejChart({ primaryYAxis: { labelFormat: '{value}K' } }); 		Property:labelFormat

let chart: Chart = new Chart({ primaryYAxis: { labelFormat: '{value}K' } }); chart.appendTo('#chart');
labelIntersectAction Property:labelIntersectAction

$("#container").ejChart({ primaryYAxis: { labelIntersectAction: 'trim' } }); 		Property:labelIntersectAction

let chart: Chart = new Chart({ primaryYAxis: { labelIntersectAction: 'Trim' } }); chart.appendTo('#chart');
labelPosition Property:labelPosition

$("#container").ejChart({ primaryYAxis: { labelPosition: 'inside' } }); 		Property:labelPosition

let chart: Chart = new Chart({ primaryYAxis: { labelPosition: 'Inside' } }); chart.appendTo('#chart');
labelPlacement for category axis Property:labelPlacement

$("#container").ejChart({ primaryYAxis: { labelPlacement: 'onTicks' } }); 		Property:labelPlacement

let chart: Chart = new Chart({ primaryYAxis: { labelPlacement: 'OnTicks' } }); chart.appendTo('#chart');
Axis label alignment Property:alignment

$("#container").ejChart({ primaryYAxis: { alignment: 'center' } }); 		Not Applicable
Rotation of axis labels Property:labelRotation

$("#container").ejChart({ primaryYAxis: { labelRotation: 45 } }); 		Property:labelRotation

let chart: Chart = new Chart({ primaryYAxis: { labelRotation: 45 } }); chart.appendTo('#chart');
Log base value for logarithmic axis Property:logBase

$("#container").ejChart({ primaryYAxis: { logBase: 10 } }); 		Property:labelRotation

let chart: Chart = new Chart({ primaryYAxis: { logBase: 10 } }); chart.appendTo('#chart');
Major grid line Property:majorGridLines.visible

$("#container").ejChart({ primaryYAxis: { majorGridLines: { visible: true} } }); 		Not Applicable
Width of MajorGridLines Property:majorGridLines.width

$("#container").ejChart({ primaryYAxis: { majorGridLines: { width: 2} } }); 		Property:majorGridLines.width

let chart: Chart = new Chart({ primaryYAxis: { majorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of MajorGridLines Property:majorGridLines.color

$("#container").ejChart({ primaryYAxis: { majorGridLines: { color: 'black' } } }); 		Property:majorGridLines.color

let chart: Chart = new Chart({ primaryYAxis: { majorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of MajorGridLines Property:majorGridLines.dashArray

$("#container").ejChart({ primaryYAxis: { majorGridLines: { dashArray: 'black' } } }); 		Property:majorGridLines.dashArray

let chart: Chart = new Chart({ primaryYAxis: { majorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of major grid line Property:majorGridLines.opacity

$("#container").ejChart({ primaryYAxis: { majorGridLines: { opacity: true} } }); 		Not Applicable
Major Tick line Property:majorTickLines.visible

$("#container").ejChart({ primaryYAxis: { majorTickLines: { visible: true} } }); 		Not Applicable
Width of MajorTickLines Property:majorTickLines.width

$("#container").ejChart({ primaryYAxis: { majorTickLines: { width: 2} } }); 		Property:majorTickLines.width

let chart: Chart = new Chart({ primaryYAxis: { majorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of MajorTickLines Property:majorTickLines.size

$("#container").ejChart({ primaryYAxis: { majorTickLines: { size: 2} } }); 		Property:majorTickLines.height

let chart: Chart = new Chart({ primaryYAxis: { majorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of MajorTickLines Property:majorTickLines.color

$("#container").ejChart({ primaryYAxis: { majorTickLines: { color: 'black' } } }); 		Property:majorTickLines.color

let chart: Chart = new Chart({ primaryYAxis: { majorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of major Tick line Property:majorTickLines.opacity

$("#container").ejChart({ primaryYAxis: { majorTickLines: { opacity: true} } }); 		Not Applicable
maximum labels of primaryYAxis Property:maximumLabels

$("#container").ejChart({ primaryYAxis: { maximumLabels: 5 } }); 		Property:maximumLabels

let chart: Chart = new Chart({ primaryYAxis: { maximumLabels: 4 } }); chart.appendTo('#chart');
maximum labels width of primaryYAxis to trim Property:maximumLabelWidth

$("#container").ejChart({ primaryYAxis: { maximumLabelWidth: 40 } }); 		Property:maximumLabelWidth

let chart: Chart = new Chart({ primaryYAxis: { maximumLabelWidth: 4 } }); chart.appendTo('#chart');
minor grid line Property:minorGridLines.visible

$("#container").ejChart({ primaryYAxis: { minorGridLines: { visible: true} } }); 		Not Applicable
Width of minorGridLines Property:minorGridLines.width

$("#container").ejChart({ primaryYAxis: { minorGridLines: { width: 2} } }); 		Property:minorGridLines.width

let chart: Chart = new Chart({ primaryYAxis: { minorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of minorGridLines Property:minorGridLines.color

$("#container").ejChart({ primaryYAxis: { minorGridLines: { color: 'black' } } }); 		Property:minorGridLines.color

let chart: Chart = new Chart({ primaryYAxis: { minorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of minorGridLines Property:minorGridLines.dashArray

$("#container").ejChart({ primaryYAxis: { minorGridLines: { dashArray: 'black' } } }); 		Property:minorGridLines.dashArray

let chart: Chart = new Chart({ primaryYAxis: { minorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of minor grid line Property:minorGridLines.opacity

$("#container").ejChart({ primaryYAxis: { minorGridLines: { opacity: true} } }); 		Not Applicable
minor Tick line Property:minorTickLines.visible

$("#container").ejChart({ primaryYAxis: { minorTickLines: { visible: true} } }); 		Not Applicable
Width of minorTickLines Property:minorTickLines.width

$("#container").ejChart({ primaryYAxis: { minorTickLines: { width: 2} } }); 		Property:minorTickLines.width

let chart: Chart = new Chart({ primaryYAxis: { minorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of minorTickLines Property:minorTickLines.size

$("#container").ejChart({ primaryYAxis: { minorTickLines: { size: 2} } }); 		Property:minorTickLines.height

let chart: Chart = new Chart({ primaryYAxis: { minorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of minorTickLines Property:minorTickLines.color

$("#container").ejChart({ primaryYAxis: { minorTickLines: { color: 'black' } } }); 		Property:minorTickLines.color

let chart: Chart = new Chart({ primaryYAxis: { minorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of minor Tick line Property:minorTickLines.opacity

$("#container").ejChart({ primaryYAxis: { minorTickLines: { opacity: true} } }); 		Not Applicable
Minor ticks per interval of primaryYAxis Property:minorTicksPerInterval

$("#container").ejChart({ primaryYAxis: { minorTicksPerInterval: 4 } }); 		Property:minorTickLines.color

let chart: Chart = new Chart({ primaryYAxis: { minorTicksPerInterval: 4 } }); chart.appendTo('#chart');
name of the primaryYAxis Property:name

$("#container").ejChart({ primaryYAxis: { name: 'primaryYAxis' } }); 		Property:name

let chart: Chart = new Chart({ primaryYAxis: { name: 'primaryYAxis' } }); chart.appendTo('#chart');
Orientation of primaryYAxis Property:orientation

$("#container").ejChart({ primaryYAxis: { orientation: 'Vertical' } }); 		Not Applicable
Plot offset for primaryYAxis Property:plotOffset

$("#container").ejChart({ primaryYAxis: { plotOffset: 0 } }); 		Property:plotOffset

let chart: Chart = new Chart({ primaryYAxis: { plotOffset: 0 } }); chart.appendTo('#chart');
minimum for primaryYAxis Property:range.minimum

$("#container").ejChart({ primaryYAxis: { range: { minimum: 10 }} }); 		Property:minimum

let chart: Chart = new Chart({ primaryYAxis: { minimum: 23 } }); chart.appendTo('#chart');
maximum for primaryYAxis Property:range.maximum

$("#container").ejChart({ primaryYAxis: { range: { maximum: 10 }} }); 		Property:maximum

let chart: Chart = new Chart({ primaryYAxis: { maximum: 23 } }); chart.appendTo('#chart');
interval for primaryYAxis Property:range.interval

$("#container").ejChart({ primaryYAxis: { range: { interval: 1 }} }); 		Property:interval

let chart: Chart = new Chart({ primaryYAxis: { interval: 2 } }); chart.appendTo('#chart');
RangePadding for primaryYAxis Property:rangePadding

$("#container").ejChart({ primaryYAxis: { rangePadding: 'None' }} }); 		Property:rangePadding

let chart: Chart = new Chart({ primaryYAxis: { rangePadding: 'None' } }); chart.appendTo('#chart');
Rounding Places in primaryYAxis Property:roundingPlaces

$("#container").ejChart({ primaryYAxis: { roundingPlaces: 3 } }); 		Property:labelFormat

let chart: Chart = new Chart({ primaryYAxis: { labelFormat: 'n3' } }); chart.appendTo('#chart');
ScrollBar settings of primaryYAxis Property:scrollbarSettings

$("#container").ejChart({ primaryYAxis: { scrollbarSettings : { } } }); 		Not Applicable
TickPosition in primaryYAxis Property:tickLinesPosition

$("#container").ejChart({ primaryYAxis: { tickLinesPosition: 'Inside' } }); 		Property:tickPosition

let chart: Chart = new Chart({ primaryYAxis: { tickPosition: 'Inside' } }); chart.appendTo('#chart');
valueType of primaryYAxis Property:valueType

$("#container").ejChart({ primaryYAxis: { valueType: 'DateTime' } }); 		Property:valueType

let chart: Chart = new Chart({ primaryYAxis: { valueType: 'DateTime' } }); chart.appendTo('#chart');
visible of primaryYAxis Property:visible

$("#container").ejChart({ primaryYAxis: { visible: true } }); 		Property:visible

let chart: Chart = new Chart({ primaryYAxis: { visible: true } }); chart.appendTo('#chart');
zoomFactor of primaryYAxis Property:zoomFactor

$("#container").ejChart({ primaryYAxis: { zoomFactor: 0.3 } }); 		Property:zoomFactor

let chart: Chart = new Chart({ primaryYAxis: { zoomFactor: 0.3 } }); chart.appendTo('#chart');
zoomPosition of primaryYAxis Property:zoomPosition

$("#container").ejChart({ primaryYAxis: { zoomPosition: 0.3 } }); 		Property:zoomPosition

let chart: Chart = new Chart({ primaryYAxis: { zoomPosition: 0.3 } }); chart.appendTo('#chart');
labelBorder of primaryYAxis Property:labelBorder

$("#container").ejChart({ primaryYAxis: { labelBorder: { color: 'red', width: 2} } }); 		Property:border

let chart: Chart = new Chart({ primaryYAxis: { border: { color: 'red', width: 3 } } }); chart.appendTo('#chart');
title of primaryYAxis Property:title.text

$("#container").ejChart({ primaryYAxis: { title: { text: 'Chart title' } } }); 		Property:title

let chart: Chart = new Chart({ primaryYAxis: { title: 'Chart title' } }); chart.appendTo('#chart');
StripLine of primaryYAxis Property:stripLine

$("#container").ejChart({ primaryYAxis: { stripLine: [] } }); 		Property:stripLines

let chart: Chart = new Chart({ primaryYAxis: { stripLines: [] } }); chart.appendTo('#chart');
Multilevel labels of primaryYAxis Property:multiLevelLabels

$("#container").ejChart({ primaryYAxis: { multiLevelLabels: [] } }); 		Property:multiLevelLabels

let chart: Chart = new Chart({ primaryYAxis: { stripLines: [] } }); chart.appendTo('#chart');
skeleton for an axes Not Applicable Property:skeleton

let chart: Chart = new Chart({ axes: [ { skeleton: 'yMd' }] }); chart.appendTo('#chart');
skeleton type for an axes Not Applicable Property:skeletonType

let chart: Chart = new Chart({ axes: [ { skeletonType: 'DateTime' }] }); chart.appendTo('#chart');

Axes

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

$("#container").ejChart({ axes: [ { alternateGridBand: { even: { fill: 'red }}}] }); 		Not applicable
Axis line cross value Property:crossesAt

$("#container").ejChart({ axes: [ { crossesAt: 0 }] }); 		Property:crossesAt

let chart: Chart = new Chart({ axes: [ { crossesAt: 4}] }); chart.appendTo('#chart');
axis name with which the axis line has to be crossed Property:crossesInAxis

$("#container").ejChart({ axes: [ { crossesInAxis: '' }] }); 		Property:crossesInAxis

let chart: Chart = new Chart({ axes: [ { crossesInAxis: '' }] }); chart.appendTo('#chart');
axis elements placed with axis line Property:showNextToAxisLine

$("#container").ejChart({ axes: [ { showNextToAxisLine : true }] }); 		Property:placeNextToAxisLine

let chart: Chart = new Chart({ axes: [ { placeNextToAxisLine: '' }] }); chart.appendTo('#chart');
axis line style Property:axisLine.color

$("#container").ejChart({ axes: [ { axisLine: { color : 'red' } }] }); 		Property:lineStyle.color

let chart: Chart = new Chart({ axes: [ { lineStyle: { color: 'black' } }] }); chart.appendTo('#chart');
axis line dashArray Property:axisLine.color

$("#container").ejChart({ axes: [ { axisLine: { dashArray : '10, 5' } }] }); 		Property:lineStyle.dashArray

let chart: Chart = new Chart({ axes: [ { lineStyle: { dashArray: '10, 5' } }] }); chart.appendTo('#chart');
Offset for axis Property:axisLine.offset

$("#container").ejChart({ axes: [ { axisLine: { offset : 10 } }] }); 		Property:plotOffset

let chart: Chart = new Chart({ axes: [ { plotOffset: 10 }] }); chart.appendTo('#chart');
Visible of an axis Property:axisLine.offset

$("#container").ejChart({ axes: [ { axisLine: { visible : false } }] }); 		Property:visible

let chart: Chart = new Chart({ axes: [ { visible: false }] }); chart.appendTo('#chart');
Width of an axis Property:axisLine.width

$("#container").ejChart({ axes: [ { axisLine: { width : 2 } }] }); 		Property:lineStyle.width

let chart: Chart = new Chart({ axes: [ { lineStyle: { width: 3 } }] }); chart.appendTo('#chart');
Column index of an axis Property:columnIndex

$("#container").ejChart({ axes: [ { columnIndex: 2 }] }); 		Property:columnIndex

let chart: Chart = new Chart({ axes: [ { columnIndex: 2 }] }); chart.appendTo('#chart');
span of an axis to place horizontally or vertically Property:columnSpan

$("#container").ejChart({ axes: [ { columnIndex: 2 }] }); 		Property:span

let chart: Chart = new Chart({ axes: [ { span: 2 }] }); chart.appendTo('#chart');
Crosshair label of an axis Property:crossHairLabel.visible

$("#container").ejChart({ axes: [ { crossHairLabel: { visible: true }}] }); 		Property:crossHairTooltip.enable

let chart: Chart = new Chart({ axes: [ { crossHairTooltip: { enable: true }}] }); chart.appendTo('#chart');
Crosshair label color of an axis Not applicable Property:crossHairTooltip.fill

let chart: Chart = new Chart({ axes: [ { crossHairTooltip: { fill: 'red' }}] }); chart.appendTo('#chart');
Crosshair label text style Not applicable Property:crossHairTooltip.textStyle

let chart: Chart = new Chart({ axes: [ { crossHairTooltip: { textStyle: { } }}] }); chart.appendTo('#chart');
Desired interval count for primaryYAxis Property:desiredIntervals

$("#container").ejChart({ axes: [ { desiredIntervals: 4}] }); 		Property:desiredIntervals

let chart: Chart = new Chart({ axes: [ { desiredIntervals: 4 }] }); chart.appendTo('#chart');
Edges primaryYAxis Property:edgeLabelPlacement

$("#container").ejChart({ axes: [ { edgeLabelPlacement: 'none' }] }); 		Property:edgeLabelPlacement

let chart: Chart = new Chart({ axes: [ { edgeLabelPlacement: 'Shift' }] }); chart.appendTo('#chart');
Enables trim for axis labels Property:enableTrim

$("#container").ejChart({ axes: [ { enableTrim: true }] }); 		Property:enableTrim

let chart: Chart = new Chart({ axes: [ { enableTrim: true }] }); chart.appendTo('#chart');
Specifies the interval of the axis according to the zoomed data of the chart Property:enableAutoIntervalOnZooming

$("#container").ejChart({ axes: [ { enableAutoIntervalOnZooming: true }] }); 		Property:enableAutoIntervalOnZooming

let chart: Chart = new Chart({ axes: [ { enableAutoIntervalOnZooming: true }] }); chart.appendTo('#chart');
Specifies the interval of the axis according to the zoomed data of the chart Property:enableAutoIntervalOnZooming

$("#container").ejChart({ axes: [ { enableAutoIntervalOnZooming: true }] }); 		Property:enableAutoIntervalOnZooming

let chart: Chart = new Chart({ axes: [ { enableAutoIntervalOnZooming: true }] }); chart.appendTo('#chart');
Font style for primaryYAxis Property:font

$("#container").ejChart({ axes: [ { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} }] }); 		Property:titleStyle

let chart: Chart = new Chart({ axes: [ { titleStyle: { } }] }); chart.appendTo('#chart');
Indexed for category axis Property:isIndexed

$("#container").ejChart({ axes: [ { isIndexed: true }] }); 		Property:isIndexed

let chart: Chart = new Chart({ axes: [ { isIndexed: true }] }); chart.appendTo('#chart');
Interval type for date time axis Property:intervalType

$("#container").ejChart({ axes: [ { intervalType}: 'Auto' } ] }); 		Property:intervalType

let chart: Chart = new Chart({ axes: [ { intervalType: 'Auto }] }); chart.appendTo('#chart');
Inversed axis Property:isInversed

$("#container").ejChart({ axes: [ { isInversed: true }] }); 		Property:isInversed

let chart: Chart = new Chart({ axes: [ { isInversed: true }] }); chart.appendTo('#chart');
Custom label format Property:labelFormat

$("#container").ejChart({ axes: [ { labelFormat: '{value}K' }] }); 		Property:labelFormat

let chart: Chart = new Chart({ axes: [ { labelFormat: '{value}K' }] }); chart.appendTo('#chart');
labelIntersectAction Property:labelIntersectAction

$("#container").ejChart({ axes: [ { labelIntersectAction: 'trim' }] }); 		Property:labelIntersectAction

let chart: Chart = new Chart({ axes: [ { labelIntersectAction: 'Trim' }] }); chart.appendTo('#chart');
labelPosition Property:labelPosition

$("#container").ejChart({ axes: [ { labelPosition: 'inside' }] }); 		Property:labelPosition

let chart: Chart = new Chart({ axes: [ { labelPosition: 'Inside' }] }); chart.appendTo('#chart');
labelPlacement for category axis Property:labelPlacement

$("#container").ejChart({ axes: [ { labelPlacement: 'onTicks' }] }); 		Property:labelPlacement

let chart: Chart = new Chart({ axes: [ { labelPlacement: 'OnTicks' }] }); chart.appendTo('#chart');
Axis label alignment Property:alignment

$("#container").ejChart({ axes: [ { alignment: 'center' }] }); 		Not Applicable
Rotation of axis labels Property:labelRotation

$("#container").ejChart({ axes: [ { labelRotation: 45 }] }); 		Property:labelRotation

let chart: Chart = new Chart({ axes: [ { labelRotation: 45 }] }); chart.appendTo('#chart');
Log base value for logarithmic axis Property:logBase

$("#container").ejChart({ axes: [ { logBase: 10 }] }); 		Property:labelRotation

let chart: Chart = new Chart({ axes: [ { logBase: 10 }] }); chart.appendTo('#chart');
Major grid line Property:majorGridLines.visible

$("#container").ejChart({ axes: [ { majorGridLines: { visible: true} }] }); 		Not Applicable
Width of MajorGridLines Property:majorGridLines.width

$("#container").ejChart({ axes: [ { majorGridLines: { width: 2} }] }); 		Property:majorGridLines.width

let chart: Chart = new Chart({ axes: [ { majorGridLines: { width: 2} }] }); chart.appendTo('#chart');
Color of MajorGridLines Property:majorGridLines.color

$("#container").ejChart({ axes: [ { majorGridLines: { color: 'black' } }] }); 		Property:majorGridLines.color

let chart: Chart = new Chart({ axes: [ { majorGridLines: { color: 'black' } }] }); chart.appendTo('#chart');
DashArray of MajorGridLines Property:majorGridLines.dashArray

$("#container").ejChart({ axes: [ { majorGridLines: { dashArray: 'black' } }] }); 		Property:majorGridLines.dashArray

let chart: Chart = new Chart({ axes: [ { majorGridLines: { dashArray: 'black' } }] }); chart.appendTo('#chart');
Opacity of major grid line Property:majorGridLines.opacity

$("#container").ejChart({ axes: [ { majorGridLines: { opacity: true} }] }); 		Not Applicable
Major Tick line Property:majorTickLines.visible

$("#container").ejChart({ axes: [ { majorTickLines: { visible: true} }] }); 		Not Applicable
Width of MajorTickLines Property:majorTickLines.width

$("#container").ejChart({ axes: [ { majorTickLines: { width: 2} }] }); 		Property:majorTickLines.width

let chart: Chart = new Chart({ axes: [ { majorTickLines: { width: 2} }] }); chart.appendTo('#chart');
Height of MajorTickLines Property:majorTickLines.size

$("#container").ejChart({ axes: [ { majorTickLines: { size: 2} }] }); 		Property:majorTickLines.height

let chart: Chart = new Chart({ axes: [ { majorTickLines: { height: 2} }] }); chart.appendTo('#chart');
Color of MajorTickLines Property:majorTickLines.color

$("#container").ejChart({ axes: [ { majorTickLines: { color: 'black' } }] }); 		Property:majorTickLines.color

let chart: Chart = new Chart({ axes: [ { majorTickLines: { color: 'black' } }] }); chart.appendTo('#chart');
Opacity of major Tick line Property:majorTickLines.opacity

$("#container").ejChart({ axes: [ { majorTickLines: { opacity: true} }] }); 		Not Applicable
maximum labels of primaryYAxis Property:maximumLabels

$("#container").ejChart({ axes: [ { maximumLabels: 5 }] }); 		Property:maximumLabels

let chart: Chart = new Chart({ axes: [ { maximumLabels: 4 }] }); chart.appendTo('#chart');
maximum labels width of primaryYAxis to trim Property:maximumLabelWidth

$("#container").ejChart({ axes: [ { maximumLabelWidth: 40 }] }); 		Property:maximumLabelWidth

let chart: Chart = new Chart({ axes: [ { maximumLabelWidth: 4 }] }); chart.appendTo('#chart');
minor grid line Property:minorGridLines.visible

$("#container").ejChart({ axes: [ { minorGridLines: { visible: true} }] }); 		Not Applicable
Width of minorGridLines Property:minorGridLines.width

$("#container").ejChart({ axes: [ { minorGridLines: { width: 2} }] }); 		Property:minorGridLines.width

let chart: Chart = new Chart({ axes: [ { minorGridLines: { width: 2} }] }); chart.appendTo('#chart');
Color of minorGridLines Property:minorGridLines.color

$("#container").ejChart({ axes: [ { minorGridLines: { color: 'black' } }] }); 		Property:minorGridLines.color

let chart: Chart = new Chart({ axes: [ { minorGridLines: { color: 'black' } }] }); chart.appendTo('#chart');
DashArray of minorGridLines Property:minorGridLines.dashArray

$("#container").ejChart({ axes: [ { minorGridLines: { dashArray: 'black' } }] }); 		Property:minorGridLines.dashArray

let chart: Chart = new Chart({ axes: [ { minorGridLines: { dashArray: 'black' } }] }); chart.appendTo('#chart');
Opacity of minor grid line Property:minorGridLines.opacity

$("#container").ejChart({ axes: [ { minorGridLines: { opacity: true} }] }); 		Not Applicable
minor Tick line Property:minorTickLines.visible

$("#container").ejChart({ axes: [ { minorTickLines: { visible: true} }] }); 		Not Applicable
Width of minorTickLines Property:minorTickLines.width

$("#container").ejChart({ axes: [ { minorTickLines: { width: 2} }] }); 		Property:minorTickLines.width

let chart: Chart = new Chart({ axes: [ { minorTickLines: { width: 2} }] }); chart.appendTo('#chart');
Height of minorTickLines Property:minorTickLines.size

$("#container").ejChart({ axes: [ { minorTickLines: { size: 2} }] }); 		Property:minorTickLines.height

let chart: Chart = new Chart({ axes: [ { minorTickLines: { height: 2} }] }); chart.appendTo('#chart');
Color of minorTickLines Property:minorTickLines.color

$("#container").ejChart({ axes: [ { minorTickLines: { color: 'black' } }] }); 		Property:minorTickLines.color

let chart: Chart = new Chart({ axes: [ { minorTickLines: { color: 'black' } }] }); chart.appendTo('#chart');
Opacity of minor Tick line Property:minorTickLines.opacity

$("#container").ejChart({ axes: [ { minorTickLines: { opacity: true} }] }); 		Not Applicable
Minor ticks per interval of primaryYAxis Property:minorTicksPerInterval

$("#container").ejChart({ axes: [ { minorTicksPerInterval: 4 }] }); 		Property:minorTickLines.color

let chart: Chart = new Chart({ axes: [ { minorTicksPerInterval: 4 }] }); chart.appendTo('#chart');
name of the primaryYAxis Property:name

$("#container").ejChart({ axes: [ { name: 'primaryYAxis' }] }); 		Property:name

let chart: Chart = new Chart({ axes: [ { name: 'primaryYAxis' }] }); chart.appendTo('#chart');
Orientation of primaryYAxis Property:orientation

$("#container").ejChart({ axes: [ { orientation: 'Vertical' }] }); 		Not Applicable
Plot offset for primaryYAxis Property:plotOffset

$("#container").ejChart({ axes: [ { plotOffset: 0 }] }); 		Property:plotOffset

let chart: Chart = new Chart({ axes: [ { plotOffset: 0 }] }); chart.appendTo('#chart');
minimum for primaryYAxis Property:range.minimum

$("#container").ejChart({ axes: [ { range: { minimum: 10 }}] }); 		Property:minimum

let chart: Chart = new Chart({ axes: [ { minimum: 23 }] }); chart.appendTo('#chart');
maximum for primaryYAxis Property:range.maximum

$("#container").ejChart({ axes: [ { range: { maximum: 10 }}] }); 		Property:maximum

let chart: Chart = new Chart({ axes: [ { maximum: 23 }] }); chart.appendTo('#chart');
interval for primaryYAxis Property:range.interval

$("#container").ejChart({ axes: [ { range: { interval: 1 }}] }); 		Property:interval

let chart: Chart = new Chart({ axes: [ { interval: 2 }] }); chart.appendTo('#chart');
RangePadding for primaryYAxis Property:rangePadding

$("#container").ejChart({ axes: [ { rangePadding: 'None' }}] }); 		Property:rangePadding

let chart: Chart = new Chart({ axes: [ { rangePadding: 'None' }] }); chart.appendTo('#chart');
Rounding Places in primaryYAxis Property:roundingPlaces

$("#container").ejChart({ axes: [ { roundingPlaces: 3 }] }); 		Property:labelFormat

let chart: Chart = new Chart({ axes: [ { labelFormat: 'n3' }] }); chart.appendTo('#chart');
ScrollBar settings of primaryYAxis Property:scrollbarSettings

$("#container").ejChart({ axes: [ { scrollbarSettings : { } }] }); 		Not Applicable
TickPosition in primaryYAxis Property:tickLinesPosition

$("#container").ejChart({ axes: [ { tickLinesPosition: 'Inside' }] }); 		Property:tickPosition

let chart: Chart = new Chart({ axes: [ { tickPosition: 'Inside' }] }); chart.appendTo('#chart');
valueType of primaryYAxis Property:valueType

$("#container").ejChart({ axes: [ { valueType: 'DateTime' }] }); 		Property:valueType

let chart: Chart = new Chart({ axes: [ { valueType: 'DateTime' }] }); chart.appendTo('#chart');
visible of primaryYAxis Property:visible

$("#container").ejChart({ axes: [ { visible: true }] }); 		Property:visible

let chart: Chart = new Chart({ axes: [ { visible: true }] }); chart.appendTo('#chart');
zoomFactor of primaryYAxis Property:zoomFactor

$("#container").ejChart({ axes: [ { zoomFactor: 0.3 }] }); 		Property:zoomFactor

let chart: Chart = new Chart({ axes: [ { zoomFactor: 0.3 }] }); chart.appendTo('#chart');
zoomPosition of primaryYAxis Property:zoomPosition

$("#container").ejChart({ axes: [ { zoomPosition: 0.3 }] }); 		Property:zoomPosition

let chart: Chart = new Chart({ axes: [ { zoomPosition: 0.3 }] }); chart.appendTo('#chart');
labelBorder of primaryYAxis Property:labelBorder

$("#container").ejChart({ axes: [ { labelBorder: { color: 'red', width: 2} }] }); 		Property:border

let chart: Chart = new Chart({ axes: [ { border: { color: 'red', width: 3 } }] }); chart.appendTo('#chart');
title of primaryYAxis Property:title.text

$("#container").ejChart({ axes: [ { title: { text: 'Chart title' } }] }); 		Property:title

let chart: Chart = new Chart({ axes: [ { title: 'Chart title' }] }); chart.appendTo('#chart');
StripLine of primaryYAxis Property:stripLine

$("#container").ejChart({ axes: [ { stripLine: [] }] }); 		Property:stripLines

let chart: Chart = new Chart({ axes: [ { stripLines: [] }] }); chart.appendTo('#chart');
Multilevel labels of axes Property:multiLevelLabels

$("#container").ejChart({ axes: [ { multiLevelLabels: [] }] }); 		Property:multiLevelLabels

let chart: Chart = new Chart({ axes: [ { stripLines: [] }] }); chart.appendTo('#chart');
skeleton for an axes Not Applicable Property:skeleton

let chart: Chart = new Chart({ axes: [ { skeleton: 'yMd' }] }); chart.appendTo('#chart');
skeleton type for an axes Not Applicable Property:skeletonType

let chart: Chart = new Chart({ axes: [ { skeletonType: 'DateTime' }] }); chart.appendTo('#chart');

Rows

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

$("#chart").ejChart({ rowDefinitions: []; }); 		Property:rows

let chart: Chart = new Chart({ rows: []; }); chart.appendTo('#chart');
unit Property:unit

$("#container").ejChart({ rowDefinitions :[{unit : "percentage"}] }); 		Not Applicable
height of rows in chart Property:rowHeight

$("#chart").ejChart({ rowDefinitions: [{ rowHeight: '50%'}]; }); 		Property:height

let chart: Chart = new Chart({ rows: [ { height: '300'}]; }); chart.appendTo('#chart');
Line customization Property:lineColor, lineWidth

$("#chart").ejChart({ rowDefinitions: [{ rowHeight: '50%', lineColor: 'brown', lineWidth: 2}]; }); 		Property:border

let chart: Chart = new Chart({ rows: [ { height: '300', border: { width: 2, color: 'brown'}}]; }); chart.appendTo('#chart');

Series

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

$("#chart").ejChart({ series: [{bearFillColor: 'red' }]; }); 		Property:bearFillColor

let chart: Chart = new Chart({ series: [{bearFillColor: 'red' }]; }); chart.appendTo('#chart');
Border Property:border

$("#chart").ejChart({ series: [{ border: { color: 'red', width: 2, dashArray: '10, 5' } }]; }); 		Property:rows

let chart: Chart = new Chart({ series: [{ border: { color: 'red', width: 2} }]; }); chart.appendTo('#chart');
BoxPlotMode Property:boxPlotMode

$("#chart").ejChart({ series: [{ boxPlotMode: 'inclusive' }]; }); 		Property:rows

let chart: Chart = new Chart({ series: [{ boxPlotMode: 'Inclusive' }]; }); chart.appendTo('#chart');
Minimum radius of Bubble series Property:bubbleOptions.minRadius

$("#chart").ejChart({ series: [{ bubbleOptions: { minRadius: 2} }]; }); 		Property:minRadius

let chart: Chart = new Chart({ series: [{ minRadius: 2 }]; }); chart.appendTo('#chart');
Maximum radius of Bubble series Property:bubbleOptions.maxRadius

$("#chart").ejChart({ series: [{ bubbleOptions: { maxRadius: 10 } }]; }); 		Property:maxRadius

let chart: Chart = new Chart({ series: [{ maxRadius: 2 }]; }); chart.appendTo('#chart');
bullFillColor Property:bullFillColor

$("#chart").ejChart({ series: [{bullFillColor: 'red' }]; }); 		Property:bullFillColor

let chart: Chart = new Chart({ series: [{bullFillColor: 'red' }]; }); chart.appendTo('#chart');
Cardinal spline tension for spline series Property:cardinalSplineTension

$("#chart").ejChart({ series: [{ cardinalSplineTension: 0.5 }]; }); 		Property:cardinalSplineTension

let chart: Chart = new Chart({ series: [{ cardinalSplineTension: 0.5 }]; }); chart.appendTo('#chart');
Column Width for rectangle series Property:columnWidth

$("#chart").ejChart({ series: [{ columnWidth: 0.5 }]; }); 		Property:columnWidth

let chart: Chart = new Chart({ series: [{ columnWidth: 0.5 }]; }); chart.appendTo('#chart');
Column spacing for rectangle series Property:columnSpacing

$("#chart").ejChart({ series: [{ columnSpacing: 0.5 }]; }); 		Property:columnSpacing

let chart: Chart = new Chart({ series: [{ columnSpacing: 0.5 }]; }); chart.appendTo('#chart');
Topleft radius for rectangle series Property:cornerRadius.topLeft

$("#chart").ejChart({ series: [{ topLeft: 0 }]; }); 		Property:cornerRadius.topLeft

let chart: Chart = new Chart({ series: [{ topLeft: 0 }]; }); chart.appendTo('#chart');
topRight radius for rectangle series Property:cornerRadius.topRight

$("#chart").ejChart({ series: [{ topRight: 0 }]; }); 		Property:cornerRadius.topRight

let chart: Chart = new Chart({ series: [{ topRight: 0 }]; }); chart.appendTo('#chart');
bottomRight radius for rectangle series Property:cornerRadius.bottomRight

$("#chart").ejChart({ series: [{ bottomRight: 0 }]; }); 		Property:cornerRadius.bottomRight

let chart: Chart = new Chart({ series: [{ bottomRight: 0 }]; }); chart.appendTo('#chart');
bottomLeft radius for rectangle series Property:cornerRadius.bottomLeft

$("#chart").ejChart({ series: [{ bottomLeft: 0 }]; }); 		Property:cornerRadius.bottomLeft

let chart: Chart = new Chart({ series: [{ bottomLeft: 0 }]; }); chart.appendTo('#chart');
DashArray property Property:dashArray

$("#chart").ejChart({ series: [{ dashArray: '10, 5' }]; }); 		Property:dashArray

let chart: Chart = new Chart({ series: [{ dashArray: '10, 5' }]; }); chart.appendTo('#chart');
DataSource for series Property:dataSource

$("#chart").ejChart({ series: [{ dataSource: [] }]; }); 		Property:dashArray

let chart: Chart = new Chart({ series: [{ dataSource: [] }]; }); chart.appendTo('#chart');
Draw type for Polar series Property:drawType

$("#chart").ejChart({ series: [{ drawType: 'Line' }]; }); 		Property:drawType

let chart: Chart = new Chart({ series: [{ drawType: 'Line' }]; }); chart.appendTo('#chart');
EmptyPointSettings for series Property:emptyPointSettings.visible

$("#chart").ejChart({ series: [{ emptyPointSettings: { visible: false } }]; }); 		Not Applicable
Empty Point Display mode Property:emptyPointSettings.displayMode

$("#chart").ejChart({ series: [{ displayMode: 'gap' }]; }); 		Property:emptyPointSettings.displayMode

let chart: Chart = new Chart({ series: [{ displayMode: 'Average' }]; }); chart.appendTo('#chart');
Empty Point color Property:emptyPointSettings.color

$("#chart").ejChart({ series: [{ color: 'red' }]; }); 		Property:emptyPointSettings.fill

let chart: Chart = new Chart({ series: [{ fill: 'red' }]; }); chart.appendTo('#chart');
Empty Point Border Property:emptyPointSettings.border

$("#chart").ejChart({ series: [{ emptyPointSettings: { color: 'red', width: 2 }]; }); 		Property:fill

let chart: Chart = new Chart({ series: [{ emptyPointSettings: { color: 'red', width: 2 }]; }); chart.appendTo('#chart');
Enable animation for series Property:enableAnimation

$("#chart").ejChart({ series: [{ enableAnimation: true }]; }); 		Property:animation.enable

let chart: Chart = new Chart({ series: [ animation: { enable: false }]; }); chart.appendTo('#chart');
Animation duration for series Property:animationDuration

$("#chart").ejChart({ series: [{ animationDuration: 1000 }]; }); 		Property:animation.duration

let chart: Chart = new Chart({ series: [ animation: { duration: 1000 }]; }); chart.appendTo('#chart');
Animation delay for series Not Applicable Property:animation.duration

let chart: Chart = new Chart({ series: [ animation: { delay: 100 }]; }); chart.appendTo('#chart');
Drag settings for series Property:dragSettings

$("#chart").ejChart({ series: [{ dragSettings: { mode: 'X' } }]; }); 		Not Applicable
Errorbar settings for series Property:errorBarSettings

$("#chart").ejChart({ series: [{ errorBarSettings: { } }]; }); 		Property:errorBarSettings

let chart: Chart = new Chart({ series: [ {errorBarSettings: { }}]; });
Closed series Property:isClosed

$("#chart").ejChart({ series: [{ isClosed: true }]; }); 		Property:isClosed

let chart: Chart = new Chart({ series: [ { isClosed: true }]; });
Stacking Property for series Property:isStacking

$("#chart").ejChart({ series: [{ isStacking: true }]; }); 		Not Applicable
Line cap for series Property:lineCap

$("#chart").ejChart({ series: [{ lineCap: 'butt' }]; }); 		Not Applicable
Line join for series Property:lineCap

$("#chart").ejChart({ series: [{ lineJoin: 'round' }]; }); 		Not Applicable
Opacity for series Property:opacity

$("#chart").ejChart({ series: [{ opacity: 0.7 }]; }); 		Property:errorBarSettings

let chart: Chart = new Chart({ series: [ { opacity: 0.7 }]; });
Outlier settings of series Property:outLierSettings

$("#chart").ejChart({ series: [{ outLierSettings: { shape: 'rectangle' , size: { height: 30, width: 20}} }]; }); 		Not Applicable
Palette Property:palette

$("#chart").ejChart({ series: [{ palette: "ColorFieldName" }]; }); 		Property:pointColorMapping

let chart: Chart = new Chart({ series: [ { pointColorMapping: 'color' }]; }); chart.appendTo('#chart);
Positive fill for waterfall series Property:positiveFill

$("#chart").ejChart({ series: [{ positiveFill: "red" }]; }); 		Property:pointColorMapping

let chart: Chart = new Chart({ series: [ { pointColorMapping: 'color' }]; }); chart.appendTo('#chart);
Show average value in box and whisker series Property:showMedian

$("#chart").ejChart({ series: [{ showMedian: true }]; }); 		Property:pointColorMapping

let chart: Chart = new Chart({ series: [ { showMean: false }]; }); chart.appendTo('#chart);
To group the series of stacking collection. Property:stackingGroup

$("#chart").ejChart({ series: [{ stackingGroup: 'group' }]; }); 		Property:stackingGroup

let chart: Chart = new Chart({ series: [ { stackingGroup: 'group' }]; }); chart.appendTo('#chart);
Specifies the type of the series to render in chart. Property:type

$("#chart").ejChart({ series: [{ type: 'Line' }]; }); 		Property:type

let chart: Chart = new Chart({ series: [ { type: 'Line' }]; }); chart.appendTo('#chart);
Defines the visibility of the series. Property:visibility

$("#chart").ejChart({ series: [{ visibility: true }]; }); 		Property:visible

let chart: Chart = new Chart({ series: [ { visible: true }]; }); chart.appendTo('#chart);
Enables or disables the visibility of legend item. Property:visibleOnLegend

$("#chart").ejChart({ series: [{ visibleOnLegend : true }]; }); 		Property:toggleVisibility

let chart: Chart = new Chart({ legendSettings: [ { toggleVisibility: true }]; }); chart.appendTo('#chart);
Specifies the different types of spline curve. Property:splineType

$("#chart").ejChart({ series: [{ splineType : 'Natural' }]; }); 		Property:splineType

let chart: Chart = new Chart({ legendSettings: [ { splineType: 'Natural' }]; }); chart.appendTo('#chart);
Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection. Property:xAxisName

$("#chart").ejChart({ series: [{ xAxisName : 'secondaryXAxis' }]; }); 		Property:xAxisName

let chart: Chart = new Chart({ series: [ { xAxisName: 'secondaryXAxis' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains x value for the series. Property:xName

$("#chart").ejChart({ series: [{ xName : 'x' }]; }); 		Property:xName

let chart: Chart = new Chart({ series: [ { xName: 'x' }]; }); chart.appendTo('#chart);
Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection. Property:yAxisName

$("#chart").ejChart({ series: [{ yAxisName : 'secondaryYAxis' }]; }); 		Property:yAxisName

let chart: Chart = new Chart({ series: [ { yAxisName: 'secondaryYAxis' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains y value for the series. Property:yName

$("#chart").ejChart({ series: [{ yName : 'y' }]; }); 		Property:yName

let chart: Chart = new Chart({ series: [ { yName: 'y' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains high value for the series. Property:high

$("#chart").ejChart({ series: [{ high : 'y' }]; }); 		Property:high

let chart: Chart = new Chart({ series: [ { high: 'y' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains low value for the series. Property:low

$("#chart").ejChart({ series: [{ low : 'y' }]; }); 		Property:low

let chart: Chart = new Chart({ series: [ { low: 'y' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains close value for the series. Property:close

$("#chart").ejChart({ series: [{ close : 'y' }]; }); 		Property:close

let chart: Chart = new Chart({ series: [ { close: 'y' }]; }); chart.appendTo('#chart);
Name of the property in the datasource that contains open value for the series. Property:open

$("#chart").ejChart({ series: [{ open : 'y' }]; }); 		Property:open

let chart: Chart = new Chart({ series: [ { open: 'y' }]; }); chart.appendTo('#chart);
Option to add trendlines to chart. Property:trendLines

$("#chart").ejChart({ series: [{ trendLines : [{}] }]; }); 		Property:trendLines

let chart: Chart = new Chart({ series: [{ trendLines : [{}] }]; }); chart.appendTo('#chart);
Options for customizing the appearance of the series or data point while highlighting. Property:highlightSettings

$("#chart").ejChart({ series: [{ highlightSettings : {} }]; }); 		Not applicable.
Options for customizing the appearance of the series/data point on selection. Property:selectionSettings

$("#chart").ejChart({ series: [{ selectionSettings : {} }]; }); 		Not applicable.

marker

visibility of marker Property:visible

$("#chart").ejChart({ series: [{ marker: { visible: true } ]; }); 		Property:visible

let chart: Chart = new Chart({ series: [ { marker: { visible: false } }]; }); chart.appendTo('#chart);
Fill for marker Property:fill

$("#chart").ejChart({ series: [{ marker: { fill : 'red' } }]; }); 		Property:visible

let chart: Chart = new Chart({ series: [{ marker: { fill : 'red' } }]; }); chart.appendTo('#chart);
Opacity for marker Property:opacity

$("#chart").ejChart({ series: [{ marker: { opacity : 0.5 } }]; }); 		Property:opacity

let chart: Chart = new Chart({ series: [{ marker: { opacity : 0.5 } }]; }); chart.appendTo('#chart);
Shape of marker Property:shape

$("#chart").ejChart({ series: [{ marker: { shape : 'Circle' } }]; }); 		Property:shape

let chart: Chart = new Chart({ series: [{ marker: { shape : 'Triangle' } }]; }); chart.appendTo('#chart);
ImageUrl of marker Property:imageUrl

$("#chart").ejChart({ series: [{ marker: { imageUrl : '' } }]; }); 		Property:imageUrl

let chart: Chart = new Chart({ series: [{ marker: { imageUrl : '' } }]; }); chart.appendTo('#chart);
Border of marker Property:border

$("#chart").ejChart({ series: [{ marker: { border : { width: 2, color: 'red' } } }]; }); 		Property:shape

let chart: Chart = new Chart({ series: [{ marker: { border : { width: 2, color: 'red' } } }]; }); chart.appendTo('#chart);
Height of marker Property:size.height

$("#chart").ejChart({ series: [{ marker: { size: { height: 30} } }]; }); 		Property:height

let chart: Chart = new Chart({ series: [{ marker: { height: 25 } }]; }); chart.appendTo('#chart);
Width of marker Property:size.width

$("#chart").ejChart({ series: [{ marker: { size: { width: 30} } }]; }); 		Property:width

let chart: Chart = new Chart({ series: [{ marker: { width: 25 } }]; }); chart.appendTo('#chart);
Width of marker Property:size.width

$("#chart").ejChart({ series: [{ marker: { size: { width: 30} } }]; }); 		Property:width

let chart: Chart = new Chart({ series: [{ marker: { width: 25 } }]; }); chart.appendTo('#chart);
DataLabelSettings of marker Property:marker.dataLabel

$("#chart").ejChart({ series: [{ marker: {dataLabel: { } } }]; }); 		Property:marker.dataLabel

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { } } }]; }); chart.appendTo('#chart);
Visibility of dataLabel Property:dataLabel.visible

$("#chart").ejChart({ series: [{ marker: {dataLabel: { visible: true } } }]; }); 		Property:dataLabel.visible

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { visible: true } } }]; }); chart.appendTo('#chart);
Text mapping name of dataLabel Property:dataLabel.textMappingName

$("#chart").ejChart({ series: [{ marker: {dataLabel: { textMappingName: '' } } }]; }); 		Property:dataLabel.name

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { name: '' } } }]; }); chart.appendTo('#chart);
Fill color of data label Property:dataLabel.fill

$("#chart").ejChart({ series: [{ marker: {dataLabel: { fill: 'pink' } } }]; }); 		Property:dataLabel.fill

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { fill: 'pink' } } }]; }); chart.appendTo('#chart);
Opacity of data label Property:dataLabel.opacity

$("#chart").ejChart({ series: [{ marker: {dataLabel: { opacity: 0.6 } } }]; }); 		Property:dataLabel.fill

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { opacity: 0.4 } } }]; }); chart.appendTo('#chart);
Text position of data label Property:dataLabel.textPosition

$("#chart").ejChart({ series: [{ marker: {dataLabel: { textPosition: 'middle' } } }]; }); 		Property:dataLabel.position

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { position: 'Top' } } }]; }); chart.appendTo('#chart);
Alignment of data label Property:dataLabel.verticalAlignment

$("#chart").ejChart({ series: [{ marker: {dataLabel: { verticalAlignment: 'near' } } }]; }); 		Property:dataLabel.alignment

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { alignment: 'Near' } } }]; }); chart.appendTo('#chart);
Border of data label Property:dataLabel.border

$("#chart").ejChart({ series: [{ marker: {dataLabel: { border: { color: 'blue', width: 2, opacity: 0.4} } } }]; }); 		Property:dataLabel.alignment

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { border: { color: 'blue', width: 2 } } } }]; }); chart.appendTo('#chart);
Offset for data label Property:dataLabel.offset

$("#chart").ejChart({ series: [{ marker: {dataLabel: { offset: { x: 5, y: 6 }} } }]; }); 		Not Applicable
Margin of data label Property:dataLabel.border

$("#chart").ejChart({ series: [{ marker: {dataLabel: { margin: { top: 10, bottom: 10, left: 10, right: 10}} } }]; }); 		Property:dataLabel.margin

let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { margin: { top: 10, bottom: 10, left: 10, right: 10 } } } }]; }); chart.appendTo('#chart);
Font of data label Property:dataLabel.border

$("#chart").ejChart({ series: [{ marker: {dataLabel: { font: { fontFamily: 'SegoeUI', fontStyle: 'italic', fontWeight: '600', opacity: 0.5, size: 12, color: 'red' }} } }]; }); 		Property:dataLabel.margin

let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { font: { fontFamily: 'SegoeUI', fontStyle: 'italic', fontWeight: '600', opacity: 0.5, size: 12, color: 'red' }} } }]; }); chart.appendTo('#chart);
HTML template in dataLabel Property:dataLabel.template

$("#chart").ejChart({ series: [{ marker: {dataLabel: { template: '
Chart
' } } }]; }); 		Property:dataLabel.template

let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { template: '
Chart
' } } }]; }); chart.appendTo('#chart);
Rounded corner radius X Not Applicable Property:dataLabel.rx

let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { rx: 10 } } }]; }); chart.appendTo('#chart);
Rounded corner radius Y Not Applicable Property:dataLabel.ry

let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { ry: 10 } } }]; }); chart.appendTo('#chart);
Maximum Label width for data label Property:dataLabel.maximumLabelWidth

$("#chart").ejChart({ series: [{ marker: {dataLabel: { maximumLabelWidth: 20}} } }]; }); 		Not Applicable
Enable wrapping of text for data label Property:dataLabel.enableWrap

$("#chart").ejChart({ series: [{ marker: {dataLabel: { enableWrap: true }} } }]; }); 		Not Applicable
To show contrast color for data label Property:dataLabel.showContrastColor

$("#chart").ejChart({ series: [{ marker: {dataLabel: { showContrastColor: true }} } }]; }); 		Not Applicable
To show edge label for data label Property:dataLabel.showEdgeLabels

$("#chart").ejChart({ series: [{ marker: {dataLabel: { showEdgeLabels: true }} } }]; }); 		Not Applicable

TrendLines

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

$("#chart").ejChart({ series: [{ trendLines: []}] }); 		Property:series.trendLines

let chart: Chart = new Chart({ series: [ { trendLines: []}] }); chart.appendTo('#chart');
Visibility of trendline Property:trendLines.visibility

$("#chart").ejChart({ series: [{ trendLines: [ visibility: true ]}] }); 		Not applicable
Type of trendLine Property:trendLines.type

$("#chart").ejChart({ series: [{ trendLines: [type: 'linear' ]}] }); 		Property:trendLines.type

let chart: Chart = new Chart({ series: [ { trendLines: [ type: 'Polynomial']}] }); chart.appendTo('#chart');
Name of trendLine Property:trendLines.name

$("#chart").ejChart({ series: [{ trendLines: [ name: 'trendLine' ]}] }); 		Property:trendLines.name

let chart: Chart = new Chart({ series: [ { trendLines: [ name: 'trendLine']}] }); chart.appendTo('#chart');
Period of trendLine Property:trendLines.period

$("#chart").ejChart({ series: [{ trendLines: [ period: 45 ]}] }); 		Property:trendLines.period

let chart: Chart = new Chart({ series: [ { trendLines: [ period: 45]}] }); chart.appendTo('#chart');
Polynomial order for Polynomial type trendLines Property:trendLines.polynomialOrder

$("#chart").ejChart({ series: [{ trendLines: [ polynomialOrder: 3 ]}] }); 		Property:trendLines.polynomialOrder

let chart: Chart = new Chart({ series: [ { trendLines: [ polynomialOrder: 3]}] }); chart.appendTo('#chart');
Backward forecost for trendLines Property:trendLines.backwardforecast

$("#chart").ejChart({ series: [{ trendLines: [ backwardforecast: 3 ]}] }); 		Property:trendLines.backwardforecast

let chart: Chart = new Chart({ series: [ { trendLines: [ backwardforecast: 3]}] }); chart.appendTo('#chart');
Forward forecost for trendLines Property:trendLines.forwardForecast

$("#chart").ejChart({ series: [{ trendLines: [ forwardForecast: 3 ]}] }); 		Property:trendLines.forwardForecast

let chart: Chart = new Chart({ series: [ { trendLines: [ forwardForecast: 3]}] }); chart.appendTo('#chart');
Fill for trendLines Property:trendLines.fill

$("#chart").ejChart({ series: [{ trendLines: [ fill: '#EEFFCC' ]}] }); 		Property:trendLines.fill

let chart: Chart = new Chart({ series: [ { trendLines: [ fill: 'EEFFCC']}] }); chart.appendTo('#chart');
Width for trendLines Property:trendLines.width

$("#chart").ejChart({ series: [{ trendLines: [ width: 2 ]}] }); 		Property:trendLines.width

let chart: Chart = new Chart({ series: [ { trendLines: [ width: 2]}] }); chart.appendTo('#chart');
Intercept value for trendLines Property:trendLines.intercept

$("#chart").ejChart({ series: [{ trendLines: [ intercept: 2 ]}] }); 		Property:trendLines.intercept

let chart: Chart = new Chart({ series: [ { trendLines: [ intercept: 2]}] }); chart.appendTo('#chart');
Legend shape for trendLines Not Applicable Property:trendLines.legendShape

let chart: Chart = new Chart({ series: [ { trendLines: [ legendShape: 'Rectangle']}] }); chart.appendTo('#chart');
Animation settings for trendLines Not Applicable Property:trendLines.animation

let chart: Chart = new Chart({ series: [ { trendLines: [ animation: { enable: true }]}] }); chart.appendTo('#chart');
Marker settings for trendLines Not Applicable Property:trendLines.marker

let chart: Chart = new Chart({ series: [ { trendLines: [ {marker: { visible: true }}]}] }); chart.appendTo('#chart');
Tooltip for trendLines Property:trendLines.tooltip

$("#chart").ejChart({ series: [{ trendLines: [ { tooltip: { } } ]}] }); 		Property:trendLines.enableTooltip

let chart: Chart = new Chart({ series: [ { trendLines: [ {enableTooltip: true }]}] }); chart.appendTo('#chart');
DashArray for trendLines Property:trendLines.dashArray

$("#chart").ejChart({ series: [{ trendLines: [ { dashArray: '10, 5' } ]}] }); 		Not Applicable.
Visible on legend for trendLines Property:trendLines.visibleOnLegend

$("#chart").ejChart({ series: [{ trendLines: [ { visibleOnLegend: true } ]}] }); 		Not Applicable.

StripLines

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

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { visible: true }]} }); 		Property:primaryXAxis.stripLines

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { visible: true }]} }); chart.appendTo('#chart');
border for stripline Property:stripLines.borderColor

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { borderColor: 'pink' }]} }); 		Property:stripLines.border

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { border: { color: 'red', width: 2} }]} }); chart.appendTo('#chart');
Background color for stripline Property:stripLines.color

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { color: 'pink' }]} }); 		Property:stripLines.border

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { color: 'red'}]} }); chart.appendTo('#chart');
Start value for stripline Property:stripLines.start

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { start: 10 }]} }); 		Property:stripLines.start

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { start: 5}]} }); chart.appendTo('#chart');
End value for stripline Property:stripLines.end

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { end: 10 }]} }); 		Property:stripLines.end

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { end: 5}]} }); chart.appendTo('#chart');
StartfromAxis for stripline Property:stripLines.startFromAxis

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { startFromAxis: true }]} }); 		Property:stripLines.startFromAxis

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { startFromAxis: true}]} }); chart.appendTo('#chart');
Text in stripline Property:stripLines.text

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { text: 'StripLine; }]} }); 		Property:stripLines.text

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { text: 'stripline'}]} }); chart.appendTo('#chart');
Text alignment in stripline Property:stripLines.textAlignment

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { textAlignment: 'Far; }]} }); 		Property:stripLines.horizontalAlignment

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { horizontalAlignment: 'Far'}]} }); chart.appendTo('#chart');
Vertical Text alignment in stripline Not Applicable Property:stripLines.verticalAlignment

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { verticalAlignment: 'Far'}]} }); chart.appendTo('#chart');
Size of stripline Property:stripLines.width

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { width: 10; }]} }); 		Property:stripLines.size

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { size: 10 }]} }); chart.appendTo('#chart');
ZIndex of stripline Property:stripLines.zIndex

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { zIndex: 'Behind' }]} }); 		Property:stripLines.size

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { zIndex: 'Behind' }]} }); chart.appendTo('#chart');
Font style of stripline Property:stripLines.fontStyle

$("#chart").ejChart({ primaryXAxis: { stripLines: [ { fontStyle: {} }]} }); 		Property:stripLines.textStyle

let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { textStyle: {} }]} }); chart.appendTo('#chart');

Multilevel Labels

Behaviour API in Essential JS 1 API in Essential JS 2
Default behaviour for multilevelLabels Property:primaryXAxis.multilevelLabels

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { visible: true }]} }); 		Property:primaryXAxis.multilevelLabels

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { }]} }); chart.appendTo('#chart');
Default behaviour for multilevelLabels Property:primaryXAxis.multilevelLabels

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { visible: true }]} }); 		Property:primaryXAxis.multilevelLabels

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { }]} }); chart.appendTo('#chart');
Text alignment for multilevelLabels Property:multiLevelLabels.textAlignment

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { textAlignment: 'Near' }]} }); 		Property:multilevelLabels.alignment

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ {alignment: 'Near' }]} }); chart.appendTo('#chart');
Text overflow for multilevelLabels Property:multiLevelLabels.textOverFlow

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { textOverFlow: 'Trim' }]} }); 		Property:multiLevelLabels.overFlow

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ {overFlow: 'Trim' }]} }); chart.appendTo('#chart');
Border for multilevelLabels Property:multiLevelLabels.border

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { border: { width: 2, color: 'red', type: 'brace' } }]} }); 		Property:multiLevelLabels.border

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { border: { width: 2, color: 'red', type: 'brace' } }]} }); chart.appendTo('#chart');
Start value for label Property:multiLevelLabels.start

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { start: 45 } }]} }); 		Property:multiLevelLabels.categories.start

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { start: 45}] } }]} }); chart.appendTo('#chart');
End value for label Property:multiLevelLabels.start

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { end: 45 } }]} }); 		Property:multiLevelLabels.categories.end

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { end: 45}] } }]} }); chart.appendTo('#chart');
Text for label Property:multiLevelLabels.text

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { text: 'Start' } }]} }); 		Property:multiLevelLabels.categories.text

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { text: 'text' }] } }]} }); chart.appendTo('#chart');
maximum text width for label Property:multiLevelLabels.maximumTextWidth

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { maximumTextWidth: 10 } }]} }); 		Property:multiLevelLabels.categories.maximumTextWidth

let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { maximumTextWidth: 20 }] } }]} }); chart.appendTo('#chart');
level of labels Property:multiLevelLabels.level

$("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { level: 2 } }]} }); 		Not applicable. Categories are used

Methods

Behaviour API in Essential JS 1 API in Essential JS 2
animation for series Property:chart.animate

$("#chart").ejChart({ animate: () {

} });

Not applicable
Redraw for chart Property:chart.redraw

$("#chart").ejChart({ redraw: () {

} });

Property:chart.refresh()

let chart: Chart = new Chart({

}); chart.appendTo(‘#chart’); chart.width = ‘400’; chart.refresh();

Export Property:chart.export()

$("#chart").ejChart({ export: () {

} });

Property:chart.export()

let chart: Chart = new Chart({

}); chart.export(‘JPEG’, ‘chart’); chart.appendTo(‘#chart’);

Print Property:chart.print()

$("#chart").ejChart({ print: () {

} });

Property:chart.print()

let chart: Chart = new Chart({

}); chart.print(‘chart’); chart.appendTo(‘#chart’);

AddSeries Not Applicable Property:chart.addSeries()

let chart: Chart = new Chart({

}); chart.appendTo(‘#chart’); chart.addSeries();

RemoveSeries Not Applicable Property:chart.removeSeries()

let chart: Chart = new Chart({

}); chart.appendTo(‘#chart’); chart.removeSeries();

Events

Chart properties

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

$("#chart").ejChart({ annotationClick: () {

} });

Not applicable
Fires after animation Property:animationComplete

$("#chart").ejChart({ animationComplete: () {

} });

Property:animationComplete()

let chart: Chart = new Chart({ animationComplete: () => { } }); chart.appendTo('#chart');
Fires on axis label click Property:axisLabelClick

$("#chart").ejChart({ axisLabelClick: () {

} });

Not applicable
Fires before axis label render Property:axisLabelRendering

$("#chart").ejChart({ axisLabelRendering: () {

} });

Property:axisLabelRender()

let chart: Chart = new Chart({ axisLabelRender: () => { } }); chart.appendTo('#chart');
Fires on axis label mouseMove Property:axisLabelMouseMove

$("#chart").ejChart({ axisLabelMouseMove: () {

} });

Not applicable
Fires on axis label initialize Property:axisLabelInitialize

$("#chart").ejChart({ axisLabelInitialize: () {

} });

Not applicable
Fires before axis range calculation Property:axesRangeCalculate

$("#chart").ejChart({ axesRangeCalculate: () {

} });

Property:axisRangeCalculated()

let chart: Chart = new Chart({ axisRangeCalculated: () => { } }); chart.appendTo('#chart');
Fires on axis title rendering Property:axisTitleRendering

$("#chart").ejChart({ axisTitleRendering: () {

} });

Not applicable
Fires on after chart resize Property:afterResize

$("#chart").ejChart({ afterResize: () {

} });

Not applicable
Fires on before chart resize Property:beforeResize

$("#chart").ejChart({ beforeResize: () {

} });

Property:resized

let chart: Chart = new Chart({ resized: () => { } }); chart.appendTo('#chart');
Fires on chart click Property:chartClick

$("#chart").ejChart({ chartClick: () {

} });

Property:chartMouseClick

let chart: Chart = new Chart({ chartMouseClick: () => { } }); chart.appendTo('#chart');
Fires on chart mouse move Property:chartMouseMove

$("#chart").ejChart({ chartMouseMove: () {

} });

Property:chartMouseMove

let chart: Chart = new Chart({ chartMouseMove: () => { } }); chart.appendTo('#chart');
Fires on chart mouse leave Property:chartMouseLeave

$("#chart").ejChart({ chartMouseLeave: () {

} });

Property:chartMouseLeave

let chart: Chart = new Chart({ chartMouseLeave: () => { } }); chart.appendTo('#chart');
Fires on before chart double click Property:chartDoubleClick

$("#chart").ejChart({ chartDoubleClick: () {

} });

Not applicable
Fires on chart mouse up Not Applicable Property:chartmouseUp

let chart: Chart = new Chart({ chartmouseUp: () => { } }); chart.appendTo('#chart');
Fires on chart mouse down Not Applicable Property:chartmouseDown

let chart: Chart = new Chart({ chartmouseDown: () => { } }); chart.appendTo('#chart');
Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area Property:chartAreaBoundsCalculate

$("#chart").ejChart({ chartAreaBoundsCalculate: () {

} });

Not applicable
Fires when the dragging is started Property:dragStart

$("#chart").ejChart({ dragStart: () {

} });

Not applicable
Fires while dragging Property:dragging

$("#chart").ejChart({ dragging: () {

} });

Not applicable
Fires when the dragging is completed Property:dragEnd

$("#chart").ejChart({ dragEnd: () {

} });

Property:dragComplete

let chart: Chart = new Chart({ dragComplete: () => { } }); chart.appendTo('#chart');
Fires when chart is destroyed completely. Property:destroy

$("#chart").ejChart({ destroy: () {

} });

Not applicable
Fires after chart is created. Property:create

$("#chart").ejChart({ create: () {

} });

Property:loaded

let chart: Chart = new Chart({ loaded: () => { } }); chart.appendTo('#chart');
Fires before rendering the data labels. Property:displayTextRendering

$("#chart").ejChart({ displayTextRendering: () {

} });

Property:textRender

let chart: Chart = new Chart({ textRender: () => { } }); chart.appendTo('#chart');
Fires, when error bar is rendering. Property:errorBarRendering

$("#chart").ejChart({ errorBarRendering: () {

} });

Not applicable
Fires during the calculation of legend bounds. Property:legendBoundsCalculate

$("#chart").ejChart({ legendBoundsCalculate: () {

} });

Not applicable
Fires on clicking the legend item. Property:legendItemClick

$("#chart").ejChart({ legendItemClick: () { } }); 		Not applicable
Fires when moving mouse over legend item Property:legendItemMouseMove

$("#chart").ejChart({ legendItemMouseMove: () { } }); 		Not applicable
Fires before rendering the legend item. Property:legendItemRendering

$("#chart").ejChart({ legendItemRendering: () {

} });

Property:legendRender

let chart: Chart = new Chart({ legendRender: () => { } }); chart.appendTo('#chart');
Fires before loading the chart. Property:load

$("#chart").ejChart({ load: () {

} });

Property:load

let chart: Chart = new Chart({ load: () => { } }); chart.appendTo('#chart');
Fires, when multi level labels are rendering. Property:multiLevelLabelRendering

$("#chart").ejChart({ multiLevelLabelRendering: () {

} });

Property:axisMultiLabelRender

let chart: Chart = new Chart({ axisMultiLabelRender : () => { } }); chart.appendTo('#chart');
Fires on clicking a point in chart. Property:pointRegionClick

$("#chart").ejChart({ pointRegionClick: () {

} });

Property:pointClick

let chart: Chart = new Chart({ pointClick : () => { } }); chart.appendTo('#chart');
Fires when mouse is moved over a point. Property:pointRegionMouseMove

$("#chart").ejChart({ pointRegionMouseMove: () { } }); 		Property:pointMove

let chart: Chart = new Chart({ pointMove : () => { } }); chart.appendTo('#chart');
Fires before rendering chart. Property:preRender

$("#chart").ejChart({ preRender: () { } }); 		Not applicable
Fires when point render. Not Applicable Property:pointRender

let chart: Chart = new Chart({ pointRender : () => { } }); chart.appendTo('#chart');
Fires after selected the data in chart. Property:rangeSelected

$("#chart").ejChart({ rangeSelected: () { } }); 		Not applicable
Fires after selecting a series. Property:seriesRegionClick

$("#chart").ejChart({ seriesRegionClick: () { } }); 		Not applicable
Fires before rendering a series. Property:seriesRendering

$("#chart").ejChart({ seriesRendering: () {

} });

Property:seriesRender

let chart: Chart = new Chart({ seriesRender : () => { } }); chart.appendTo('#chart');
Fires before rendering the marker symbols. Property:symbolRendering

$("#chart").ejChart({ symbolRendering: () { } }); 		Not applicable
Fires before rendering the trendline Property:trendlineRendering

$("#chart").ejChart({ trendlineRendering: () { } }); 		Not applicable
Fires before rendering the Chart title. Property:titleRendering

$("#chart").ejChart({ titleRendering: () { } }); 		Not applicable
Fires before rendering the Chart sub title. Property:subTitleRendering

$("#chart").ejChart({ subTitleRendering: () { } }); 		Not applicable
Fires before rendering the tooltip. Property:toolTipInitialize

$("#chart").ejChart({ toolTipInitialize: () {

} });

Property:tooltipRender

let chart: Chart = new Chart({ tooltipRender : () => { } }); chart.appendTo('#chart');
Fires before rendering crosshair tooltip in axis Property:trackAxisToolTip

$("#chart").ejChart({ trackAxisToolTip: () { } }); 		Not applicable
Fires before rendering trackball tooltip. Property:trackToolTip

$("#chart").ejChart({ trackToolTip: () { } }); 		Not applicable
Event triggered when scroll starts. Property:scrollStart

$("#chart").ejChart({ scrollStart: () { } }); 		Property:scrollStart

let chart: Chart = new Chart({ scrollStart : () => { } }); chart.appendTo('#chart');
Event triggered when scroll ends. Property:scrollEnd

$("#chart").ejChart({ scrollEnd: () { } }); 		Property:scrollEnd

let chart: Chart = new Chart({ scrollEnd: () => { } }); chart.appendTo('#chart');
Event triggered when scroll changes. Property:scrollChange

$("#chart").ejChart({ scrollChange: () { } }); 		Property:scrollChange

let chart: Chart = new Chart({ scrollChange: () => { } }); chart.appendTo('#chart');
Fires while performing rectangle zooming in chart. Property:zoomComplete

$("#chart").ejChart({ zoomComplete: () { } }); 		Property:zoomComplete

let chart: Chart = new Chart({ zoomComplete: () => { } }); chart.appendTo('#chart');
Behaviour API in Essential JS 1 API in Essential JS 2
selected data index Property:selectedDataPointIndexes:

$("#chart").ejChart({ selectedDataPointIndexes: [ { seriesIndex: 0, pointIndex: 1}] }); 		Property:selectedDataIndexes

let chart: Chart = new Chart({ selectedDataIndexes: [ { series: 0, point: 1}] }); chart.appendTo('#chart');
sideBySideSeriesPlacement for column based series Property:sideBySideSeriesPlacement:

$("#chart").ejChart({ sideBySideSeriesPlacement }); 		Property:sideBySidePlacement

let chart: Chart = new Chart({ sideBySidePlacement: true }); chart.appendTo('#chart');
ZoomSettings Property:zooming:

$("#chart").ejChart({ zooming: { enable: true, enabledeferredZoom: true, enablePinch: true, enableMouseWheel: true, enableSrollBar: true, toolBarItems: [], type: 'X'

} });

Property:zoomSettings

let chart: Chart = new Chart({ zoomSettings: { enable: true, enablePinchZooming: true, enableDefferedZooming: true enableMouseWheelZooming: true, enableSelectionZooming: true, enableScrollBar: true } }); chart.appendTo('#chart');
Background color of the chart Property:background

$("#container").ejChart({ background: 'transparent' }); 		Property:background

let chart: Chart = new Chart({ background: '#EEFFCC' }); chart.appendTo('#chart');
URL of the image to be used as chart background. Property:backGroundImageUrl

$("#container").ejChart({ backGroundImageUrl : '../images/chart/wheat.png' }); 		Not Applicable
Customizing border of the chart Property:border

$("#container").ejChart({ border: { width: 2, color: '#CCEEFF', opacity: 0.5} }); 		Property:border

let chart: Chart = new Chart({ border: { width: 2, color: '#CCEEFF'} }); chart.appendTo('#chart');
This provides options for customizing export settings Property:exportSettings

$("#container").ejChart({ exportSettings: { filename : "chart", angle: '45' } }); 		Property:export()

let chart: Chart = new Chart({ border: { width: 2, color: '#CCEEFF'} }); chart.appendTo('#chart'); chart.export(type, fileName);
ChartArea customization Property:chartArea

$("#container").ejChart({ chartArea: { background: 'transparent', border: { opacity: 0.3, color: 'red', width: 2}} }); 		Property:chartArea

let chart: Chart = new Chart({ chartArea: { background: 'transparent', border: { width: 2, color: '#CCEEFF'} } }); chart.appendTo('#chart'); chart.export(type, fileName);
Previous
Next