Ej1 api migration in EJ2 JavaScript Chart control

8 May 202324 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 </br> </br> $("#chart").ejChart({ annotations: [{angle: 90}]; }); Property:annotations.rotation </br> </br> let chart: Chart = new Chart({ annotations: [{ rotation: 90}]; }); chart.appendTo('#chart');
annotations Property:annotations.content </br> </br> $("#chart").ejChart({ annotations: [{ content: '
Chart
'}]; });
Property:annotations.content </br> </br> let chart: Chart = new Chart({ annotations: [{ content: '
Chart
'}] }); chart.appendTo('#chart');
coordinate unit for annotation Property:annotations.coordinateUnit </br> </br> $("#container").ejChart({ annotations :[{ coordinateUnit :"pixels"}] }); Property:annotations.coordinateUnits </br> </br> let chart: Chart = new Chart({ annotations: [{ coordinateUnits: 'Pixel'}] }); chart.appendTo('#chart');
horizontalAlignment for annotation Property:annotations.horizontalAlignment </br> </br> $("#container").ejChart({ annotations :[{ horizontalAlignment :"middle"}] }); Property:annotations.horizontalAlignment </br> </br> let chart: Chart = new Chart({ annotations: [{ horizontalAlignment: 'Center'}] }); chart.appendTo('#chart');
margin for annotation Property:annotations.margin </br> </br> $("#container").ejChart({ annotations :[{ margin { right: 5, left: 5, top: 5, bottom: 5}}] }); Not applicable
Opacity for annotation Property:annotations.opacity </br> </br> $("#container").ejChart({ annotations :[{ opacity: 0.4 }] }); Not applicable
Region for annotation with respect to chart or series Property:annotations.region </br> </br> $("#container").ejChart({ annotations :[{ region :"chart"}] }); Property:annotations.region </br> </br> let chart: Chart = new Chart({ annotations: [{ region: 'Chart'}] }); chart.appendTo('#chart');
verticalAlignment for annotation Property:annotations.verticalAlignment </br> </br> $("#container").ejChart({ annotations :[{ verticalAlignment :"middle"}] }); Property:annotations.verticalAlignment </br> </br> let chart: Chart = new Chart({ annotations: [{ verticalAlignment: 'Center'}] }); chart.appendTo('#chart');
Visibility of annotations Property:annotations.visible </br> </br> $("#container").ejChart({ annotations :[{ visible: true }] }); Not applicable
X offset for annotation Property:annotations.x </br> </br> $("#container").ejChart({ annotations :[{ x :"100"}] }); Property:annotations.x </br> </br> let chart: Chart = new Chart({ annotations: [{ x: '100'}] }); chart.appendTo('#chart');
X axis name in which annotation to be rendered Property:annotations.xAxisName </br> </br> $("#container").ejChart({ annotations :[{ xAxisName :"xAxis"}] }); Property:annotations.xAxisName </br> </br> let chart: Chart = new Chart({ annotations: [{ xAxisName: 'xAxis'}] }); chart.appendTo('#chart');
Y offset for annotation Property:annotations.y </br> </br> $("#container").ejChart({ annotations :[{ y :"100"}] }); Property:annotations.y </br> </br> let chart: Chart = new Chart({ annotations: [{ y: '100'}] }); chart.appendTo('#chart');
Y axis name in which annotation to be rendered Property:annotations.yAxisName </br> </br> $("#container").ejChart({ annotations :[{ xAxisName :"yAxis"}] }); Property:annotations.yAxisName </br> </br> 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 </br> </br> $("#chart").ejChart({ columnDefinitions: []; }); Property:columns </br> </br> let chart: Chart = new Chart({ columns: []; }); chart.appendTo('#chart');
unit Property:unit </br> </br> $("#container").ejChart({ columnDefinitions :[{unit : "percentage"}] }); Not Applicable
width of columns in chart Property:columnWidth </br> </br> $("#chart").ejChart({ columnDefinitions: [{ columnWidth: '50%'}]; }); Property:width </br> </br> let chart: Chart = new Chart({ columns: [ { width: '300'}]; }); chart.appendTo('#chart');
Line customization Property:lineColor, lineWidth </br> </br> $("#chart").ejChart({ columnDefinitions: [{ columnWidth: '50%', lineColor: 'brown', lineWidth: 2}]; }); Property:border </br> </br> 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 </br> </br> $("#container").ejChart({ commonSeriesOptions: { } }); Not Applicable

Crosshair

## 3D chart
Behaviour API in Essential JS 1 API in Essential JS 2
crosshair Property:visible </br> </br> $("#container").ejChart({ crosshair: { visible: true} }); Property:enable </br> </br> let chart: Chart = new Chart({ crosshair: { enable: false } }); chart.appendTo('#chart');
trackballTooltipSettings Property:trackballTooltipSettings </br> </br> $("#container").ejChart({ crosshair : { trackballTooltipSettings : { border : { width :2 } } } }); Not applicable
marker Property:marker </br> </br> $("#container").ejChart({ crosshair : { marker : { border : { width :2 } } } }); Not applicable
crosshair line style Property:line </br> </br> $("#container").ejChart({ crosshair : { line: { width: 2, color: 'red' } } }); let chart: Chart = new Chart({ crosshair: { border: { width: 2, color: 'black' }} });
type Property:type </br> </br> $("#container").ejChart({ crosshair : { type: 'trackball' } }); Not applicable
Behaviour API in Essential JS 1 API in Essential JS 2
3d chart Property:enable3D </br> </br> $("#container").ejChart({ enable3D: true }); Not applicable
Rotation of 3d chart Property:enableRotation </br> </br> $("#container").ejChart({ enableRotation: false }); Not applicable
depth Property:depth </br> </br> $("#container").ejChart({ depth: 45 }); Not applicable
## Canvas rendering
Behaviour API in Essential JS 1 API in Essential JS 2
canvas rendering Property:enableCanvasRendering </br> </br> $("#container").ejChart({ enableCanvasRendering: true }); Not applicable
## Indicators
Behaviour API in Essential JS 1 API in Essential JS 2
Type of Indicator Property:type </br> </br> $("#container").ejChart({ indicators: [ { type: 'Sma' }] }); Property:type </br> </br> let chart: Chart = new Chart({ indicators: [ { type: 'Sma' }] });
Period for indicator Property:period </br> </br> $("#container").ejChart({ indicators: [ { period: 14 }] }); Property:type </br> </br> let chart: Chart = new Chart({ indicators: [ { period: 14 }] });
Period for indicator Property:period </br> </br> $("#container").ejChart({ indicators: [ { period: 14 }] }); Property:period </br> </br> let chart: Chart = new Chart({ indicators: [ { period: 14 }] });
%K value in stochastic indicator Property:kPeriod </br> </br> $("#container").ejChart({ indicators: [ { kPeriod: 14 }] }); Property:kPeriod </br> </br> let chart: Chart = new Chart({ indicators: [ { kPeriod: 14 }] });
%D value in stochastic indicator Property:dPeriod </br> </br> $("#container").ejChart({ indicators: [ { dPeriod: 3 }] }); Property:dPeriod </br> </br> let chart: Chart = new Chart({ indicators: [ { dPeriod: 3 }] });
Shows overSold/overBought values Not applicable Property:showZones </br> </br> let chart: Chart = new Chart({ indicators: [ { showZones: true }] });
Overbought value for RSI and stochastic indicator Not applicable Property:overBought </br> </br> let chart: Chart = new Chart({ indicators: [ { overBought: 80 }] });
Oversold value for RSI and stochastic indicator Not applicable Property:overSold </br> </br> let chart: Chart = new Chart({ indicators: [ { overSold: 20 }] });
Standard deviation for Bollingerbands Property:standardDeviations </br> </br> $("#container").ejChart({ indicators: [ { standardDeviations: 2 }] }); Property:standardDeviation </br> </br> let chart: Chart = new Chart({ indicators: [ { standardDeviation: 2 }] });
standard deviation Property:standardDeviations </br> </br> $("#container").ejChart({ indicators: [ { standardDeviations: 2 }] }); Property:standardDeviation </br> </br> let chart: Chart = new Chart({ indicators: [ { standardDeviation: 2 }] });
Field for indicator Property:field </br> </br> $("#container").ejChart({ indicators: [ { field: 'Close' }] }); Property:field </br> </br> let chart: Chart = new Chart({ indicators: [ { field: 'Close' }] });
Slow period for MACD indicator Property:shortPeriod </br> </br> $("#container").ejChart({ indicators: [ { shortPeriod: 12 }] }); Property:slowPeriod </br> </br> let chart: Chart = new Chart({ indicators: [ { slowPeriod: 12 }] });
Fast period for MACD indicator Property:longPeriod </br> </br> $("#container").ejChart({ indicators: [ { longPeriod: 26 }] }); Property:fastPeriod </br> </br> let chart: Chart = new Chart({ indicators: [ { fastPeriod: 26 }] });
Line style for MACD indicator Property:macdLine </br> </br> $("#container").ejChart({ indicators: [ { macdLine: { width: 2, fill: 'red' } }] }); Property:fastPeriod </br> </br> let chart: Chart = new Chart({ indicators: [ { macdLine: { width: 2, color: 'red' } }] });
Type of MACD indicator Property:macdType </br> </br> $("#container").ejChart({ indicators: [ { macdType: 'both' }] }); Property:fastPeriod </br> </br> let chart: Chart = new Chart({ indicators: [ { macdType: 'Both' }] });
Color of the positive bars in Macd indicators Not applicable Property:macdPositiveColor </br> </br> let chart: Chart = new Chart({ indicators: [ { macdPositiveColor: 'red' }] });
Color of the negative bars in Macd indicators Not applicable Property:macdNegativeColor </br> </br> let chart: Chart = new Chart({ indicators: [ { macdNegativeColor: 'red' }] });
Color for Bollinger bands Not applicable Property:bandColor </br> </br> let chart: Chart = new Chart({ indicators: [ { bandColor: 'red' }] });
Appearance of upper line in indicator Property:upperLine </br> </br> $("#container").ejChart({ indicators: [ { upperLine: { fill: '#EECCAA', width: 2 } }] }); Property:upperLine </br> </br> let chart: Chart = new Chart({ indicators: [ { upperLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }] });
Appearance of lower line in indicator Property:lowerLine </br> </br> $("#container").ejChart({ indicators: [ { lowerLine: { fill: '#EECCAA', width: 2 } }] }); Property:lowerLine </br> </br> let chart: Chart = new Chart({ indicators: [ { lowerLine: { type: 'Smooth', color: '#FFEEFF', width: 2, dashArray: '10,5' } }] });
Appearance of period line in indicator Property:periodLine </br> </br> $("#container").ejChart({ indicators: [ { periodLine: { fill: '#EECCAA', width: 2 } }] }); Property:lowerLine </br> </br> 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 </br> </br> $("#container").ejChart({ indicators: [ { seriesName: '' }] }); Property:lowerLine </br> </br> let chart: Chart = new Chart({ indicators: [ { seriesName: '' }] });
Options to customize the histogram in MACD indicator Property:seriesName </br> </br> $("#container").ejChart({ indicators: [ { histogram: { } }] }); Not applicable
Enabling animation Property:enableAnimation </br> </br> $("#container").ejChart({ indicators: [ { enableAnimation: true }] }); Property:animation.enable </br> </br> let chart: Chart = new Chart({ indicators: [ { animation: { enable: true }] });
Animation duration Property:animationDuration </br> </br> $("#container").ejChart({ indicators: [ { animationDuration: 3000 }] }); Property:animation.duration </br> </br> let chart: Chart = new Chart({ indicators: [ { animation: { duration: 3000 }] });
Tooltip Property:tooltip </br> </br> $("#container").ejChart({ indicators: [ { tooltip: { visible: true } }] }); Not applicable
Trigger value of MACD indicator. Property:trigger </br> </br> $("#container").ejChart({ indicators: [ { trigger: 14 }] }); Not applicable
Fill color for indicator Property:fill </br> </br> $("#container").ejChart({ indicators: [ { fill: '#EEDDCC' }] }); Property:animation.enable </br> </br> let chart: Chart = new Chart({ indicators: [ { fill: 'red' }] });
Width for indicator Property:width </br> </br> $("#container").ejChart({ indicators: [ { width: 2 }] }); Property:width </br> </br> let chart: Chart = new Chart({ indicators: [ { width: 3 }] });
xAxis Name of indicator Property:xAxisName </br> </br> $("#container").ejChart({ indicators: [ { xAxisName: '' }] }); Property:xAxisName </br> </br> let chart: Chart = new Chart({ indicators: [ { xAxisName: '' }] });
yAxis Name of indicator Property:yAxisName </br> </br> $("#container").ejChart({ indicators: [ { yAxisName: '' }] }); Property:yAxisName </br> </br> let chart: Chart = new Chart({ indicators: [ { yAxisName: '' }] });
Visibility of indicator Property:visibility </br> </br> $("#container").ejChart({ indicators: [ { visibility: true }] }); Not applicable
## Legend
Behaviour API in Essential JS 1 API in Essential JS 2
Default legend Property:visible </br> </br> $("#container").ejChart({ legend: { visible: true } }); Property:visible </br> </br> let chart: Chart = new Chart({ legendSettings: { visible: true } });
Legend height Property:size.height </br> </br> $("#container").ejChart({ legend: { size : { height: 50 } } }); Property:height </br> </br> let chart: Chart = new Chart({ legendSettings: { height: '30' } });
Legend width Property:size.width </br> </br> $("#container").ejChart({ legend: { size: { width: 20 } } }); Property:width </br> </br> let chart: Chart = new Chart({ legendSettings: { width: '30' } });
Legend location in chart Property:location </br> </br> $("#container").ejChart({ legend: { location: { x: 3, y: 45} } }); Property:height </br> </br> let chart: Chart = new Chart({ legendSettings: { location: { x: 3, y: 45} } });
Legend position in chart Property:position </br> </br> $("#container").ejChart({ legend: { position: 'top' } }); Property:position </br> </br> let chart: Chart = new Chart({ legendSettings: { position: 'Top' } });
Legend padding Not applicable Property:padding </br> </br> let chart: Chart = new Chart({ legendSettings: { padding: 8 } });
Legend alignment Property:position </br> </br> $("#container").ejChart({ legend: { alignment: 'center' } }); Property:position </br> </br> let chart: Chart = new Chart({ legendSettings: { alignment: 'Center' } });
text style for legend Property:font </br> </br> $("#container").ejChart({ legend: { font: { fontFamily: '', fontWeight: '400', fontStyle: 'italic', size: '12px' } } }); Property:textStyle </br> </br> 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 </br> </br> $("#container").ejChart({ legend: { itemStyle: { height: 20 } } }); Property:shapeHeight </br> </br> let chart: Chart = new Chart({ legendSettings: { shapeHeight: 20 } });
shape width of legend Property:itemStyle.width </br> </br> $("#container").ejChart({ legend: { itemStyle: { width: 20 } } }); Property:shapeWidth </br> </br> let chart: Chart = new Chart({ legendSettings: { shapeWidth: 20 } });
shape width of legend Property:itemStyle.width </br> </br> $("#container").ejChart({ legend: { itemStyle: { width: 20 } } }); Property:shapeWidth </br> </br> let chart: Chart = new Chart({ legendSettings: { shapeWidth: 20 } });
shape border of legend Property:itemStyle.border </br> </br> $("#container").ejChart({ legend: { itemStyle: { border: { width: 2, color: 'red' } } } }); Not Applicable
shape padding of legend Property:itemPadding </br> </br> $("#container").ejChart({ legend: { itemPadding: 10 } }); Property:shapePadding </br> </br> let chart: Chart = new Chart({ legendSettings: { shapePadding: 20 } });
Background of legend Property:background </br> </br> $("#container").ejChart({ legend: { background: 'transparent' } }); Property:backgorund </br> </br> let chart: Chart = new Chart({ legendSettings: { background: 'transparent' } });
Opacity of legend Property:opacity </br> </br> $("#container").ejChart({ legend: { opacity: 0.3 } }); Property:opacity </br> </br> let chart: Chart = new Chart({ legendSettings: { opacity: 0.4 } });
Toggle visibility of series while legend click Property:toggleSeriesVisibility </br> </br> $("#container").ejChart({ legend: { toggleSeriesVisibility: true } }); Property:toggleVisibility </br> </br> let chart: Chart = new Chart({ legendSettings: { toggleVisibility: true } });
Title for legend Property:title </br> </br> $("#container").ejChart({ legend: { title: { text: 'LegendTitle', font: { }, textAlignment: 'middle' } } }); Not applicable
Text Overflow for legend Property:title </br> </br> $("#container").ejChart({ legend: { textOverFlow: 'trim' } }); Property:textStyle.textOverFlow </br> </br> let chart: new Chart({ legend: { text: { textOverFlow: 'trim' } } });
Text width for legend while setting text overflow Property:textWidth </br> </br> $("#container").ejChart({ legend: { textWidth: 20 } }); Not applicable
Scroll bar for legend Property:enableScrollBar </br> </br> $("#container").ejChart({ legend: { enableScrollBar: true } }); Not applicable
Row count for legend Property:rowCount </br> </br> $("#container").ejChart({ legend: { rowCount: 2 } }); Not applicable
Column count for legend Property:columnCount </br> </br> $("#container").ejChart({ legend: { columnCount: 2 } }); Not applicable
Color for legend items Property:fill </br> </br> $("#container").ejChart({ legend: { fill: '#EEFFCC' } }); Not applicable
## primaryXAxis
Behaviour API in Essential JS 1 API in Essential JS 2
Alternate grid band Property:alternateGridBand </br> </br> $("#container").ejChart({ primaryXAxis: { alternateGridBand: { even: { fill: 'red }}} }); Not applicable
Axis line cross value Property:crossesAt </br> </br> $("#container").ejChart({ primaryXAxis: { crossesAt: 0 } }); Property:crossesAt </br> </br> let chart: Chart = new Chart({ primaryXAxis: { crossesAt: 4} }); chart.appendTo('#chart');
axis name with which the axis line has to be crossed Property:crossesInAxis </br> </br> $("#container").ejChart({ primaryXAxis: { crossesInAxis: '' } }); Property:crossesInAxis </br> </br> let chart: Chart = new Chart({ primaryXAxis: { crossesInAxis: '' } }); chart.appendTo('#chart');
axis elements placed with axis line Property:showNextToAxisLine </br> </br> $("#container").ejChart({ primaryXAxis: { showNextToAxisLine : true } }); Property:placeNextToAxisLine </br> </br> let chart: Chart = new Chart({ primaryXAxis: { placeNextToAxisLine: '' } }); chart.appendTo('#chart');
axis line style Property:axisLine.color </br> </br> $("#container").ejChart({ primaryXAxis: { axisLine: { color : 'red' } } }); Property:lineStyle.color </br> </br> let chart: Chart = new Chart({ primaryXAxis: { lineStyle: { color: 'black' } } }); chart.appendTo('#chart');
axis line dashArray Property:axisLine.color </br> </br> $("#container").ejChart({ primaryXAxis: { axisLine: { dashArray : '10, 5' } } }); Property:lineStyle.dashArray </br> </br> let chart: Chart = new Chart({ primaryXAxis: { lineStyle: { dashArray: '10, 5' } } }); chart.appendTo('#chart');
Offset for axis Property:axisLine.offset </br> </br> $("#container").ejChart({ primaryXAxis: { axisLine: { offset : 10 } } }); Property:plotOffset </br> </br> let chart: Chart = new Chart({ primaryXAxis: { plotOffset: 10 } }); chart.appendTo('#chart');
Visible of an axis Property:axisLine.offset </br> </br> $("#container").ejChart({ primaryXAxis: { axisLine: { visible : false } } }); Property:visible </br> </br> let chart: Chart = new Chart({ primaryXAxis: { visible: false } }); chart.appendTo('#chart');
Width of an axis Property:axisLine.width </br> </br> $("#container").ejChart({ primaryXAxis: { axisLine: { width : 2 } } }); Property:lineStyle.width </br> </br> let chart: Chart = new Chart({ primaryXAxis: { lineStyle: { width: 3 } } }); chart.appendTo('#chart');
Column index of an axis Property:columnIndex </br> </br> $("#container").ejChart({ primaryXAxis: { columnIndex: 2 } }); Property:columnIndex </br> </br> let chart: Chart = new Chart({ primaryXAxis: { columnIndex: 2 } }); chart.appendTo('#chart');
span of an axis to place horizontally or vertically Property:columnSpan </br> </br> $("#container").ejChart({ primaryXAxis: { columnIndex: 2 } }); Property:span </br> </br> let chart: Chart = new Chart({ primaryXAxis: { span: 2 } }); chart.appendTo('#chart');
Crosshair label of an axis Property:crossHairLabel.visible </br> </br> $("#container").ejChart({ primaryXAxis: { crossHairLabel: { visible: true }} }); Property:crossHairTooltip.enable </br> </br> let chart: Chart = new Chart({ primaryXAxis: { crossHairTooltip: { enable: true }} }); chart.appendTo('#chart');
Crosshair label color of an axis Not applicable Property:crossHairTooltip.fill </br> </br> let chart: Chart = new Chart({ primaryXAxis: { crossHairTooltip: { fill: 'red' }} }); chart.appendTo('#chart');
Crosshair label text style Not applicable Property:crossHairTooltip.textStyle </br> </br> let chart: Chart = new Chart({ primaryXAxis: { crossHairTooltip: { textStyle: { } }} }); chart.appendTo('#chart');
Desired interval count for primaryXAxis Property:desiredIntervals </br> </br> $("#container").ejChart({ primaryXAxis: { desiredIntervals: 4} }); Property:desiredIntervals </br> </br> let chart: Chart = new Chart({ primaryXAxis: { desiredIntervals: 4 } }); chart.appendTo('#chart');
Edges primaryXAxis Property:edgeLabelPlacement </br> </br> $("#container").ejChart({ primaryXAxis: { edgeLabelPlacement: 'none' } }); Property:edgeLabelPlacement </br> </br> let chart: Chart = new Chart({ primaryXAxis: { edgeLabelPlacement: 'Shift' } }); chart.appendTo('#chart');
Enables trim for axis labels Property:enableTrim </br> </br> $("#container").ejChart({ primaryXAxis: { enableTrim: true } }); Property:enableTrim </br> </br> 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 </br> </br> $("#container").ejChart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); Property:enableAutoIntervalOnZooming </br> </br> 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 </br> </br> $("#container").ejChart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); Property:enableAutoIntervalOnZooming </br> </br> let chart: Chart = new Chart({ primaryXAxis: { enableAutoIntervalOnZooming: true } }); chart.appendTo('#chart');
Font style for primaryXAxis Property:font </br> </br> $("#container").ejChart({ primaryXAxis: { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} } }); Property:titleStyle </br> </br> let chart: Chart = new Chart({ primaryXAxis: { titleStyle: { } } }); chart.appendTo('#chart');
Indexed for category axis Property:isIndexed </br> </br> $("#container").ejChart({ primaryXAxis: { isIndexed: true } }); Property:isIndexed </br> </br> let chart: Chart = new Chart({ primaryXAxis: { isIndexed: true } }); chart.appendTo('#chart');
Interval type for date time axis Property:intervalType </br> </br> $("#container").ejChart({ primaryXAxis: { intervalType}: 'Auto' } }); Property:intervalType </br> </br> let chart: Chart = new Chart({ primaryXAxis: { intervalType: 'Auto } }); chart.appendTo('#chart');
Inversed axis Property:isInversed </br> </br> $("#container").ejChart({ primaryXAxis: { isInversed: true } }); Property:isInversed </br> </br> let chart: Chart = new Chart({ primaryXAxis: { isInversed: true } }); chart.appendTo('#chart');
Custom label format Property:labelFormat </br> </br> $("#container").ejChart({ primaryXAxis: { labelFormat: '{value}K' } }); Property:labelFormat </br> </br> let chart: Chart = new Chart({ primaryXAxis: { labelFormat: '{value}K' } }); chart.appendTo('#chart');
labelIntersectAction Property:labelIntersectAction </br> </br> $("#container").ejChart({ primaryXAxis: { labelIntersectAction: 'trim' } }); Property:labelIntersectAction </br> </br> let chart: Chart = new Chart({ primaryXAxis: { labelIntersectAction: 'Trim' } }); chart.appendTo('#chart');
labelPosition Property:labelPosition </br> </br> $("#container").ejChart({ primaryXAxis: { labelPosition: 'inside' } }); Property:labelPosition </br> </br> let chart: Chart = new Chart({ primaryXAxis: { labelPosition: 'Inside' } }); chart.appendTo('#chart');
labelPlacement for category axis Property:labelPlacement </br> </br> $("#container").ejChart({ primaryXAxis: { labelPlacement: 'onTicks' } }); Property:labelPlacement </br> </br> let chart: Chart = new Chart({ primaryXAxis: { labelPlacement: 'OnTicks' } }); chart.appendTo('#chart');
Axis label alignment Property:alignment </br> </br> $("#container").ejChart({ primaryXAxis: { alignment: 'center' } }); Not Applicable
Rotation of axis labels Property:labelRotation </br> </br> $("#container").ejChart({ primaryXAxis: { labelRotation: 45 } }); Property:labelRotation </br> </br> let chart: Chart = new Chart({ primaryXAxis: { labelRotation: 45 } }); chart.appendTo('#chart');
Log base value for logarithmic axis Property:logBase </br> </br> $("#container").ejChart({ primaryXAxis: { logBase: 10 } }); Property:labelRotation </br> </br> let chart: Chart = new Chart({ primaryXAxis: { logBase: 10 } }); chart.appendTo('#chart');
Major grid line Property:majorGridLines.visible </br> </br> $("#container").ejChart({ primaryXAxis: { majorGridLines: { visible: true} } }); Not Applicable
Width of MajorGridLines Property:majorGridLines.width </br> </br> $("#container").ejChart({ primaryXAxis: { majorGridLines: { width: 2} } }); Property:majorGridLines.width </br> </br> let chart: Chart = new Chart({ primaryXAxis: { majorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of MajorGridLines Property:majorGridLines.color </br> </br> $("#container").ejChart({ primaryXAxis: { majorGridLines: { color: 'black' } } }); Property:majorGridLines.color </br> </br> let chart: Chart = new Chart({ primaryXAxis: { majorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of MajorGridLines Property:majorGridLines.dashArray </br> </br> $("#container").ejChart({ primaryXAxis: { majorGridLines: { dashArray: 'black' } } }); Property:majorGridLines.dashArray </br> </br> let chart: Chart = new Chart({ primaryXAxis: { majorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of major grid line Property:majorGridLines.opacity </br> </br> $("#container").ejChart({ primaryXAxis: { majorGridLines: { opacity: true} } }); Not Applicable
Major Tick line Property:majorTickLines.visible </br> </br> $("#container").ejChart({ primaryXAxis: { majorTickLines: { visible: true} } }); Not Applicable
Width of MajorTickLines Property:majorTickLines.width </br> </br> $("#container").ejChart({ primaryXAxis: { majorTickLines: { width: 2} } }); Property:majorTickLines.width </br> </br> let chart: Chart = new Chart({ primaryXAxis: { majorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of MajorTickLines Property:majorTickLines.size </br> </br> $("#container").ejChart({ primaryXAxis: { majorTickLines: { size: 2} } }); Property:majorTickLines.height </br> </br> let chart: Chart = new Chart({ primaryXAxis: { majorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of MajorTickLines Property:majorTickLines.color </br> </br> $("#container").ejChart({ primaryXAxis: { majorTickLines: { color: 'black' } } }); Property:majorTickLines.color </br> </br> let chart: Chart = new Chart({ primaryXAxis: { majorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of major Tick line Property:majorTickLines.opacity </br> </br> $("#container").ejChart({ primaryXAxis: { majorTickLines: { opacity: true} } }); Not Applicable
maximum labels of primaryXAxis Property:maximumLabels </br> </br> $("#container").ejChart({ primaryXAxis: { maximumLabels: 5 } }); Property:maximumLabels </br> </br> let chart: Chart = new Chart({ primaryXAxis: { maximumLabels: 4 } }); chart.appendTo('#chart');
maximum labels width of primaryXAxis to trim Property:maximumLabelWidth </br> </br> $("#container").ejChart({ primaryXAxis: { maximumLabelWidth: 40 } }); Property:maximumLabelWidth </br> </br> let chart: Chart = new Chart({ primaryXAxis: { maximumLabelWidth: 4 } }); chart.appendTo('#chart');
minor grid line Property:minorGridLines.visible </br> </br> $("#container").ejChart({ primaryXAxis: { minorGridLines: { visible: true} } }); Not Applicable
Width of minorGridLines Property:minorGridLines.width </br> </br> $("#container").ejChart({ primaryXAxis: { minorGridLines: { width: 2} } }); Property:minorGridLines.width </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of minorGridLines Property:minorGridLines.color </br> </br> $("#container").ejChart({ primaryXAxis: { minorGridLines: { color: 'black' } } }); Property:minorGridLines.color </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of minorGridLines Property:minorGridLines.dashArray </br> </br> $("#container").ejChart({ primaryXAxis: { minorGridLines: { dashArray: 'black' } } }); Property:minorGridLines.dashArray </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of minor grid line Property:minorGridLines.opacity </br> </br> $("#container").ejChart({ primaryXAxis: { minorGridLines: { opacity: true} } }); Not Applicable
minor Tick line Property:minorTickLines.visible </br> </br> $("#container").ejChart({ primaryXAxis: { minorTickLines: { visible: true} } }); Not Applicable
Width of minorTickLines Property:minorTickLines.width </br> </br> $("#container").ejChart({ primaryXAxis: { minorTickLines: { width: 2} } }); Property:minorTickLines.width </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of minorTickLines Property:minorTickLines.size </br> </br> $("#container").ejChart({ primaryXAxis: { minorTickLines: { size: 2} } }); Property:minorTickLines.height </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of minorTickLines Property:minorTickLines.color </br> </br> $("#container").ejChart({ primaryXAxis: { minorTickLines: { color: 'black' } } }); Property:minorTickLines.color </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of minor Tick line Property:minorTickLines.opacity </br> </br> $("#container").ejChart({ primaryXAxis: { minorTickLines: { opacity: true} } }); Not Applicable
Minor ticks per interval of primaryXAxis Property:minorTicksPerInterval </br> </br> $("#container").ejChart({ primaryXAxis: { minorTicksPerInterval: 4 } }); Property:minorTickLines.color </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minorTicksPerInterval: 4 } }); chart.appendTo('#chart');
name of the primaryXAxis Property:name </br> </br> $("#container").ejChart({ primaryXAxis: { name: 'primaryXAxis' } }); Property:name </br> </br> let chart: Chart = new Chart({ primaryXAxis: { name: 'primaryXAxis' } }); chart.appendTo('#chart');
Orientation of primaryXAxis Property:orientation </br> </br> $("#container").ejChart({ primaryXAxis: { orientation: 'Vertical' } }); Not Applicable
Plot offset for primaryXAxis Property:plotOffset </br> </br> $("#container").ejChart({ primaryXAxis: { plotOffset: 0 } }); Property:plotOffset </br> </br> let chart: Chart = new Chart({ primaryXAxis: { plotOffset: 0 } }); chart.appendTo('#chart');
minimum for primaryXAxis Property:range.minimum </br> </br> $("#container").ejChart({ primaryXAxis: { range: { minimum: 10 }} }); Property:minimum </br> </br> let chart: Chart = new Chart({ primaryXAxis: { minimum: 23 } }); chart.appendTo('#chart');
maximum for primaryXAxis Property:range.maximum </br> </br> $("#container").ejChart({ primaryXAxis: { range: { maximum: 10 }} }); Property:maximum </br> </br> let chart: Chart = new Chart({ primaryXAxis: { maximum: 23 } }); chart.appendTo('#chart');
interval for primaryXAxis Property:range.interval </br> </br> $("#container").ejChart({ primaryXAxis: { range: { interval: 1 }} }); Property:interval </br> </br> let chart: Chart = new Chart({ primaryXAxis: { interval: 2 } }); chart.appendTo('#chart');
RangePadding for primaryXAxis Property:rangePadding </br> </br> $("#container").ejChart({ primaryXAxis: { rangePadding: 'None' }} }); Property:rangePadding </br> </br> let chart: Chart = new Chart({ primaryXAxis: { rangePadding: 'None' } }); chart.appendTo('#chart');
Rounding Places in primaryXAxis Property:roundingPlaces </br> </br> $("#container").ejChart({ primaryXAxis: { roundingPlaces: 3 } }); Property:labelFormat </br> </br> let chart: Chart = new Chart({ primaryXAxis: { labelFormat: 'n3' } }); chart.appendTo('#chart');
ScrollBar settings of primaryXAxis Property:scrollbarSettings </br> </br> $("#container").ejChart({ primaryXAxis: { scrollbarSettings : { } } }); Not Applicable
TickPosition in primaryXAxis Property:tickLinesPosition </br> </br> $("#container").ejChart({ primaryXAxis: { tickLinesPosition: 'Inside' } }); Property:tickPosition </br> </br> let chart: Chart = new Chart({ primaryXAxis: { tickPosition: 'Inside' } }); chart.appendTo('#chart');
valueType of primaryXAxis Property:valueType </br> </br> $("#container").ejChart({ primaryXAxis: { valueType: 'DateTime' } }); Property:valueType </br> </br> let chart: Chart = new Chart({ primaryXAxis: { valueType: 'DateTime' } }); chart.appendTo('#chart');
visible of primaryXAxis Property:visible </br> </br> $("#container").ejChart({ primaryXAxis: { visible: true } }); Property:visible </br> </br> let chart: Chart = new Chart({ primaryXAxis: { visible: true } }); chart.appendTo('#chart');
zoomFactor of primaryXAxis Property:zoomFactor </br> </br> $("#container").ejChart({ primaryXAxis: { zoomFactor: 0.3 } }); Property:zoomFactor </br> </br> let chart: Chart = new Chart({ primaryXAxis: { zoomFactor: 0.3 } }); chart.appendTo('#chart');
zoomPosition of primaryXAxis Property:zoomPosition </br> </br> $("#container").ejChart({ primaryXAxis: { zoomPosition: 0.3 } }); Property:zoomPosition </br> </br> let chart: Chart = new Chart({ primaryXAxis: { zoomPosition: 0.3 } }); chart.appendTo('#chart');
labelBorder of primaryXAxis Property:labelBorder </br> </br> $("#container").ejChart({ primaryXAxis: { labelBorder: { color: 'red', width: 2} } }); Property:border </br> </br> let chart: Chart = new Chart({ primaryXAxis: { border: { color: 'red', width: 3 } } }); chart.appendTo('#chart');
title of primaryXAxis Property:title.text </br> </br> $("#container").ejChart({ primaryXAxis: { title: { text: 'Chart title' } } }); Property:title </br> </br> let chart: Chart = new Chart({ primaryXAxis: { title: 'Chart title' } }); chart.appendTo('#chart');
StripLine of primaryXAxis Property:stripLine </br> </br> $("#container").ejChart({ primaryXAxis: { stripLine: [] } }); Property:stripLines </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [] } }); chart.appendTo('#chart');
Multilevel labels of primaryXAxis Property:multiLevelLabels </br> </br> $("#container").ejChart({ primaryXAxis: { multiLevelLabels: [] } }); Property:multiLevelLabels </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [] } }); chart.appendTo('#chart');
skeleton for an axes Not Applicable Property:skeleton </br> </br> let chart: Chart = new Chart({ axes: [ { skeleton: 'yMd' }] }); chart.appendTo('#chart');
skeleton type for an axes Not Applicable Property:skeletonType </br> </br> 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 </br> </br> $("#container").ejChart({ primaryYAxis: { alternateGridBand: { even: { fill: 'red }}} }); Not applicable
Axis line cross value Property:crossesAt </br> </br> $("#container").ejChart({ primaryYAxis: { crossesAt: 0 } }); Property:crossesAt </br> </br> let chart: Chart = new Chart({ primaryYAxis: { crossesAt: 4} }); chart.appendTo('#chart');
axis name with which the axis line has to be crossed Property:crossesInAxis </br> </br> $("#container").ejChart({ primaryYAxis: { crossesInAxis: '' } }); Property:crossesInAxis </br> </br> let chart: Chart = new Chart({ primaryYAxis: { crossesInAxis: '' } }); chart.appendTo('#chart');
axis elements placed with axis line Property:showNextToAxisLine </br> </br> $("#container").ejChart({ primaryYAxis: { showNextToAxisLine : true } }); Property:placeNextToAxisLine </br> </br> let chart: Chart = new Chart({ primaryYAxis: { placeNextToAxisLine: '' } }); chart.appendTo('#chart');
axis line style Property:axisLine.color </br> </br> $("#container").ejChart({ primaryYAxis: { axisLine: { color : 'red' } } }); Property:lineStyle.color </br> </br> let chart: Chart = new Chart({ primaryYAxis: { lineStyle: { color: 'black' } } }); chart.appendTo('#chart');
axis line dashArray Property:axisLine.color </br> </br> $("#container").ejChart({ primaryYAxis: { axisLine: { dashArray : '10, 5' } } }); Property:lineStyle.dashArray </br> </br> let chart: Chart = new Chart({ primaryYAxis: { lineStyle: { dashArray: '10, 5' } } }); chart.appendTo('#chart');
Offset for axis Property:axisLine.offset </br> </br> $("#container").ejChart({ primaryYAxis: { axisLine: { offset : 10 } } }); Property:plotOffset </br> </br> let chart: Chart = new Chart({ primaryYAxis: { plotOffset: 10 } }); chart.appendTo('#chart');
Visible of an axis Property:axisLine.offset </br> </br> $("#container").ejChart({ primaryYAxis: { axisLine: { visible : false } } }); Property:visible </br> </br> let chart: Chart = new Chart({ primaryYAxis: { visible: false } }); chart.appendTo('#chart');
Width of an axis Property:axisLine.width </br> </br> $("#container").ejChart({ primaryYAxis: { axisLine: { width : 2 } } }); Property:lineStyle.width </br> </br> let chart: Chart = new Chart({ primaryYAxis: { lineStyle: { width: 3 } } }); chart.appendTo('#chart');
Column index of an axis Property:columnIndex </br> </br> $("#container").ejChart({ primaryYAxis: { columnIndex: 2 } }); Property:columnIndex </br> </br> let chart: Chart = new Chart({ primaryYAxis: { columnIndex: 2 } }); chart.appendTo('#chart');
span of an axis to place horizontally or vertically Property:columnSpan </br> </br> $("#container").ejChart({ primaryYAxis: { columnIndex: 2 } }); Property:span </br> </br> let chart: Chart = new Chart({ primaryYAxis: { span: 2 } }); chart.appendTo('#chart');
Crosshair label of an axis Property:crossHairLabel.visible </br> </br> $("#container").ejChart({ primaryYAxis: { crossHairLabel: { visible: true }} }); Property:crossHairTooltip.enable </br> </br> let chart: Chart = new Chart({ primaryYAxis: { crossHairTooltip: { enable: true }} }); chart.appendTo('#chart');
Crosshair label color of an axis Not applicable Property:crossHairTooltip.fill </br> </br> let chart: Chart = new Chart({ primaryYAxis: { crossHairTooltip: { fill: 'red' }} }); chart.appendTo('#chart');
Crosshair label text style Not applicable Property:crossHairTooltip.textStyle </br> </br> let chart: Chart = new Chart({ primaryYAxis: { crossHairTooltip: { textStyle: { } }} }); chart.appendTo('#chart');
Desired interval count for primaryYAxis Property:desiredIntervals </br> </br> $("#container").ejChart({ primaryYAxis: { desiredIntervals: 4} }); Property:desiredIntervals </br> </br> let chart: Chart = new Chart({ primaryYAxis: { desiredIntervals: 4 } }); chart.appendTo('#chart');
Edges primaryYAxis Property:edgeLabelPlacement </br> </br> $("#container").ejChart({ primaryYAxis: { edgeLabelPlacement: 'none' } }); Property:edgeLabelPlacement </br> </br> let chart: Chart = new Chart({ primaryYAxis: { edgeLabelPlacement: 'Shift' } }); chart.appendTo('#chart');
Enables trim for axis labels Property:enableTrim </br> </br> $("#container").ejChart({ primaryYAxis: { enableTrim: true } }); Property:enableTrim </br> </br> 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 </br> </br> $("#container").ejChart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); Property:enableAutoIntervalOnZooming </br> </br> 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 </br> </br> $("#container").ejChart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); Property:enableAutoIntervalOnZooming </br> </br> let chart: Chart = new Chart({ primaryYAxis: { enableAutoIntervalOnZooming: true } }); chart.appendTo('#chart');
Font style for primaryYAxis Property:font </br> </br> $("#container").ejChart({ primaryYAxis: { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} } }); Property:titleStyle </br> </br> let chart: Chart = new Chart({ primaryYAxis: { titleStyle: { } } }); chart.appendTo('#chart');
Indexed for category axis Property:isIndexed </br> </br> $("#container").ejChart({ primaryYAxis: { isIndexed: true } }); Property:isIndexed </br> </br> let chart: Chart = new Chart({ primaryYAxis: { isIndexed: true } }); chart.appendTo('#chart');
Interval type for date time axis Property:intervalType </br> </br> $("#container").ejChart({ primaryYAxis: { intervalType}: 'Auto' } }); Property:intervalType </br> </br> let chart: Chart = new Chart({ primaryYAxis: { intervalType: 'Auto } }); chart.appendTo('#chart');
Inversed axis Property:isInversed </br> </br> $("#container").ejChart({ primaryYAxis: { isInversed: true } }); Property:isInversed </br> </br> let chart: Chart = new Chart({ primaryYAxis: { isInversed: true } }); chart.appendTo('#chart');
Custom label format Property:labelFormat </br> </br> $("#container").ejChart({ primaryYAxis: { labelFormat: '{value}K' } }); Property:labelFormat </br> </br> let chart: Chart = new Chart({ primaryYAxis: { labelFormat: '{value}K' } }); chart.appendTo('#chart');
labelIntersectAction Property:labelIntersectAction </br> </br> $("#container").ejChart({ primaryYAxis: { labelIntersectAction: 'trim' } }); Property:labelIntersectAction </br> </br> let chart: Chart = new Chart({ primaryYAxis: { labelIntersectAction: 'Trim' } }); chart.appendTo('#chart');
labelPosition Property:labelPosition </br> </br> $("#container").ejChart({ primaryYAxis: { labelPosition: 'inside' } }); Property:labelPosition </br> </br> let chart: Chart = new Chart({ primaryYAxis: { labelPosition: 'Inside' } }); chart.appendTo('#chart');
labelPlacement for category axis Property:labelPlacement </br> </br> $("#container").ejChart({ primaryYAxis: { labelPlacement: 'onTicks' } }); Property:labelPlacement </br> </br> let chart: Chart = new Chart({ primaryYAxis: { labelPlacement: 'OnTicks' } }); chart.appendTo('#chart');
Axis label alignment Property:alignment </br> </br> $("#container").ejChart({ primaryYAxis: { alignment: 'center' } }); Not Applicable
Rotation of axis labels Property:labelRotation </br> </br> $("#container").ejChart({ primaryYAxis: { labelRotation: 45 } }); Property:labelRotation </br> </br> let chart: Chart = new Chart({ primaryYAxis: { labelRotation: 45 } }); chart.appendTo('#chart');
Log base value for logarithmic axis Property:logBase </br> </br> $("#container").ejChart({ primaryYAxis: { logBase: 10 } }); Property:labelRotation </br> </br> let chart: Chart = new Chart({ primaryYAxis: { logBase: 10 } }); chart.appendTo('#chart');
Major grid line Property:majorGridLines.visible </br> </br> $("#container").ejChart({ primaryYAxis: { majorGridLines: { visible: true} } }); Not Applicable
Width of MajorGridLines Property:majorGridLines.width </br> </br> $("#container").ejChart({ primaryYAxis: { majorGridLines: { width: 2} } }); Property:majorGridLines.width </br> </br> let chart: Chart = new Chart({ primaryYAxis: { majorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of MajorGridLines Property:majorGridLines.color </br> </br> $("#container").ejChart({ primaryYAxis: { majorGridLines: { color: 'black' } } }); Property:majorGridLines.color </br> </br> let chart: Chart = new Chart({ primaryYAxis: { majorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of MajorGridLines Property:majorGridLines.dashArray </br> </br> $("#container").ejChart({ primaryYAxis: { majorGridLines: { dashArray: 'black' } } }); Property:majorGridLines.dashArray </br> </br> let chart: Chart = new Chart({ primaryYAxis: { majorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of major grid line Property:majorGridLines.opacity </br> </br> $("#container").ejChart({ primaryYAxis: { majorGridLines: { opacity: true} } }); Not Applicable
Major Tick line Property:majorTickLines.visible </br> </br> $("#container").ejChart({ primaryYAxis: { majorTickLines: { visible: true} } }); Not Applicable
Width of MajorTickLines Property:majorTickLines.width </br> </br> $("#container").ejChart({ primaryYAxis: { majorTickLines: { width: 2} } }); Property:majorTickLines.width </br> </br> let chart: Chart = new Chart({ primaryYAxis: { majorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of MajorTickLines Property:majorTickLines.size </br> </br> $("#container").ejChart({ primaryYAxis: { majorTickLines: { size: 2} } }); Property:majorTickLines.height </br> </br> let chart: Chart = new Chart({ primaryYAxis: { majorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of MajorTickLines Property:majorTickLines.color </br> </br> $("#container").ejChart({ primaryYAxis: { majorTickLines: { color: 'black' } } }); Property:majorTickLines.color </br> </br> let chart: Chart = new Chart({ primaryYAxis: { majorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of major Tick line Property:majorTickLines.opacity </br> </br> $("#container").ejChart({ primaryYAxis: { majorTickLines: { opacity: true} } }); Not Applicable
maximum labels of primaryYAxis Property:maximumLabels </br> </br> $("#container").ejChart({ primaryYAxis: { maximumLabels: 5 } }); Property:maximumLabels </br> </br> let chart: Chart = new Chart({ primaryYAxis: { maximumLabels: 4 } }); chart.appendTo('#chart');
maximum labels width of primaryYAxis to trim Property:maximumLabelWidth </br> </br> $("#container").ejChart({ primaryYAxis: { maximumLabelWidth: 40 } }); Property:maximumLabelWidth </br> </br> let chart: Chart = new Chart({ primaryYAxis: { maximumLabelWidth: 4 } }); chart.appendTo('#chart');
minor grid line Property:minorGridLines.visible </br> </br> $("#container").ejChart({ primaryYAxis: { minorGridLines: { visible: true} } }); Not Applicable
Width of minorGridLines Property:minorGridLines.width </br> </br> $("#container").ejChart({ primaryYAxis: { minorGridLines: { width: 2} } }); Property:minorGridLines.width </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorGridLines: { width: 2} } }); chart.appendTo('#chart');
Color of minorGridLines Property:minorGridLines.color </br> </br> $("#container").ejChart({ primaryYAxis: { minorGridLines: { color: 'black' } } }); Property:minorGridLines.color </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorGridLines: { color: 'black' } } }); chart.appendTo('#chart');
DashArray of minorGridLines Property:minorGridLines.dashArray </br> </br> $("#container").ejChart({ primaryYAxis: { minorGridLines: { dashArray: 'black' } } }); Property:minorGridLines.dashArray </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorGridLines: { dashArray: 'black' } } }); chart.appendTo('#chart');
Opacity of minor grid line Property:minorGridLines.opacity </br> </br> $("#container").ejChart({ primaryYAxis: { minorGridLines: { opacity: true} } }); Not Applicable
minor Tick line Property:minorTickLines.visible </br> </br> $("#container").ejChart({ primaryYAxis: { minorTickLines: { visible: true} } }); Not Applicable
Width of minorTickLines Property:minorTickLines.width </br> </br> $("#container").ejChart({ primaryYAxis: { minorTickLines: { width: 2} } }); Property:minorTickLines.width </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorTickLines: { width: 2} } }); chart.appendTo('#chart');
Height of minorTickLines Property:minorTickLines.size </br> </br> $("#container").ejChart({ primaryYAxis: { minorTickLines: { size: 2} } }); Property:minorTickLines.height </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorTickLines: { height: 2} } }); chart.appendTo('#chart');
Color of minorTickLines Property:minorTickLines.color </br> </br> $("#container").ejChart({ primaryYAxis: { minorTickLines: { color: 'black' } } }); Property:minorTickLines.color </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorTickLines: { color: 'black' } } }); chart.appendTo('#chart');
Opacity of minor Tick line Property:minorTickLines.opacity </br> </br> $("#container").ejChart({ primaryYAxis: { minorTickLines: { opacity: true} } }); Not Applicable
Minor ticks per interval of primaryYAxis Property:minorTicksPerInterval </br> </br> $("#container").ejChart({ primaryYAxis: { minorTicksPerInterval: 4 } }); Property:minorTickLines.color </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minorTicksPerInterval: 4 } }); chart.appendTo('#chart');
name of the primaryYAxis Property:name </br> </br> $("#container").ejChart({ primaryYAxis: { name: 'primaryYAxis' } }); Property:name </br> </br> let chart: Chart = new Chart({ primaryYAxis: { name: 'primaryYAxis' } }); chart.appendTo('#chart');
Orientation of primaryYAxis Property:orientation </br> </br> $("#container").ejChart({ primaryYAxis: { orientation: 'Vertical' } }); Not Applicable
Plot offset for primaryYAxis Property:plotOffset </br> </br> $("#container").ejChart({ primaryYAxis: { plotOffset: 0 } }); Property:plotOffset </br> </br> let chart: Chart = new Chart({ primaryYAxis: { plotOffset: 0 } }); chart.appendTo('#chart');
minimum for primaryYAxis Property:range.minimum </br> </br> $("#container").ejChart({ primaryYAxis: { range: { minimum: 10 }} }); Property:minimum </br> </br> let chart: Chart = new Chart({ primaryYAxis: { minimum: 23 } }); chart.appendTo('#chart');
maximum for primaryYAxis Property:range.maximum </br> </br> $("#container").ejChart({ primaryYAxis: { range: { maximum: 10 }} }); Property:maximum </br> </br> let chart: Chart = new Chart({ primaryYAxis: { maximum: 23 } }); chart.appendTo('#chart');
interval for primaryYAxis Property:range.interval </br> </br> $("#container").ejChart({ primaryYAxis: { range: { interval: 1 }} }); Property:interval </br> </br> let chart: Chart = new Chart({ primaryYAxis: { interval: 2 } }); chart.appendTo('#chart');
RangePadding for primaryYAxis Property:rangePadding </br> </br> $("#container").ejChart({ primaryYAxis: { rangePadding: 'None' }} }); Property:rangePadding </br> </br> let chart: Chart = new Chart({ primaryYAxis: { rangePadding: 'None' } }); chart.appendTo('#chart');
Rounding Places in primaryYAxis Property:roundingPlaces </br> </br> $("#container").ejChart({ primaryYAxis: { roundingPlaces: 3 } }); Property:labelFormat </br> </br> let chart: Chart = new Chart({ primaryYAxis: { labelFormat: 'n3' } }); chart.appendTo('#chart');
ScrollBar settings of primaryYAxis Property:scrollbarSettings </br> </br> $("#container").ejChart({ primaryYAxis: { scrollbarSettings : { } } }); Not Applicable
TickPosition in primaryYAxis Property:tickLinesPosition </br> </br> $("#container").ejChart({ primaryYAxis: { tickLinesPosition: 'Inside' } }); Property:tickPosition </br> </br> let chart: Chart = new Chart({ primaryYAxis: { tickPosition: 'Inside' } }); chart.appendTo('#chart');
valueType of primaryYAxis Property:valueType </br> </br> $("#container").ejChart({ primaryYAxis: { valueType: 'DateTime' } }); Property:valueType </br> </br> let chart: Chart = new Chart({ primaryYAxis: { valueType: 'DateTime' } }); chart.appendTo('#chart');
visible of primaryYAxis Property:visible </br> </br> $("#container").ejChart({ primaryYAxis: { visible: true } }); Property:visible </br> </br> let chart: Chart = new Chart({ primaryYAxis: { visible: true } }); chart.appendTo('#chart');
zoomFactor of primaryYAxis Property:zoomFactor </br> </br> $("#container").ejChart({ primaryYAxis: { zoomFactor: 0.3 } }); Property:zoomFactor </br> </br> let chart: Chart = new Chart({ primaryYAxis: { zoomFactor: 0.3 } }); chart.appendTo('#chart');
zoomPosition of primaryYAxis Property:zoomPosition </br> </br> $("#container").ejChart({ primaryYAxis: { zoomPosition: 0.3 } }); Property:zoomPosition </br> </br> let chart: Chart = new Chart({ primaryYAxis: { zoomPosition: 0.3 } }); chart.appendTo('#chart');
labelBorder of primaryYAxis Property:labelBorder </br> </br> $("#container").ejChart({ primaryYAxis: { labelBorder: { color: 'red', width: 2} } }); Property:border </br> </br> let chart: Chart = new Chart({ primaryYAxis: { border: { color: 'red', width: 3 } } }); chart.appendTo('#chart');
title of primaryYAxis Property:title.text </br> </br> $("#container").ejChart({ primaryYAxis: { title: { text: 'Chart title' } } }); Property:title </br> </br> let chart: Chart = new Chart({ primaryYAxis: { title: 'Chart title' } }); chart.appendTo('#chart');
StripLine of primaryYAxis Property:stripLine </br> </br> $("#container").ejChart({ primaryYAxis: { stripLine: [] } }); Property:stripLines </br> </br> let chart: Chart = new Chart({ primaryYAxis: { stripLines: [] } }); chart.appendTo('#chart');
Multilevel labels of primaryYAxis Property:multiLevelLabels </br> </br> $("#container").ejChart({ primaryYAxis: { multiLevelLabels: [] } }); Property:multiLevelLabels </br> </br> let chart: Chart = new Chart({ primaryYAxis: { stripLines: [] } }); chart.appendTo('#chart');
skeleton for an axes Not Applicable Property:skeleton </br> </br> let chart: Chart = new Chart({ axes: [ { skeleton: 'yMd' }] }); chart.appendTo('#chart');
skeleton type for an axes Not Applicable Property:skeletonType </br> </br> 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 </br> </br> $("#container").ejChart({ axes: [ { alternateGridBand: { even: { fill: 'red }}}] }); Not applicable
Axis line cross value Property:crossesAt </br> </br> $("#container").ejChart({ axes: [ { crossesAt: 0 }] }); Property:crossesAt </br> </br> let chart: Chart = new Chart({ axes: [ { crossesAt: 4}] }); chart.appendTo('#chart');
axis name with which the axis line has to be crossed Property:crossesInAxis </br> </br> $("#container").ejChart({ axes: [ { crossesInAxis: '' }] }); Property:crossesInAxis </br> </br> let chart: Chart = new Chart({ axes: [ { crossesInAxis: '' }] }); chart.appendTo('#chart');
axis elements placed with axis line Property:showNextToAxisLine </br> </br> $("#container").ejChart({ axes: [ { showNextToAxisLine : true }] }); Property:placeNextToAxisLine </br> </br> let chart: Chart = new Chart({ axes: [ { placeNextToAxisLine: '' }] }); chart.appendTo('#chart');
axis line style Property:axisLine.color </br> </br> $("#container").ejChart({ axes: [ { axisLine: { color : 'red' } }] }); Property:lineStyle.color </br> </br> let chart: Chart = new Chart({ axes: [ { lineStyle: { color: 'black' } }] }); chart.appendTo('#chart');
axis line dashArray Property:axisLine.color </br> </br> $("#container").ejChart({ axes: [ { axisLine: { dashArray : '10, 5' } }] }); Property:lineStyle.dashArray </br> </br> let chart: Chart = new Chart({ axes: [ { lineStyle: { dashArray: '10, 5' } }] }); chart.appendTo('#chart');
Offset for axis Property:axisLine.offset </br> </br> $("#container").ejChart({ axes: [ { axisLine: { offset : 10 } }] }); Property:plotOffset </br> </br> let chart: Chart = new Chart({ axes: [ { plotOffset: 10 }] }); chart.appendTo('#chart');
Visible of an axis Property:axisLine.offset </br> </br> $("#container").ejChart({ axes: [ { axisLine: { visible : false } }] }); Property:visible </br> </br> let chart: Chart = new Chart({ axes: [ { visible: false }] }); chart.appendTo('#chart');
Width of an axis Property:axisLine.width </br> </br> $("#container").ejChart({ axes: [ { axisLine: { width : 2 } }] }); Property:lineStyle.width </br> </br> let chart: Chart = new Chart({ axes: [ { lineStyle: { width: 3 } }] }); chart.appendTo('#chart');
Column index of an axis Property:columnIndex </br> </br> $("#container").ejChart({ axes: [ { columnIndex: 2 }] }); Property:columnIndex </br> </br> let chart: Chart = new Chart({ axes: [ { columnIndex: 2 }] }); chart.appendTo('#chart');
span of an axis to place horizontally or vertically Property:columnSpan </br> </br> $("#container").ejChart({ axes: [ { columnIndex: 2 }] }); Property:span </br> </br> let chart: Chart = new Chart({ axes: [ { span: 2 }] }); chart.appendTo('#chart');
Crosshair label of an axis Property:crossHairLabel.visible </br> </br> $("#container").ejChart({ axes: [ { crossHairLabel: { visible: true }}] }); Property:crossHairTooltip.enable </br> </br> let chart: Chart = new Chart({ axes: [ { crossHairTooltip: { enable: true }}] }); chart.appendTo('#chart');
Crosshair label color of an axis Not applicable Property:crossHairTooltip.fill </br> </br> let chart: Chart = new Chart({ axes: [ { crossHairTooltip: { fill: 'red' }}] }); chart.appendTo('#chart');
Crosshair label text style Not applicable Property:crossHairTooltip.textStyle </br> </br> let chart: Chart = new Chart({ axes: [ { crossHairTooltip: { textStyle: { } }}] }); chart.appendTo('#chart');
Desired interval count for primaryYAxis Property:desiredIntervals </br> </br> $("#container").ejChart({ axes: [ { desiredIntervals: 4}] }); Property:desiredIntervals </br> </br> let chart: Chart = new Chart({ axes: [ { desiredIntervals: 4 }] }); chart.appendTo('#chart');
Edges primaryYAxis Property:edgeLabelPlacement </br> </br> $("#container").ejChart({ axes: [ { edgeLabelPlacement: 'none' }] }); Property:edgeLabelPlacement </br> </br> let chart: Chart = new Chart({ axes: [ { edgeLabelPlacement: 'Shift' }] }); chart.appendTo('#chart');
Enables trim for axis labels Property:enableTrim </br> </br> $("#container").ejChart({ axes: [ { enableTrim: true }] }); Property:enableTrim </br> </br> 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 </br> </br> $("#container").ejChart({ axes: [ { enableAutoIntervalOnZooming: true }] }); Property:enableAutoIntervalOnZooming </br> </br> 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 </br> </br> $("#container").ejChart({ axes: [ { enableAutoIntervalOnZooming: true }] }); Property:enableAutoIntervalOnZooming </br> </br> let chart: Chart = new Chart({ axes: [ { enableAutoIntervalOnZooming: true }] }); chart.appendTo('#chart');
Font style for primaryYAxis Property:font </br> </br> $("#container").ejChart({ axes: [ { font: { fontFamily: 'Calibri', fontStyle: 'italic', fontWeight: '', opacity: 0.5, size: 12} }] }); Property:titleStyle </br> </br> let chart: Chart = new Chart({ axes: [ { titleStyle: { } }] }); chart.appendTo('#chart');
Indexed for category axis Property:isIndexed </br> </br> $("#container").ejChart({ axes: [ { isIndexed: true }] }); Property:isIndexed </br> </br> let chart: Chart = new Chart({ axes: [ { isIndexed: true }] }); chart.appendTo('#chart');
Interval type for date time axis Property:intervalType </br> </br> $("#container").ejChart({ axes: [ { intervalType}: 'Auto' } ] }); Property:intervalType </br> </br> let chart: Chart = new Chart({ axes: [ { intervalType: 'Auto }] }); chart.appendTo('#chart');
Inversed axis Property:isInversed </br> </br> $("#container").ejChart({ axes: [ { isInversed: true }] }); Property:isInversed </br> </br> let chart: Chart = new Chart({ axes: [ { isInversed: true }] }); chart.appendTo('#chart');
Custom label format Property:labelFormat </br> </br> $("#container").ejChart({ axes: [ { labelFormat: '{value}K' }] }); Property:labelFormat </br> </br> let chart: Chart = new Chart({ axes: [ { labelFormat: '{value}K' }] }); chart.appendTo('#chart');
labelIntersectAction Property:labelIntersectAction </br> </br> $("#container").ejChart({ axes: [ { labelIntersectAction: 'trim' }] }); Property:labelIntersectAction </br> </br> let chart: Chart = new Chart({ axes: [ { labelIntersectAction: 'Trim' }] }); chart.appendTo('#chart');
labelPosition Property:labelPosition </br> </br> $("#container").ejChart({ axes: [ { labelPosition: 'inside' }] }); Property:labelPosition </br> </br> let chart: Chart = new Chart({ axes: [ { labelPosition: 'Inside' }] }); chart.appendTo('#chart');
labelPlacement for category axis Property:labelPlacement </br> </br> $("#container").ejChart({ axes: [ { labelPlacement: 'onTicks' }] }); Property:labelPlacement </br> </br> let chart: Chart = new Chart({ axes: [ { labelPlacement: 'OnTicks' }] }); chart.appendTo('#chart');
Axis label alignment Property:alignment </br> </br> $("#container").ejChart({ axes: [ { alignment: 'center' }] }); Not Applicable
Rotation of axis labels Property:labelRotation </br> </br> $("#container").ejChart({ axes: [ { labelRotation: 45 }] }); Property:labelRotation </br> </br> let chart: Chart = new Chart({ axes: [ { labelRotation: 45 }] }); chart.appendTo('#chart');
Log base value for logarithmic axis Property:logBase </br> </br> $("#container").ejChart({ axes: [ { logBase: 10 }] }); Property:labelRotation </br> </br> let chart: Chart = new Chart({ axes: [ { logBase: 10 }] }); chart.appendTo('#chart');
Major grid line Property:majorGridLines.visible </br> </br> $("#container").ejChart({ axes: [ { majorGridLines: { visible: true} }] }); Not Applicable
Width of MajorGridLines Property:majorGridLines.width </br> </br> $("#container").ejChart({ axes: [ { majorGridLines: { width: 2} }] }); Property:majorGridLines.width </br> </br> let chart: Chart = new Chart({ axes: [ { majorGridLines: { width: 2} }] }); chart.appendTo('#chart');
Color of MajorGridLines Property:majorGridLines.color </br> </br> $("#container").ejChart({ axes: [ { majorGridLines: { color: 'black' } }] }); Property:majorGridLines.color </br> </br> let chart: Chart = new Chart({ axes: [ { majorGridLines: { color: 'black' } }] }); chart.appendTo('#chart');
DashArray of MajorGridLines Property:majorGridLines.dashArray </br> </br> $("#container").ejChart({ axes: [ { majorGridLines: { dashArray: 'black' } }] }); Property:majorGridLines.dashArray </br> </br> let chart: Chart = new Chart({ axes: [ { majorGridLines: { dashArray: 'black' } }] }); chart.appendTo('#chart');
Opacity of major grid line Property:majorGridLines.opacity </br> </br> $("#container").ejChart({ axes: [ { majorGridLines: { opacity: true} }] }); Not Applicable
Major Tick line Property:majorTickLines.visible </br> </br> $("#container").ejChart({ axes: [ { majorTickLines: { visible: true} }] }); Not Applicable
Width of MajorTickLines Property:majorTickLines.width </br> </br> $("#container").ejChart({ axes: [ { majorTickLines: { width: 2} }] }); Property:majorTickLines.width </br> </br> let chart: Chart = new Chart({ axes: [ { majorTickLines: { width: 2} }] }); chart.appendTo('#chart');
Height of MajorTickLines Property:majorTickLines.size </br> </br> $("#container").ejChart({ axes: [ { majorTickLines: { size: 2} }] }); Property:majorTickLines.height </br> </br> let chart: Chart = new Chart({ axes: [ { majorTickLines: { height: 2} }] }); chart.appendTo('#chart');
Color of MajorTickLines Property:majorTickLines.color </br> </br> $("#container").ejChart({ axes: [ { majorTickLines: { color: 'black' } }] }); Property:majorTickLines.color </br> </br> let chart: Chart = new Chart({ axes: [ { majorTickLines: { color: 'black' } }] }); chart.appendTo('#chart');
Opacity of major Tick line Property:majorTickLines.opacity </br> </br> $("#container").ejChart({ axes: [ { majorTickLines: { opacity: true} }] }); Not Applicable
maximum labels of primaryYAxis Property:maximumLabels </br> </br> $("#container").ejChart({ axes: [ { maximumLabels: 5 }] }); Property:maximumLabels </br> </br> let chart: Chart = new Chart({ axes: [ { maximumLabels: 4 }] }); chart.appendTo('#chart');
maximum labels width of primaryYAxis to trim Property:maximumLabelWidth </br> </br> $("#container").ejChart({ axes: [ { maximumLabelWidth: 40 }] }); Property:maximumLabelWidth </br> </br> let chart: Chart = new Chart({ axes: [ { maximumLabelWidth: 4 }] }); chart.appendTo('#chart');
minor grid line Property:minorGridLines.visible </br> </br> $("#container").ejChart({ axes: [ { minorGridLines: { visible: true} }] }); Not Applicable
Width of minorGridLines Property:minorGridLines.width </br> </br> $("#container").ejChart({ axes: [ { minorGridLines: { width: 2} }] }); Property:minorGridLines.width </br> </br> let chart: Chart = new Chart({ axes: [ { minorGridLines: { width: 2} }] }); chart.appendTo('#chart');
Color of minorGridLines Property:minorGridLines.color </br> </br> $("#container").ejChart({ axes: [ { minorGridLines: { color: 'black' } }] }); Property:minorGridLines.color </br> </br> let chart: Chart = new Chart({ axes: [ { minorGridLines: { color: 'black' } }] }); chart.appendTo('#chart');
DashArray of minorGridLines Property:minorGridLines.dashArray </br> </br> $("#container").ejChart({ axes: [ { minorGridLines: { dashArray: 'black' } }] }); Property:minorGridLines.dashArray </br> </br> let chart: Chart = new Chart({ axes: [ { minorGridLines: { dashArray: 'black' } }] }); chart.appendTo('#chart');
Opacity of minor grid line Property:minorGridLines.opacity </br> </br> $("#container").ejChart({ axes: [ { minorGridLines: { opacity: true} }] }); Not Applicable
minor Tick line Property:minorTickLines.visible </br> </br> $("#container").ejChart({ axes: [ { minorTickLines: { visible: true} }] }); Not Applicable
Width of minorTickLines Property:minorTickLines.width </br> </br> $("#container").ejChart({ axes: [ { minorTickLines: { width: 2} }] }); Property:minorTickLines.width </br> </br> let chart: Chart = new Chart({ axes: [ { minorTickLines: { width: 2} }] }); chart.appendTo('#chart');
Height of minorTickLines Property:minorTickLines.size </br> </br> $("#container").ejChart({ axes: [ { minorTickLines: { size: 2} }] }); Property:minorTickLines.height </br> </br> let chart: Chart = new Chart({ axes: [ { minorTickLines: { height: 2} }] }); chart.appendTo('#chart');
Color of minorTickLines Property:minorTickLines.color </br> </br> $("#container").ejChart({ axes: [ { minorTickLines: { color: 'black' } }] }); Property:minorTickLines.color </br> </br> let chart: Chart = new Chart({ axes: [ { minorTickLines: { color: 'black' } }] }); chart.appendTo('#chart');
Opacity of minor Tick line Property:minorTickLines.opacity </br> </br> $("#container").ejChart({ axes: [ { minorTickLines: { opacity: true} }] }); Not Applicable
Minor ticks per interval of primaryYAxis Property:minorTicksPerInterval </br> </br> $("#container").ejChart({ axes: [ { minorTicksPerInterval: 4 }] }); Property:minorTickLines.color </br> </br> let chart: Chart = new Chart({ axes: [ { minorTicksPerInterval: 4 }] }); chart.appendTo('#chart');
name of the primaryYAxis Property:name </br> </br> $("#container").ejChart({ axes: [ { name: 'primaryYAxis' }] }); Property:name </br> </br> let chart: Chart = new Chart({ axes: [ { name: 'primaryYAxis' }] }); chart.appendTo('#chart');
Orientation of primaryYAxis Property:orientation </br> </br> $("#container").ejChart({ axes: [ { orientation: 'Vertical' }] }); Not Applicable
Plot offset for primaryYAxis Property:plotOffset </br> </br> $("#container").ejChart({ axes: [ { plotOffset: 0 }] }); Property:plotOffset </br> </br> let chart: Chart = new Chart({ axes: [ { plotOffset: 0 }] }); chart.appendTo('#chart');
minimum for primaryYAxis Property:range.minimum </br> </br> $("#container").ejChart({ axes: [ { range: { minimum: 10 }}] }); Property:minimum </br> </br> let chart: Chart = new Chart({ axes: [ { minimum: 23 }] }); chart.appendTo('#chart');
maximum for primaryYAxis Property:range.maximum </br> </br> $("#container").ejChart({ axes: [ { range: { maximum: 10 }}] }); Property:maximum </br> </br> let chart: Chart = new Chart({ axes: [ { maximum: 23 }] }); chart.appendTo('#chart');
interval for primaryYAxis Property:range.interval </br> </br> $("#container").ejChart({ axes: [ { range: { interval: 1 }}] }); Property:interval </br> </br> let chart: Chart = new Chart({ axes: [ { interval: 2 }] }); chart.appendTo('#chart');
RangePadding for primaryYAxis Property:rangePadding </br> </br> $("#container").ejChart({ axes: [ { rangePadding: 'None' }}] }); Property:rangePadding </br> </br> let chart: Chart = new Chart({ axes: [ { rangePadding: 'None' }] }); chart.appendTo('#chart');
Rounding Places in primaryYAxis Property:roundingPlaces </br> </br> $("#container").ejChart({ axes: [ { roundingPlaces: 3 }] }); Property:labelFormat </br> </br> let chart: Chart = new Chart({ axes: [ { labelFormat: 'n3' }] }); chart.appendTo('#chart');
ScrollBar settings of primaryYAxis Property:scrollbarSettings </br> </br> $("#container").ejChart({ axes: [ { scrollbarSettings : { } }] }); Not Applicable
TickPosition in primaryYAxis Property:tickLinesPosition </br> </br> $("#container").ejChart({ axes: [ { tickLinesPosition: 'Inside' }] }); Property:tickPosition </br> </br> let chart: Chart = new Chart({ axes: [ { tickPosition: 'Inside' }] }); chart.appendTo('#chart');
valueType of primaryYAxis Property:valueType </br> </br> $("#container").ejChart({ axes: [ { valueType: 'DateTime' }] }); Property:valueType </br> </br> let chart: Chart = new Chart({ axes: [ { valueType: 'DateTime' }] }); chart.appendTo('#chart');
visible of primaryYAxis Property:visible </br> </br> $("#container").ejChart({ axes: [ { visible: true }] }); Property:visible </br> </br> let chart: Chart = new Chart({ axes: [ { visible: true }] }); chart.appendTo('#chart');
zoomFactor of primaryYAxis Property:zoomFactor </br> </br> $("#container").ejChart({ axes: [ { zoomFactor: 0.3 }] }); Property:zoomFactor </br> </br> let chart: Chart = new Chart({ axes: [ { zoomFactor: 0.3 }] }); chart.appendTo('#chart');
zoomPosition of primaryYAxis Property:zoomPosition </br> </br> $("#container").ejChart({ axes: [ { zoomPosition: 0.3 }] }); Property:zoomPosition </br> </br> let chart: Chart = new Chart({ axes: [ { zoomPosition: 0.3 }] }); chart.appendTo('#chart');
labelBorder of primaryYAxis Property:labelBorder </br> </br> $("#container").ejChart({ axes: [ { labelBorder: { color: 'red', width: 2} }] }); Property:border </br> </br> let chart: Chart = new Chart({ axes: [ { border: { color: 'red', width: 3 } }] }); chart.appendTo('#chart');
title of primaryYAxis Property:title.text </br> </br> $("#container").ejChart({ axes: [ { title: { text: 'Chart title' } }] }); Property:title </br> </br> let chart: Chart = new Chart({ axes: [ { title: 'Chart title' }] }); chart.appendTo('#chart');
StripLine of primaryYAxis Property:stripLine </br> </br> $("#container").ejChart({ axes: [ { stripLine: [] }] }); Property:stripLines </br> </br> let chart: Chart = new Chart({ axes: [ { stripLines: [] }] }); chart.appendTo('#chart');
Multilevel labels of axes Property:multiLevelLabels </br> </br> $("#container").ejChart({ axes: [ { multiLevelLabels: [] }] }); Property:multiLevelLabels </br> </br> let chart: Chart = new Chart({ axes: [ { stripLines: [] }] }); chart.appendTo('#chart');
skeleton for an axes Not Applicable Property:skeleton </br> </br> let chart: Chart = new Chart({ axes: [ { skeleton: 'yMd' }] }); chart.appendTo('#chart');
skeleton type for an axes Not Applicable Property:skeletonType </br> </br> 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 </br> </br> $("#chart").ejChart({ rowDefinitions: []; }); Property:rows </br> </br> let chart: Chart = new Chart({ rows: []; }); chart.appendTo('#chart');
unit Property:unit </br> </br> $("#container").ejChart({ rowDefinitions :[{unit : "percentage"}] }); Not Applicable
height of rows in chart Property:rowHeight </br> </br> $("#chart").ejChart({ rowDefinitions: [{ rowHeight: '50%'}]; }); Property:height </br> </br> let chart: Chart = new Chart({ rows: [ { height: '300'}]; }); chart.appendTo('#chart');
Line customization Property:lineColor, lineWidth </br> </br> $("#chart").ejChart({ rowDefinitions: [{ rowHeight: '50%', lineColor: 'brown', lineWidth: 2}]; }); Property:border </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{bearFillColor: 'red' }]; }); Property:bearFillColor </br> </br> let chart: Chart = new Chart({ series: [{bearFillColor: 'red' }]; }); chart.appendTo('#chart');
Border Property:border </br> </br> $("#chart").ejChart({ series: [{ border: { color: 'red', width: 2, dashArray: '10, 5' } }]; }); Property:rows </br> </br> let chart: Chart = new Chart({ series: [{ border: { color: 'red', width: 2} }]; }); chart.appendTo('#chart');
BoxPlotMode Property:boxPlotMode </br> </br> $("#chart").ejChart({ series: [{ boxPlotMode: 'inclusive' }]; }); Property:rows </br> </br> let chart: Chart = new Chart({ series: [{ boxPlotMode: 'Inclusive' }]; }); chart.appendTo('#chart');
Minimum radius of Bubble series Property:bubbleOptions.minRadius </br> </br> $("#chart").ejChart({ series: [{ bubbleOptions: { minRadius: 2} }]; }); Property:minRadius </br> </br> let chart: Chart = new Chart({ series: [{ minRadius: 2 }]; }); chart.appendTo('#chart');
Maximum radius of Bubble series Property:bubbleOptions.maxRadius </br> </br> $("#chart").ejChart({ series: [{ bubbleOptions: { maxRadius: 10 } }]; }); Property:maxRadius </br> </br> let chart: Chart = new Chart({ series: [{ maxRadius: 2 }]; }); chart.appendTo('#chart');
bullFillColor Property:bullFillColor </br> </br> $("#chart").ejChart({ series: [{bullFillColor: 'red' }]; }); Property:bullFillColor </br> </br> let chart: Chart = new Chart({ series: [{bullFillColor: 'red' }]; }); chart.appendTo('#chart');
Cardinal spline tension for spline series Property:cardinalSplineTension </br> </br> $("#chart").ejChart({ series: [{ cardinalSplineTension: 0.5 }]; }); Property:cardinalSplineTension </br> </br> let chart: Chart = new Chart({ series: [{ cardinalSplineTension: 0.5 }]; }); chart.appendTo('#chart');
Column Width for rectangle series Property:columnWidth </br> </br> $("#chart").ejChart({ series: [{ columnWidth: 0.5 }]; }); Property:columnWidth </br> </br> let chart: Chart = new Chart({ series: [{ columnWidth: 0.5 }]; }); chart.appendTo('#chart');
Column spacing for rectangle series Property:columnSpacing </br> </br> $("#chart").ejChart({ series: [{ columnSpacing: 0.5 }]; }); Property:columnSpacing </br> </br> let chart: Chart = new Chart({ series: [{ columnSpacing: 0.5 }]; }); chart.appendTo('#chart');
Topleft radius for rectangle series Property:cornerRadius.topLeft </br> </br> $("#chart").ejChart({ series: [{ topLeft: 0 }]; }); Property:cornerRadius.topLeft </br> </br> let chart: Chart = new Chart({ series: [{ topLeft: 0 }]; }); chart.appendTo('#chart');
topRight radius for rectangle series Property:cornerRadius.topRight </br> </br> $("#chart").ejChart({ series: [{ topRight: 0 }]; }); Property:cornerRadius.topRight </br> </br> let chart: Chart = new Chart({ series: [{ topRight: 0 }]; }); chart.appendTo('#chart');
bottomRight radius for rectangle series Property:cornerRadius.bottomRight </br> </br> $("#chart").ejChart({ series: [{ bottomRight: 0 }]; }); Property:cornerRadius.bottomRight </br> </br> let chart: Chart = new Chart({ series: [{ bottomRight: 0 }]; }); chart.appendTo('#chart');
bottomLeft radius for rectangle series Property:cornerRadius.bottomLeft </br> </br> $("#chart").ejChart({ series: [{ bottomLeft: 0 }]; }); Property:cornerRadius.bottomLeft </br> </br> let chart: Chart = new Chart({ series: [{ bottomLeft: 0 }]; }); chart.appendTo('#chart');
DashArray property Property:dashArray </br> </br> $("#chart").ejChart({ series: [{ dashArray: '10, 5' }]; }); Property:dashArray </br> </br> let chart: Chart = new Chart({ series: [{ dashArray: '10, 5' }]; }); chart.appendTo('#chart');
DataSource for series Property:dataSource </br> </br> $("#chart").ejChart({ series: [{ dataSource: [] }]; }); Property:dashArray </br> </br> let chart: Chart = new Chart({ series: [{ dataSource: [] }]; }); chart.appendTo('#chart');
Draw type for Polar series Property:drawType </br> </br> $("#chart").ejChart({ series: [{ drawType: 'Line' }]; }); Property:drawType </br> </br> let chart: Chart = new Chart({ series: [{ drawType: 'Line' }]; }); chart.appendTo('#chart');
EmptyPointSettings for series Property:emptyPointSettings.visible </br> </br> $("#chart").ejChart({ series: [{ emptyPointSettings: { visible: false } }]; }); Not Applicable
Empty Point Display mode Property:emptyPointSettings.displayMode </br> </br> $("#chart").ejChart({ series: [{ displayMode: 'gap' }]; }); Property:emptyPointSettings.displayMode </br> </br> let chart: Chart = new Chart({ series: [{ displayMode: 'Average' }]; }); chart.appendTo('#chart');
Empty Point color Property:emptyPointSettings.color </br> </br> $("#chart").ejChart({ series: [{ color: 'red' }]; }); Property:emptyPointSettings.fill </br> </br> let chart: Chart = new Chart({ series: [{ fill: 'red' }]; }); chart.appendTo('#chart');
Empty Point Border Property:emptyPointSettings.border </br> </br> $("#chart").ejChart({ series: [{ emptyPointSettings: { color: 'red', width: 2 }]; }); Property:fill </br> </br> let chart: Chart = new Chart({ series: [{ emptyPointSettings: { color: 'red', width: 2 }]; }); chart.appendTo('#chart');
Enable animation for series Property:enableAnimation </br> </br> $("#chart").ejChart({ series: [{ enableAnimation: true }]; }); Property:animation.enable </br> </br> let chart: Chart = new Chart({ series: [ animation: { enable: false }]; }); chart.appendTo('#chart');
Animation duration for series Property:animationDuration </br> </br> $("#chart").ejChart({ series: [{ animationDuration: 1000 }]; }); Property:animation.duration </br> </br> let chart: Chart = new Chart({ series: [ animation: { duration: 1000 }]; }); chart.appendTo('#chart');
Animation delay for series Not Applicable Property:animation.duration </br> </br> let chart: Chart = new Chart({ series: [ animation: { delay: 100 }]; }); chart.appendTo('#chart');
Drag settings for series Property:dragSettings </br> </br> $("#chart").ejChart({ series: [{ dragSettings: { mode: 'X' } }]; }); Not Applicable
Errorbar settings for series Property:errorBarSettings </br> </br> $("#chart").ejChart({ series: [{ errorBarSettings: { } }]; }); Property:errorBarSettings </br> </br> let chart: Chart = new Chart({ series: [ {errorBarSettings: { }}]; });
Closed series Property:isClosed </br> </br> $("#chart").ejChart({ series: [{ isClosed: true }]; }); Property:isClosed </br> </br> let chart: Chart = new Chart({ series: [ { isClosed: true }]; });
Stacking Property for series Property:isStacking </br> </br> $("#chart").ejChart({ series: [{ isStacking: true }]; }); Not Applicable
Line cap for series Property:lineCap </br> </br> $("#chart").ejChart({ series: [{ lineCap: 'butt' }]; }); Not Applicable
Line join for series Property:lineCap </br> </br> $("#chart").ejChart({ series: [{ lineJoin: 'round' }]; }); Not Applicable
Opacity for series Property:opacity </br> </br> $("#chart").ejChart({ series: [{ opacity: 0.7 }]; }); Property:errorBarSettings </br> </br> let chart: Chart = new Chart({ series: [ { opacity: 0.7 }]; });
Outlier settings of series Property:outLierSettings </br> </br> $("#chart").ejChart({ series: [{ outLierSettings: { shape: 'rectangle' , size: { height: 30, width: 20}} }]; }); Not Applicable
Palette Property:palette </br> </br> $("#chart").ejChart({ series: [{ palette: "ColorFieldName" }]; }); Property:pointColorMapping </br> </br> let chart: Chart = new Chart({ series: [ { pointColorMapping: 'color' }]; }); chart.appendTo('#chart);
Positive fill for waterfall series Property:positiveFill </br> </br> $("#chart").ejChart({ series: [{ positiveFill: "red" }]; }); Property:pointColorMapping </br> </br> let chart: Chart = new Chart({ series: [ { pointColorMapping: 'color' }]; }); chart.appendTo('#chart);
Show average value in box and whisker series Property:showMedian </br> </br> $("#chart").ejChart({ series: [{ showMedian: true }]; }); Property:pointColorMapping </br> </br> let chart: Chart = new Chart({ series: [ { showMean: false }]; }); chart.appendTo('#chart);
To group the series of stacking collection. Property:stackingGroup </br> </br> $("#chart").ejChart({ series: [{ stackingGroup: 'group' }]; }); Property:stackingGroup </br> </br> let chart: Chart = new Chart({ series: [ { stackingGroup: 'group' }]; }); chart.appendTo('#chart);
Specifies the type of the series to render in chart. Property:type </br> </br> $("#chart").ejChart({ series: [{ type: 'Line' }]; }); Property:type </br> </br> let chart: Chart = new Chart({ series: [ { type: 'Line' }]; }); chart.appendTo('#chart);
Defines the visibility of the series. Property:visibility </br> </br> $("#chart").ejChart({ series: [{ visibility: true }]; }); Property:visible </br> </br> let chart: Chart = new Chart({ series: [ { visible: true }]; }); chart.appendTo('#chart);
Enables or disables the visibility of legend item. Property:visibleOnLegend </br> </br> $("#chart").ejChart({ series: [{ visibleOnLegend : true }]; }); Property:toggleVisibility </br> </br> let chart: Chart = new Chart({ legendSettings: [ { toggleVisibility: true }]; }); chart.appendTo('#chart);
Specifies the different types of spline curve. Property:splineType </br> </br> $("#chart").ejChart({ series: [{ splineType : 'Natural' }]; }); Property:splineType </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ xAxisName : 'secondaryXAxis' }]; }); Property:xAxisName </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ xName : 'x' }]; }); Property:xName </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ yAxisName : 'secondaryYAxis' }]; }); Property:yAxisName </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ yName : 'y' }]; }); Property:yName </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ high : 'y' }]; }); Property:high </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ low : 'y' }]; }); Property:low </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ close : 'y' }]; }); Property:close </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ open : 'y' }]; }); Property:open </br> </br> let chart: Chart = new Chart({ series: [ { open: 'y' }]; }); chart.appendTo('#chart);
Option to add trendlines to chart. Property:trendLines </br> </br> $("#chart").ejChart({ series: [{ trendLines : [{}] }]; }); Property:trendLines </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ highlightSettings : {} }]; }); Not applicable.
Options for customizing the appearance of the series/data point on selection. Property:selectionSettings </br> </br> $("#chart").ejChart({ series: [{ selectionSettings : {} }]; }); Not applicable.
## marker
visibility of marker Property:visible </br> </br> $("#chart").ejChart({ series: [{ marker: { visible: true } ]; }); Property:visible </br> </br> let chart: Chart = new Chart({ series: [ { marker: { visible: false } }]; }); chart.appendTo('#chart);
Fill for marker Property:fill </br> </br> $("#chart").ejChart({ series: [{ marker: { fill : 'red' } }]; }); Property:visible </br> </br> let chart: Chart = new Chart({ series: [{ marker: { fill : 'red' } }]; }); chart.appendTo('#chart);
Opacity for marker Property:opacity </br> </br> $("#chart").ejChart({ series: [{ marker: { opacity : 0.5 } }]; }); Property:opacity </br> </br> let chart: Chart = new Chart({ series: [{ marker: { opacity : 0.5 } }]; }); chart.appendTo('#chart);
Shape of marker Property:shape </br> </br> $("#chart").ejChart({ series: [{ marker: { shape : 'Circle' } }]; }); Property:shape </br> </br> let chart: Chart = new Chart({ series: [{ marker: { shape : 'Triangle' } }]; }); chart.appendTo('#chart);
ImageUrl of marker Property:imageUrl </br> </br> $("#chart").ejChart({ series: [{ marker: { imageUrl : '' } }]; }); Property:imageUrl </br> </br> let chart: Chart = new Chart({ series: [{ marker: { imageUrl : '' } }]; }); chart.appendTo('#chart);
Border of marker Property:border </br> </br> $("#chart").ejChart({ series: [{ marker: { border : { width: 2, color: 'red' } } }]; }); Property:shape </br> </br> let chart: Chart = new Chart({ series: [{ marker: { border : { width: 2, color: 'red' } } }]; }); chart.appendTo('#chart);
Height of marker Property:size.height </br> </br> $("#chart").ejChart({ series: [{ marker: { size: { height: 30} } }]; }); Property:height </br> </br> let chart: Chart = new Chart({ series: [{ marker: { height: 25 } }]; }); chart.appendTo('#chart);
Width of marker Property:size.width </br> </br> $("#chart").ejChart({ series: [{ marker: { size: { width: 30} } }]; }); Property:width </br> </br> let chart: Chart = new Chart({ series: [{ marker: { width: 25 } }]; }); chart.appendTo('#chart);
Width of marker Property:size.width </br> </br> $("#chart").ejChart({ series: [{ marker: { size: { width: 30} } }]; }); Property:width </br> </br> let chart: Chart = new Chart({ series: [{ marker: { width: 25 } }]; }); chart.appendTo('#chart);
DataLabelSettings of marker Property:marker.dataLabel </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { } } }]; }); Property:marker.dataLabel </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { } } }]; }); chart.appendTo('#chart);
Visibility of dataLabel Property:dataLabel.visible </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { visible: true } } }]; }); Property:dataLabel.visible </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { visible: true } } }]; }); chart.appendTo('#chart);
Text mapping name of dataLabel Property:dataLabel.textMappingName </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { textMappingName: '' } } }]; }); Property:dataLabel.name </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { name: '' } } }]; }); chart.appendTo('#chart);
Fill color of data label Property:dataLabel.fill </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { fill: 'pink' } } }]; }); Property:dataLabel.fill </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { fill: 'pink' } } }]; }); chart.appendTo('#chart);
Opacity of data label Property:dataLabel.opacity </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { opacity: 0.6 } } }]; }); Property:dataLabel.fill </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { opacity: 0.4 } } }]; }); chart.appendTo('#chart);
Text position of data label Property:dataLabel.textPosition </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { textPosition: 'middle' } } }]; }); Property:dataLabel.position </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { position: 'Top' } } }]; }); chart.appendTo('#chart);
Alignment of data label Property:dataLabel.verticalAlignment </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { verticalAlignment: 'near' } } }]; }); Property:dataLabel.alignment </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { alignment: 'Near' } } }]; }); chart.appendTo('#chart);
Border of data label Property:dataLabel.border </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { border: { color: 'blue', width: 2, opacity: 0.4} } } }]; }); Property:dataLabel.alignment </br> </br> let chart: Chart = new Chart({ series: [{ marker: { dataLabel: { border: { color: 'blue', width: 2 } } } }]; }); chart.appendTo('#chart);
Offset for data label Property:dataLabel.offset </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { offset: { x: 5, y: 6 }} } }]; }); Not Applicable
Margin of data label Property:dataLabel.border </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { margin: { top: 10, bottom: 10, left: 10, right: 10}} } }]; }); Property:dataLabel.margin </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { font: { fontFamily: 'SegoeUI', fontStyle: 'italic', fontWeight: '600', opacity: 0.5, size: 12, color: 'red' }} } }]; }); Property:dataLabel.margin </br> </br> 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 </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { template: '
Chart
' } } }]; });
Property:dataLabel.template </br> </br> let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { template: '
Chart
' } } }]; }); chart.appendTo('#chart);
Rounded corner radius X Not Applicable Property:dataLabel.rx </br> </br> let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { rx: 10 } } }]; }); chart.appendTo('#chart);
Rounded corner radius Y Not Applicable Property:dataLabel.ry </br> </br> let chart: Chart = new Chart({ series: [{ marker: {dataLabel: { ry: 10 } } }]; }); chart.appendTo('#chart);
Maximum Label width for data label Property:dataLabel.maximumLabelWidth </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { maximumLabelWidth: 20}} } }]; }); Not Applicable
Enable wrapping of text for data label Property:dataLabel.enableWrap </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { enableWrap: true }} } }]; }); Not Applicable
To show contrast color for data label Property:dataLabel.showContrastColor </br> </br> $("#chart").ejChart({ series: [{ marker: {dataLabel: { showContrastColor: true }} } }]; }); Not Applicable
To show edge label for data label Property:dataLabel.showEdgeLabels </br> </br> $("#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 </br> </br> $("#chart").ejChart({ series: [{ trendLines: []}] }); Property:series.trendLines </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: []}] }); chart.appendTo('#chart');
Visibility of trendline Property:trendLines.visibility </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ visibility: true ]}] }); Not applicable
Type of trendLine Property:trendLines.type </br> </br> $("#chart").ejChart({ series: [{ trendLines: [type: 'linear' ]}] }); Property:trendLines.type </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ type: 'Polynomial']}] }); chart.appendTo('#chart');
Name of trendLine Property:trendLines.name </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ name: 'trendLine' ]}] }); Property:trendLines.name </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ name: 'trendLine']}] }); chart.appendTo('#chart');
Period of trendLine Property:trendLines.period </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ period: 45 ]}] }); Property:trendLines.period </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ period: 45]}] }); chart.appendTo('#chart');
Polynomial order for Polynomial type trendLines Property:trendLines.polynomialOrder </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ polynomialOrder: 3 ]}] }); Property:trendLines.polynomialOrder </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ polynomialOrder: 3]}] }); chart.appendTo('#chart');
Backward forecost for trendLines Property:trendLines.backwardforecast </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ backwardforecast: 3 ]}] }); Property:trendLines.backwardforecast </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ backwardforecast: 3]}] }); chart.appendTo('#chart');
Forward forecost for trendLines Property:trendLines.forwardForecast </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ forwardForecast: 3 ]}] }); Property:trendLines.forwardForecast </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ forwardForecast: 3]}] }); chart.appendTo('#chart');
Fill for trendLines Property:trendLines.fill </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ fill: '#EEFFCC' ]}] }); Property:trendLines.fill </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ fill: 'EEFFCC']}] }); chart.appendTo('#chart');
Width for trendLines Property:trendLines.width </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ width: 2 ]}] }); Property:trendLines.width </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ width: 2]}] }); chart.appendTo('#chart');
Intercept value for trendLines Property:trendLines.intercept </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ intercept: 2 ]}] }); Property:trendLines.intercept </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ intercept: 2]}] }); chart.appendTo('#chart');
Legend shape for trendLines Not Applicable Property:trendLines.legendShape </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ legendShape: 'Rectangle']}] }); chart.appendTo('#chart');
Animation settings for trendLines Not Applicable Property:trendLines.animation </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ animation: { enable: true }]}] }); chart.appendTo('#chart');
Marker settings for trendLines Not Applicable Property:trendLines.marker </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ {marker: { visible: true }}]}] }); chart.appendTo('#chart');
Tooltip for trendLines Property:trendLines.tooltip </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ { tooltip: { } } ]}] }); Property:trendLines.enableTooltip </br> </br> let chart: Chart = new Chart({ series: [ { trendLines: [ {enableTooltip: true }]}] }); chart.appendTo('#chart');
DashArray for trendLines Property:trendLines.dashArray </br> </br> $("#chart").ejChart({ series: [{ trendLines: [ { dashArray: '10, 5' } ]}] }); Not Applicable.
Visible on legend for trendLines Property:trendLines.visibleOnLegend </br> </br> $("#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 </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { visible: true }]} }); Property:primaryXAxis.stripLines </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { visible: true }]} }); chart.appendTo('#chart');
border for stripline Property:stripLines.borderColor </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { borderColor: 'pink' }]} }); Property:stripLines.border </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { border: { color: 'red', width: 2} }]} }); chart.appendTo('#chart');
Background color for stripline Property:stripLines.color </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { color: 'pink' }]} }); Property:stripLines.border </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { color: 'red'}]} }); chart.appendTo('#chart');
Start value for stripline Property:stripLines.start </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { start: 10 }]} }); Property:stripLines.start </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { start: 5}]} }); chart.appendTo('#chart');
End value for stripline Property:stripLines.end </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { end: 10 }]} }); Property:stripLines.end </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { end: 5}]} }); chart.appendTo('#chart');
StartfromAxis for stripline Property:stripLines.startFromAxis </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { startFromAxis: true }]} }); Property:stripLines.startFromAxis </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { startFromAxis: true}]} }); chart.appendTo('#chart');
Text in stripline Property:stripLines.text </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { text: 'StripLine; }]} }); Property:stripLines.text </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { text: 'stripline'}]} }); chart.appendTo('#chart');
Text alignment in stripline Property:stripLines.textAlignment </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { textAlignment: 'Far; }]} }); Property:stripLines.horizontalAlignment </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { horizontalAlignment: 'Far'}]} }); chart.appendTo('#chart');
Vertical Text alignment in stripline Not Applicable Property:stripLines.verticalAlignment </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { verticalAlignment: 'Far'}]} }); chart.appendTo('#chart');
Size of stripline Property:stripLines.width </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { width: 10; }]} }); Property:stripLines.size </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { size: 10 }]} }); chart.appendTo('#chart');
ZIndex of stripline Property:stripLines.zIndex </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { zIndex: 'Behind' }]} }); Property:stripLines.size </br> </br> let chart: Chart = new Chart({ primaryXAxis: { stripLines: [ { zIndex: 'Behind' }]} }); chart.appendTo('#chart');
Font style of stripline Property:stripLines.fontStyle </br> </br> $("#chart").ejChart({ primaryXAxis: { stripLines: [ { fontStyle: {} }]} }); Property:stripLines.textStyle </br> </br> 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 </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { visible: true }]} }); Property:primaryXAxis.multilevelLabels </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { }]} }); chart.appendTo('#chart');
Default behaviour for multilevelLabels Property:primaryXAxis.multilevelLabels </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { visible: true }]} }); Property:primaryXAxis.multilevelLabels </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { }]} }); chart.appendTo('#chart');
Text alignment for multilevelLabels Property:multiLevelLabels.textAlignment </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { textAlignment: 'Near' }]} }); Property:multilevelLabels.alignment </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ {alignment: 'Near' }]} }); chart.appendTo('#chart');
Text overflow for multilevelLabels Property:multiLevelLabels.textOverFlow </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { textOverFlow: 'Trim' }]} }); Property:multiLevelLabels.overFlow </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ {overFlow: 'Trim' }]} }); chart.appendTo('#chart');
Border for multilevelLabels Property:multiLevelLabels.border </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { border: { width: 2, color: 'red', type: 'brace' } }]} }); Property:multiLevelLabels.border </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { border: { width: 2, color: 'red', type: 'brace' } }]} }); chart.appendTo('#chart');
Start value for label Property:multiLevelLabels.start </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { start: 45 } }]} }); Property:multiLevelLabels.categories.start </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { start: 45}] } }]} }); chart.appendTo('#chart');
End value for label Property:multiLevelLabels.start </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { end: 45 } }]} }); Property:multiLevelLabels.categories.end </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { end: 45}] } }]} }); chart.appendTo('#chart');
Text for label Property:multiLevelLabels.text </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { text: 'Start' } }]} }); Property:multiLevelLabels.categories.text </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { text: 'text' }] } }]} }); chart.appendTo('#chart');
maximum text width for label Property:multiLevelLabels.maximumTextWidth </br> </br> $("#chart").ejChart({ primaryXAxis: { multilevelLabels: [ { maximumTextWidth: 10 } }]} }); Property:multiLevelLabels.categories.maximumTextWidth </br> </br> let chart: Chart = new Chart({ primaryXAxis: { multilevelLabels: [ { categories: [ { maximumTextWidth: 20 }] } }]} }); chart.appendTo('#chart');
level of labels Property:multiLevelLabels.level </br> </br> $("#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 </br> </br> $("#chart").ejChart({ animate: () { } }); Not applicable
Redraw for chart Property:chart.redraw </br> </br> $("#chart").ejChart({ redraw: () { } }); Property:chart.refresh() </br> </br> let chart: Chart = new Chart({ }); chart.appendTo('#chart'); chart.width = '400'; chart.refresh();
Export Property:chart.export() </br> </br> $("#chart").ejChart({ export: () { } }); Property:chart.export() </br> </br> let chart: Chart = new Chart({ }); chart.export('JPEG', 'chart'); chart.appendTo('#chart');
Print Property:chart.print() </br> </br> $("#chart").ejChart({ print: () { } }); Property:chart.print() </br> </br> let chart: Chart = new Chart({ }); chart.print('chart'); chart.appendTo('#chart');
AddSeries Not Applicable Property:chart.addSeries() </br> </br> let chart: Chart = new Chart({ }); chart.appendTo('#chart'); chart.addSeries();
RemoveSeries Not Applicable Property:chart.removeSeries() </br> </br> 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 </br> </br> $("#chart").ejChart({ annotationClick: () { } }); Not applicable
Fires after animation Property:animationComplete </br> </br> $("#chart").ejChart({ animationComplete: () { } }); Property:animationComplete() </br> </br> let chart: Chart = new Chart({ animationComplete: () => { } }); chart.appendTo('#chart');
Fires on axis label click Property:axisLabelClick </br> </br> $("#chart").ejChart({ axisLabelClick: () { } }); Not applicable
Fires before axis label render Property:axisLabelRendering </br> </br> $("#chart").ejChart({ axisLabelRendering: () { } }); Property:axisLabelRender() </br> </br> let chart: Chart = new Chart({ axisLabelRender: () => { } }); chart.appendTo('#chart');
Fires on axis label mouseMove Property:axisLabelMouseMove </br> </br> $("#chart").ejChart({ axisLabelMouseMove: () { } }); Not applicable
Fires on axis label initialize Property:axisLabelInitialize </br> </br> $("#chart").ejChart({ axisLabelInitialize: () { } }); Not applicable
Fires before axis range calculation Property:axesRangeCalculate </br> </br> $("#chart").ejChart({ axesRangeCalculate: () { } }); Property:axisRangeCalculated() </br> </br> let chart: Chart = new Chart({ axisRangeCalculated: () => { } }); chart.appendTo('#chart');
Fires on axis title rendering Property:axisTitleRendering </br> </br> $("#chart").ejChart({ axisTitleRendering: () { } }); Not applicable
Fires on after chart resize Property:afterResize </br> </br> $("#chart").ejChart({ afterResize: () { } }); Not applicable
Fires on before chart resize Property:beforeResize </br> </br> $("#chart").ejChart({ beforeResize: () { } }); Property:resized </br> </br> let chart: Chart = new Chart({ resized: () => { } }); chart.appendTo('#chart');
Fires on chart click Property:chartClick </br> </br> $("#chart").ejChart({ chartClick: () { } }); Property:chartMouseClick </br> </br> let chart: Chart = new Chart({ chartMouseClick: () => { } }); chart.appendTo('#chart');
Fires on chart mouse move Property:chartMouseMove </br> </br> $("#chart").ejChart({ chartMouseMove: () { } }); Property:chartMouseMove </br> </br> let chart: Chart = new Chart({ chartMouseMove: () => { } }); chart.appendTo('#chart');
Fires on chart mouse leave Property:chartMouseLeave </br> </br> $("#chart").ejChart({ chartMouseLeave: () { } }); Property:chartMouseLeave </br> </br> let chart: Chart = new Chart({ chartMouseLeave: () => { } }); chart.appendTo('#chart');
Fires on before chart double click Property:chartDoubleClick </br> </br> $("#chart").ejChart({ chartDoubleClick: () { } }); Not applicable
Fires on chart mouse up Not Applicable Property:chartmouseUp </br> </br> let chart: Chart = new Chart({ chartmouseUp: () => { } }); chart.appendTo('#chart');
Fires on chart mouse down Not Applicable Property:chartmouseDown </br> </br> 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 </br> </br> $("#chart").ejChart({ chartAreaBoundsCalculate: () { } }); Not applicable
Fires when the dragging is started Property:dragStart </br> </br> $("#chart").ejChart({ dragStart: () { } }); Not applicable
Fires while dragging Property:dragging </br> </br> $("#chart").ejChart({ dragging: () { } }); Not applicable
Fires when the dragging is completed Property:dragEnd </br> </br> $("#chart").ejChart({ dragEnd: () { } }); Property:dragComplete </br> </br> let chart: Chart = new Chart({ dragComplete: () => { } }); chart.appendTo('#chart');
Fires when chart is destroyed completely. Property:destroy </br> </br> $("#chart").ejChart({ destroy: () { } }); Not applicable
Fires after chart is created. Property:create </br> </br> $("#chart").ejChart({ create: () { } }); Property:loaded </br> </br> let chart: Chart = new Chart({ loaded: () => { } }); chart.appendTo('#chart');
Fires before rendering the data labels. Property:displayTextRendering </br> </br> $("#chart").ejChart({ displayTextRendering: () { } }); Property:textRender </br> </br> let chart: Chart = new Chart({ textRender: () => { } }); chart.appendTo('#chart');
Fires, when error bar is rendering. Property:errorBarRendering </br> </br> $("#chart").ejChart({ errorBarRendering: () { } }); Not applicable
Fires during the calculation of legend bounds. Property:legendBoundsCalculate </br> </br> $("#chart").ejChart({ legendBoundsCalculate: () { } }); Not applicable
Fires on clicking the legend item. Property:legendItemClick </br> </br> $("#chart").ejChart({ legendItemClick: () { } }); Not applicable
Fires when moving mouse over legend item Property:legendItemMouseMove </br> </br> $("#chart").ejChart({ legendItemMouseMove: () { } }); Not applicable
Fires before rendering the legend item. Property:legendItemRendering </br> </br> $("#chart").ejChart({ legendItemRendering: () { } }); Property:legendRender </br> </br> let chart: Chart = new Chart({ legendRender: () => { } }); chart.appendTo('#chart');
Fires before loading the chart. Property:load </br> </br> $("#chart").ejChart({ load: () { } }); Property:load </br> </br> let chart: Chart = new Chart({ load: () => { } }); chart.appendTo('#chart');
Fires, when multi level labels are rendering. Property:multiLevelLabelRendering </br> </br> $("#chart").ejChart({ multiLevelLabelRendering: () { } }); Property:axisMultiLabelRender </br> </br> let chart: Chart = new Chart({ axisMultiLabelRender : () => { } }); chart.appendTo('#chart');
Fires on clicking a point in chart. Property:pointRegionClick </br> </br> $("#chart").ejChart({ pointRegionClick: () { } }); Property:pointClick </br> </br> let chart: Chart = new Chart({ pointClick : () => { } }); chart.appendTo('#chart');
Fires when mouse is moved over a point. Property:pointRegionMouseMove </br> </br> $("#chart").ejChart({ pointRegionMouseMove: () { } }); Property:pointMove </br> </br> let chart: Chart = new Chart({ pointMove : () => { } }); chart.appendTo('#chart');
Fires before rendering chart. Property:preRender </br> </br> $("#chart").ejChart({ preRender: () { } }); Not applicable
Fires when point render. Not Applicable Property:pointRender </br> </br> let chart: Chart = new Chart({ pointRender : () => { } }); chart.appendTo('#chart');
Fires after selected the data in chart. Property:rangeSelected </br> </br> $("#chart").ejChart({ rangeSelected: () { } }); Not applicable
Fires after selecting a series. Property:seriesRegionClick </br> </br> $("#chart").ejChart({ seriesRegionClick: () { } }); Not applicable
Fires before rendering a series. Property:seriesRendering </br> </br> $("#chart").ejChart({ seriesRendering: () { } }); Property:seriesRender </br> </br> let chart: Chart = new Chart({ seriesRender : () => { } }); chart.appendTo('#chart');
Fires before rendering the marker symbols. Property:symbolRendering </br> </br> $("#chart").ejChart({ symbolRendering: () { } }); Not applicable
Fires before rendering the trendline Property:trendlineRendering </br> </br> $("#chart").ejChart({ trendlineRendering: () { } }); Not applicable
Fires before rendering the Chart title. Property:titleRendering </br> </br> $("#chart").ejChart({ titleRendering: () { } }); Not applicable
Fires before rendering the Chart sub title. Property:subTitleRendering </br> </br> $("#chart").ejChart({ subTitleRendering: () { } }); Not applicable
Fires before rendering the tooltip. Property:toolTipInitialize </br> </br> $("#chart").ejChart({ toolTipInitialize: () { } }); Property:tooltipRender </br> </br> let chart: Chart = new Chart({ tooltipRender : () => { } }); chart.appendTo('#chart');
Fires before rendering crosshair tooltip in axis Property:trackAxisToolTip </br> </br> $("#chart").ejChart({ trackAxisToolTip: () { } }); Not applicable
Fires before rendering trackball tooltip. Property:trackToolTip </br> </br> $("#chart").ejChart({ trackToolTip: () { } }); Not applicable
Event triggered when scroll starts. Property:scrollStart </br> </br> $("#chart").ejChart({ scrollStart: () { } }); Property:scrollStart </br> </br> let chart: Chart = new Chart({ scrollStart : () => { } }); chart.appendTo('#chart');
Event triggered when scroll ends. Property:scrollEnd </br> </br> $("#chart").ejChart({ scrollEnd: () { } }); Property:scrollEnd </br> </br> let chart: Chart = new Chart({ scrollEnd: () => { } }); chart.appendTo('#chart');
Event triggered when scroll changes. Property:scrollChange </br> </br> $("#chart").ejChart({ scrollChange: () { } }); Property:scrollChange </br> </br> let chart: Chart = new Chart({ scrollChange: () => { } }); chart.appendTo('#chart');
Fires while performing rectangle zooming in chart. Property:zoomComplete </br> </br> $("#chart").ejChart({ zoomComplete: () { } }); Property:zoomComplete </br> </br> 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: </br> </br> $("#chart").ejChart({ selectedDataPointIndexes: [ { seriesIndex: 0, pointIndex: 1}] }); Property:selectedDataIndexes </br> </br> let chart: Chart = new Chart({ selectedDataIndexes: [ { series: 0, point: 1}] }); chart.appendTo('#chart');
sideBySideSeriesPlacement for column based series Property:sideBySideSeriesPlacement: </br> </br> $("#chart").ejChart({ sideBySideSeriesPlacement }); Property:sideBySidePlacement </br> </br> let chart: Chart = new Chart({ sideBySidePlacement: true }); chart.appendTo('#chart');
ZoomSettings Property:zooming: </br> </br> $("#chart").ejChart({ zooming: { enable: true, enabledeferredZoom: true, enablePinch: true, enableMouseWheel: true, enableSrollBar: true, toolBarItems: [], type: 'X' } }); Property:zoomSettings </br> </br> 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 </br> </br> $("#container").ejChart({ background: 'transparent' }); Property:background </br> </br> let chart: Chart = new Chart({ background: '#EEFFCC' }); chart.appendTo('#chart');
URL of the image to be used as chart background. Property:backGroundImageUrl </br> </br> $("#container").ejChart({ backGroundImageUrl : '../images/chart/wheat.png' }); Not Applicable
Customizing border of the chart Property:border </br> </br> $("#container").ejChart({ border: { width: 2, color: '#CCEEFF', opacity: 0.5} }); Property:border </br> </br> let chart: Chart = new Chart({ border: { width: 2, color: '#CCEEFF'} }); chart.appendTo('#chart');
This provides options for customizing export settings Property:exportSettings </br> </br> $("#container").ejChart({ exportSettings: { filename : "chart", angle: '45' } }); Property:export() </br> </br> let chart: Chart = new Chart({ border: { width: 2, color: '#CCEEFF'} }); chart.appendTo('#chart'); chart.export(type, fileName); </code></td> </tr>
ChartArea customization Property:chartArea </br> </br> $("#container").ejChart({ chartArea: { background: 'transparent', border: { opacity: 0.3, color: 'red', width: 2}} }); Property:chartArea </br> </br> let chart: Chart = new Chart({ chartArea: { background: 'transparent', border: { width: 2, color: '#CCEEFF'} } }); chart.appendTo('#chart'); chart.export(type, fileName); </code> </td> </tr> </table>