Ej1 api migration in React Chart component
20 Jan 202324 minutes to read
This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2.
Annotations
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Annotations| Property: annotations.content
annotations: [{ content: “watermark” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.content <ChartComponent id='charts'><AnnotationDirective content='<div>Highest Medal Count</div>'></AnnotationsDirective></ChartComponent>|
|rotation of annotation| Property: annotations
annotations: [{ }],<EJ.Chartannotations={annotations}> </EJ.Chart>| Not applicable.|
|coordinate unit for annotation| Property: annotations.coordinateUnit
annotations: [{ coordinateUnit : “pixels” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.coordinateUnits <ChartComponent id='charts'> <AnnotationDirective coordinateUnits='Pixels'> </AnnotationsDirective></ChartComponent>|
|horizontalAlignment for annotation| Property: annotations.horizontalAlignment
annotations: [{ horizontalAlignment: “near” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.horizontalAlignment <ChartComponent id='charts'> <AnnotationDirective horizontalAlignment='Near'> </AnnotationsDirective></ChartComponent>|
|horizontalAlignment for annotation| Property: annotations.horizontalAlignment
annotations: [{ horizontalAlignment: “near” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.horizontalAlignment <ChartComponent id='charts'> <AnnotationDirective horizontalAlignment='Near'> </AnnotationsDirective></ChartComponent>|
|margin for annotation| Property: annotations.margin
annotations: [ margin: { right: 40 } }],<EJ.Chartannotations={annotations}> </EJ.Chart>| Not applicable |
|Opacity for annotation| Property: annotations.opacity
annotations: [{ horizontalAlignment: “near” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.horizontalAlignment <ChartComponent id='charts'><AnnotationDirective horizontalAlignment='Near'></AnnotationsDirective></ChartComponent>|
|Region for annotation with respect to chart or series| Property: annotations.region
annotations: [{ region: “series” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.region <ChartComponent id='charts'><AnnotationDirective region='Series'></AnnotationsDirective></ChartComponent>|
|verticalAlignment for annotation| Property: annotations.verticalAlignment
annotations: [{ verticalAlignment: “middle” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.verticalAlignment <ChartComponent id='charts'><AnnotationDirective verticalAlignment='Middle'></AnnotationsDirective></ChartComponent>|
|Visibility of annotations| Property: annotations.visible
annotations: [{ visible: true }],<EJ.Chartannotations={annotations}> </EJ.Chart>| Not applicable
|X offset for annotation| Property: annotations.x
annotations: [{ x: 170 }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.x <ChartComponent id='charts'><AnnotationDirective x={170}></AnnotationsDirective></ChartComponent>|
|X axis name in which annotation to be rendered| Property: annotations.xAxisName
annotations: [{ xAxisName :”xAxis” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.xAxisName <ChartComponent id='charts'><AnnotationDirective xAxisName='xAxis'></AnnotationsDirective></ChartComponent>|
|Y offset for annotation| Property: annotations.y
annotations: [{ y: 170 }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.y <ChartComponent id='charts'><AnnotationDirective y={170}></AnnotationsDirective></ChartComponent>|
|Y axis name in which annotation to be rendered| Property: annotations.yAxisName
annotations: [{ yAxisName :”yAxis” }],<EJ.Chartannotations={annotations}> </EJ.Chart>|Property: annotations.yAxisName <ChartComponent id='charts'><AnnotationDirective yAxisName='yAxis'></AnnotationsDirective></ChartComponent>|
Columns
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Columns in chart| Property: columntype
var series= [{ type: ‘column’ }];<EJ.Chartseries={series}> </EJ.Chart>|Property: columntype <ChartComponent id='charts'><SeriesDirective type='Column'></SeriesDirective></ChartComponent>|
|width of columns in chart| Property: columnWidth
var series= [{ columnWidth : 0.8 }];<EJ.Chartseries={series}> </EJ.Chart>|Property: width <ChartComponent id='charts' width='80%'><SeriesDirective type='Column'></SeriesDirective></ChartComponent>|
|Rounded column| Property: cornerRadius
var commonSeriesOptions= { cornerRadius :20 };<EJ.ChartcommonSeriesOptions={commonSeriesOptions}> </EJ.Chart>|Property: cornerRadius <ChartComponent id='charts' width='80%'><SeriesDirective cornerRadius={ bottomLeft: 10 }></SeriesDirective></ChartComponent>|
CommonSeriesOptions
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|commonSeriesOptions| Property: commonSeriesOptions
var commonSeriesOptions= { cornerRadius :20 };<EJ.ChartcommonSeriesOptions={commonSeriesOptions}> </EJ.Chart>|Not Applicable|
Crosshair
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|crosshair| Property: crosshair Label visible
var crosshair={ visible: true };<EJ.Chartcrosshair={crosshair}> </EJ.Chart>|Property: crosshair enable <ChartComponent id='charts' crosshair = {enable:true}></ChartComponent>|
|trackballTooltipSettings| Property: trackballTooltipSettings
var crosshair={ type: ‘trackball’ };<EJ.Chartcrosshair={crosshair}> </EJ.Chart>|Not applicable
|marker| Property: marker
var series = [{ marker: { shape: ‘Diamond’, visible: true }}];<EJ.Chartseries={series}> </EJ.Chart>|Property: marker <ChartComponent id='charts'><SeriesDirective marker={ visible: true }}></SeriesDirective></ChartComponent>|
|crosshair line style| Property: line
var crosshair={ line: { color: ‘gray’, width: 2 } };<EJ.Chartcrosshair={crosshair}> </EJ.Chart>|Property: line <ChartComponent id='charts' line:{width:2, color:'green'}></ChartComponent>|
|type| Property: type
var crosshair={ type: ‘trackball’ };<EJ.Chartcrosshair={crosshair}> </EJ.Chart>|Not applicable|
3D chart
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|type| Property: type
var enable3D= true;<EJ.Chartenable3D={enable3D}> </EJ.Chart>|Not applicable|
Indicators
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Type of Indicator| Property: type
var indicators= [{ type: “accumulationdistribution” }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: marker <ChartComponent id='charts'><IndicatorDirective type='AccumulationDistribution'></IndicatorDirective></ChartComponent>|
|Period for indicator| Property: period
var indicators= [{ period: 3 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: marker <ChartComponent id='charts'><IndicatorDirective period={3}'></IndicatorDirective></ChartComponent>|
|%K value in stochastic indicator| Property: kPeriod
var indicators= [{ kPeriod: 3 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: kPeriod <ChartComponent id='charts'><IndicatorDirective kPeriod={2}></IndicatorDirective></ChartComponent>|
|%D value in stochastic indicator| Property: dPeriod
var indicators= [{ dPeriod: 3 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: dPeriod <ChartComponent id='charts'><IndicatorDirective dPeriod={2}></IndicatorDirective></ChartComponent>|
|Shows overSold/overBought values| Not applicable|Property: showZones <ChartComponent id='charts'><IndicatorDirective showZones={true}></IndicatorDirective></ChartComponent>|
|Overbought value for RSI and stochastic indicator| Not applicable |Property: overBought <ChartComponent id='charts'><IndicatorDirective overBought={70}></IndicatorDirective></ChartComponent>|
|Overbought value for RSI and stochastic indicator| Not applicable |Property: overSold <ChartComponent id='charts'><IndicatorDirective overSold={70}></IndicatorDirective></ChartComponent>|
|Field for indicator| Property: field
var indicators= [{ field: “close” }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: field <ChartComponent id='charts'><IndicatorDirective field='Close'></IndicatorDirective></ChartComponent>|
|Slow period for MACD indicator| Property: shortPeriod
var indicators= [{ shortPeriod: 5 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: slowPeriod <ChartComponent id='charts'><IndicatorDirective slowPeriod={5}></IndicatorDirective></ChartComponent>|
|Fast period for MACD indicator| Property: longPeriod
var indicators= [{ longPeriod: 5 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: fastPeriod <ChartComponent id='charts'><IndicatorDirective fastPeriod={5}></IndicatorDirective></ChartComponent>|
|Type of MACD indicator| Property: macdType
var indicators= [{ macdType : “both” }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: macdType <ChartComponent id='charts'><IndicatorDirective macdType='Both'></IndicatorDirective></ChartComponent>|
|Color of the positive bars in Macd indicators| Not applicable |Property: macdPositiveColor <ChartComponent id='charts'><IndicatorDirective macdPositiveColor: 'red'></IndicatorDirective></ChartComponent>|
|Color of the negative bars in Macd indicators| Not applicable |Property: macdPositiveColor <ChartComponent id='charts'><IndicatorDirective macdNegativeColor='#e74c3d'></IndicatorDirective></ChartComponent>|
|Appearance of upper line in indicator| Property: upperLine
var indicators= [{ upperLine: { fill: ‘#EECCAA’} }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: upperLine <ChartComponent id='charts'><IndicatorDirective upperLine={ color: '#ffb735', width: 1 }></IndicatorDirective></ChartComponent>|
|Appearance of lower line in indicator| Property: lowerLine
var indicators= [{ lowerLine: { fill: ‘#EECCAA’} }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: lowerLine <ChartComponent id='charts'><IndicatorDirective lowerLine={ color: '#ffb735', width: 1 }></IndicatorDirective></ChartComponent>|
|Appearance of period line in indicator| Property: periodLine
var indicators= [{ periodLine: { fill: ‘#EECCAA’} }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: periodLine <ChartComponent id='charts'><IndicatorDirective periodLine={ color: '#ffb735', width: 1 }></IndicatorDirective></ChartComponent>|
|Name of the series for which indicator has to be drawn| Property: seriesName
var indicators= [{ seriesName =”Apple Inc” }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: seriesName <ChartComponent id='charts'><IndicatorDirective seriesName ='Apple Inc'></IndicatorDirective></ChartComponent>|
|Enabling animation| Property: enableAnimation
var indicators= [{ enableAnimation : true }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: animation.enable <ChartComponent id='charts'><IndicatorDirective animation={ enable: true }></IndicatorDirective></ChartComponent>|
|Animation duration| Property: animationDuration
var indicators= [{ animationDuration: 3000 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: animation.duration <ChartComponent id='charts'><IndicatorDirective animation={ duration: 3000}></IndicatorDirective></ChartComponent>|
|Tooltip| Property: tooltip
var indicators= [{ tooltip: { visible: true } }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Not applicable|
|Trigger value of MACD indicator| Property: trigger
var indicators= [{ trigger: 14 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Not applicable|
|Fill color for indicator| Property: fill
var indicators= [{ fill: ‘#EEDDCC’ }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: fill <ChartComponent id='charts'><IndicatorDirective fill='#606eff'></IndicatorDirective></ChartComponent>|
|Width for indicator| Property: width
var indicators= [{ width: 2 }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: width <ChartComponent id='charts'><IndicatorDirective width={3}></IndicatorDirective></ChartComponent>|
|xAxis Name of indicator| Property: xAxisName
var indicators= [{ xAxisName: ‘’ }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: xAxisName <ChartComponent id='charts'><IndicatorDirective xAxisName=''></IndicatorDirective></ChartComponent>|
|yAxis Name of indicator| Property: yAxisName
var indicators= [{ yAxisName: ‘’ }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Property: yAxisName <ChartComponent id='charts'><IndicatorDirective yAxisName=''></IndicatorDirective></ChartComponent>|
|Visibility of indicator| Property: visibility
var indicators= [{ visibility: true }];<EJ.Chartindicators={indicators}> </EJ.Chart>|Not applicable|
Legend
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Default legend| Property: visible
var legend= { visible: true };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: yAxisName <ChartComponent id='charts' legendSettings = { visible: true, position: 'Top' }></ChartComponent>|
|Legend height| Property: height
var legend= { size : { height: 50 } };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: yAxisName <ChartComponent id='charts' legendSettings = { height: '30' }></ChartComponent>|
|Legend width| Property: size.width
var legend= { size : { width: 50 } };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: width <ChartComponent id='charts' legendSettings = { width: '30' }></ChartComponent>|
|Legend location in chart| Property: location
var legend= { location: { x: 3, y: 45} };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: location <ChartComponent id='charts' legendSettings = { location: { x: 3, y: 45} }></ChartComponent>|
|Legend position in chart| Property: position
var legend= { position: ‘top’ };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: position <ChartComponent id='charts' legendSettings = { position: 'Top'}></ChartComponent>|
|Legend padding|Not applicable|Property: padding <ChartComponent id='charts' legendSettings = { padding: 8}></ChartComponent>|
|Legend alignment| Property: alignment
var legend= { alignment: ‘center’ };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: alignment <ChartComponent id='charts' legendSettings = { alignment: 'Near'}></ChartComponent>|
|text style for legend| Property: font
var legend= { font: { fontFamily: ‘’} };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: textStyle <ChartComponent id='charts' legendSettings = { textStyle: { size: '12px'}}></ChartComponent>|
|shape height of legend| Property: itemStyle.height
var legend= { itemStyle : { height: 20 } };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: shapeHeight <ChartComponent id='charts' legendSettings = { shapeHeight: 20}></ChartComponent>|
|shape width of legend| Property: itemStyle.width
var legend= { itemStyle : { width: 20 } };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: shapeWidth <ChartComponent id='charts' legendSettings = { shapeWidth: 20}></ChartComponent>|
|shape border of legend| Property: itemStyle.border
var legend= { itemStyle : { border: {width: 20 }}};<EJ.Chartlegend={legend}> </EJ.Chart>|Not Applicable|
|shape padding of legend| Property: itemPadding
var legend= { itemPadding : 10 };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: shapePadding <ChartComponent id='charts' legendSettings = { shapePadding: 20}></ChartComponent>|
|Background of legend| Property: background
var legend= { background: ‘transparent’ };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: backgorund <ChartComponent id='charts' legendSettings = { background: 'transparent'}></ChartComponent>|
|Opacity of legend| Property: opacity
var legend= { opacity: 0.3 };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: opacity <ChartComponent id='charts' legendSettings = { opacity: 0.4}></ChartComponent>|
|Toggle visibility of series while legend click| Property: toggleSeriesVisibility
var legend= { toggleSeriesVisibility : true };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: toggleVisibility <ChartComponent id='charts' legendSettings = { toggleVisibility: true}></ChartComponent>|
|Title for legend| Property: title
var legend= { title: { text: ‘LegendTitle’} };<EJ.Chartlegend={legend}> </EJ.Chart>|Not applicable|
|Text Overflow for legend| Property: textOverFlow
var legend= { textOverFlow : ‘trim’ };<EJ.Chartlegend={legend}> </EJ.Chart>|Property: textStyle.textOverFlow <ChartComponent id='charts' legendSettings = { text: { textOverFlow : 'trim' }}></ChartComponent>|
|Text width for legend while setting text overflow| Property: textWidth
var legend= { textWidth : 20 };<EJ.Chartlegend={legend}> </EJ.Chart>|Not applicable|
|Scroll bar for legend| Property: enableScrollBar
var legend= { enableScrollBar : true };<EJ.Chartlegend={legend}> </EJ.Chart>|Not applicable|
|Row count for legend| Property: rowCount
var legend= { rowCount : 2 };<EJ.Chartlegend={legend}> </EJ.Chart>|Not applicable|
|Column count for legend| Property: columnCount
var legend= { columnCount : 2};<EJ.Chartlegend={legend}> </EJ.Chart>|Not applicable|
|Color for legend items| Property: fill
var legend= { fill: ‘#EEFFCC’};<EJ.Chartlegend={legend}> </EJ.Chart>|Not applicable|
primaryXAxis
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Axis line cross value| Property: crossesAt
var primaryXAxis = { crossesAt : 0 };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: crossesAt <ChartComponent id='charts' primaryXAxis ={ crossesAt : 15 }></ChartComponent>|
|axis name with which the axis line has to be crossed| Property: crossesInAxis
var primaryXAxis = { crossesInAxis : ‘’ };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: crossesInAxis <ChartComponent id='charts' primaryXAxis ={ crossesInAxis : '' }></ChartComponent>|
|axis elements placed with axis line| Property: showNextToAxisLine
var primaryXAxis = { showNextToAxisLine : true };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: placeNextToAxisLine <ChartComponent id='charts' primaryXAxis ={ placeNextToAxisLine: '' }></ChartComponent>|
|axis line style| Property: axisLine.color
var primaryXAxis = { axisLine: { color : ‘red’ } };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: lineStyle.color <ChartComponent id='charts' primaryXAxis ={ lineStyle: { color: 'black' } }></ChartComponent>|
|axis line dashArray| Property: axisLine.dashArray
var primaryXAxis = { axisLine: { dashArray : ‘10, 5’ } };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: lineStyle.dashArray <ChartComponent id='charts' primaryXAxis ={ lineStyle: { dashArray: '10, 5' } }></ChartComponent>|
|Offset for axis| Property: axisLine.offset
var primaryXAxis = { axisLine: { offset : 10 } };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: plotOffset <ChartComponent id='charts' primaryXAxis ={ plotOffset: 10 }></ChartComponent>|
|Visible of an axis| Property: axisLine.visible
var primaryXAxis = { axisLine: { visible : false } };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: visible <ChartComponent id='charts' primaryXAxis ={ visible: false }></ChartComponent>|
|Width of an axis| Property: axisLine.width
var primaryXAxis = { axisLine: { width : 2 } };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: lineStyle.width <ChartComponent id='charts' primaryXAxis ={ lineStyle: { width: 3 }}></ChartComponent>|
|Column index of an axis| Property: columnIndex
var primaryXAxis = { columnIndex: 2 };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: columnIndex <ChartComponent id='charts' primaryXAxis ={ columnIndex: 2}></ChartComponent>|
|span of an axis to place horizontally or vertically| Property: columnSpan
var primaryXAxis = { columnSpan: 2 };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: span <ChartComponent id='charts' primaryXAxis ={ span: 2}></ChartComponent>|
|Crosshair label of an axis| Property: crossHairLabel.visible
var primaryXAxis = { crossHairLabel: { visible: true } };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: crossHairTooltip.enable <ChartComponent id='charts' crossHairTooltip: { enable: true }></ChartComponent>|
|Crosshair label color of an axis| Not applicable |Property: crossHairTooltip.fill <ChartComponent id='charts' crossHairTooltip: { fill: 'red' }></ChartComponent>|
|Crosshair label text style| Not applicable |Property: crossHairTooltip.textStyle <ChartComponent id='charts' crossHairTooltip: { textStyle: { } }></ChartComponent>|
|Desired interval count for primaryXAxis| Property: desiredIntervals
var primaryXAxis = { desiredIntervals: 4};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: desiredIntervals <ChartComponent id='charts' primaryXAxis ={ desiredIntervals: 4 }></ChartComponent>|
|Edges primaryXAxis| Property: edgeLabelPlacement
var primaryXAxis = { edgeLabelPlacement: ‘none’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: edgeLabelPlacement <ChartComponent id='charts' primaryXAxis ={ edgeLabelPlacement: 'Shift' }></ChartComponent>|
|Enables trim for axis labels| Property: enableTrim
var primaryXAxis = { enableTrim: true};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: enableTrim <ChartComponent id='charts' primaryXAxis ={ enableTrim: true }></ChartComponent>|
|Specifies the interval of the axis according to the zoomed data of the chart| Property: enableAutoIntervalOnZooming
var primaryXAxis = { enableAutoIntervalOnZooming: true};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: enableAutoIntervalOnZooming <ChartComponent id='charts' primaryXAxis ={ enableAutoIntervalOnZooming: true }></ChartComponent>|
|Font style for primaryXAxis| Property: font
var primaryXAxis = { font: { fontFamily: ‘Calibri’} };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: titleStyle <ChartComponent id='charts' primaryXAxis ={ titleStyle: { }}></ChartComponent>|
|Indexed for category axis| Property: isIndexed
var primaryXAxis = { font: { isIndexed: true} };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: isIndexed <ChartComponent id='charts' primaryXAxis ={ isIndexed: true}></ChartComponent>|
|Interval type for date time axis| Property: intervalType
var primaryXAxis = { intervalType: ‘Auto’ };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: intervalType <ChartComponent id='charts' primaryXAxis ={ intervalType: 'Auto'}></ChartComponent>|
|Inversed axis| Property: isInversed
var primaryXAxis = {isInversed: true};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: isInversed <ChartComponent id='charts' primaryXAxis ={ isInversed: true}></ChartComponent>|
|Custom label format| Property: labelFormat
var primaryXAxis = {labelFormat: ‘{value}K’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: labelFormat <ChartComponent id='charts' primaryXAxis ={ labelFormat: '{value}K'}></ChartComponent>|
|labelIntersectAction| Property: labelIntersectAction
var primaryXAxis = {labelIntersectAction: ‘trim’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: labelIntersectAction <ChartComponent id='charts' primaryXAxis ={labelIntersectAction: 'Trim' }></ChartComponent>|
|labelPosition| Property: labelPosition
var primaryXAxis = {labelPosition: ‘inside’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: labelPosition <ChartComponent id='charts' primaryXAxis ={labelPosition: 'Inside' }></ChartComponent>|
|labelPlacement for category axis| Property: labelPlacement
var primaryXAxis = {labelPlacement: ‘onTicks’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: labelPlacement <ChartComponent id='charts' primaryXAxis ={ labelPlacement: 'OnTicks' }></ChartComponent>|
|Axis label alignment| Property: alignment
var primaryXAxis = {alignment: ‘center’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Rotation of axis labels| Property: labelRotation
var primaryXAxis = {labelRotation: 45};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: labelRotation <ChartComponent id='charts' primaryXAxis ={ labelRotation: 45 }></ChartComponent>|
|Log base value for logarithmic axis| Property: logBase
var primaryXAxis = {logBase: 10};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: logBase <ChartComponent id='charts' primaryXAxis ={ logBase: 10 }></ChartComponent>|
|Major grid line| Property: majorGridLines.visible
var primaryXAxis = {majorGridLines: { visible: true}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Width of MajorGridLines| Property: majorGridLines.width
var primaryXAxis = {majorGridLines: { width: 2}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: majorGridLines.width <ChartComponent id='charts' primaryXAxis ={ majorGridLines: { width: 2} }></ChartComponent>|
|Color of MajorGridLines| Property: majorGridLines.color
var primaryXAxis = {majorGridLines: { color: ‘black’ }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: majorGridLines.color <ChartComponent id='charts' primaryXAxis ={ majorGridLines: { color: 'black' } }></ChartComponent>|
|DashArray of MajorGridLines| Property: majorGridLines.dashArray
var primaryXAxis = {majorGridLines: { dashArray: ‘10,5’ }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: majorGridLines.dashArray <ChartComponent id='charts' primaryXAxis ={ majorGridLines: { dashArray: '10,5' } }></ChartComponent>|
|Opacity of major grid line| Property: majorGridLines.opacity
var primaryXAxis = {majorGridLines: { opacity: true }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Major Tick line| Property: majorTickLines.visible
var primaryXAxis = {majorTickLines: { visible: true }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Width of MajorTickLines| Property: majorTickLines.width
var primaryXAxis = {majorTickLines: { width: 2 }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: majorTickLines.width <ChartComponent id='charts' primaryXAxis ={ majorTickLines: { width: 2 } }></ChartComponent>|
|Height of MajorTickLines| Property: majorTickLines.size
var primaryXAxis = {majorTickLines: { size: 2 }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: majorTickLines.height <ChartComponent id='charts' primaryXAxis ={ majorTickLines: { height: 2} }></ChartComponent>|
|Color of MajorTickLines| Property: majorTickLines.color
var primaryXAxis = {majorTickLines: { color: ‘black’ }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: majorTickLines.color <ChartComponent id='charts' primaryXAxis ={ majorTickLines: { color: 'black' } }></ChartComponent>|
|Opacity of major Tick line| Property: majorTickLines.opacity
var primaryXAxis = {majorTickLines: { opacity: true};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>| Not Applicable|
|maximum labels of primaryXAxis| Property: maximumLabels
var primaryXAxis = { maximumLabels: 5};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: maximumLabels <ChartComponent id='charts' primaryXAxis ={ maximumLabels: 4 }></ChartComponent>|
|maximum labels width of primaryXAxis to trim| Property: maximumLabelWidth
var primaryXAxis = { maximumLabelWidth: 40};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: maximumLabelWidth <ChartComponent id='charts' primaryXAxis ={ maximumLabelWidth: 40 }></ChartComponent>|
|minor grid line| Property: minorGridLines.visible
var primaryXAxis = { minorGridLines: { visible: true}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>| Not Applicable|
|Width of minorGridLines| Property: minorGridLines.width
var primaryXAxis = { minorGridLines: { width: 2}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorGridLines.width <ChartComponent id='charts' primaryXAxis ={ minorGridLines: { width: 2} }></ChartComponent>|
|Color of minorGridLines| Property: minorGridLines.color
var primaryXAxis = { minorGridLines: { color: ‘black’}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorGridLines.color <ChartComponent id='charts' primaryXAxis ={ minorGridLines: { color: 'black' } }></ChartComponent>|
|DashArray of minorGridLines| Property: minorGridLines.dashArray
var primaryXAxis = { minorGridLines: { dashArray: ‘10,5’}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorGridLines.dashArray <ChartComponent id='charts' primaryXAxis ={ minorGridLines: { dashArray: '10,5' } }></ChartComponent>|
|Opacity of minor grid line| Property: minorGridLines.opacity
var primaryXAxis = { minorGridLines: { opacity: true}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|minor Tick line| Property: minorTickLines.visible
var primaryXAxis = { minorTickLines: { visible: true}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Width of minorTickLines| Property: minorTickLines.width
var primaryXAxis = { minorTickLines: { width: 2 }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorTickLines.width <ChartComponent id='charts' primaryXAxis ={ minorTickLines: { width: 2}}></ChartComponent>|
|Height of minorTickLines| Property: minorTickLines.size
var primaryXAxis = { minorTickLines: { size: 2}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorTickLines.height <ChartComponent id='charts' primaryXAxis ={ minorTickLines: { height: 2}}></ChartComponent>|
|Color of minorTickLines| Property: minorTickLines.color
var primaryXAxis = { minorTickLines: { color: ‘black’ }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorTickLines.color <ChartComponent id='charts' primaryXAxis ={ minorTickLines: { color: 'black' }}></ChartComponent>|
|Opacity of minor Tick line| Property: minorTickLines.opacity
var primaryXAxis = { minorTickLines: { opacity: true }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Minor ticks per interval of primaryXAxis| Property: minorTicksPerInterval
var primaryXAxis = { minorTicksPerInterval: 4};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minorTicksPerInterval <ChartComponent id='charts' primaryXAxis ={ minorTicksPerInterval: 4 }></ChartComponent>|
|name of the primaryXAxis| Property: name
var primaryXAxis = { name: ‘primaryXAxis’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: name <ChartComponent id='charts' primaryXAxis ={ name: 'primaryXAxis' }></ChartComponent>|
|Orientation of primaryXAxis| Property: orientation
var primaryXAxis = { orientation: ‘Vertical’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|Plot offset for primaryXAxis| Property: plotOffset
var primaryXAxis = { plotOffset: 0};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: plotOffset <ChartComponent id='charts' primaryXAxis ={ plotOffset: 0 }></ChartComponent>|
|minimum for primaryXAxis| Property: range.minimum
var primaryXAxis = { range: { minimum: 10 }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: minimum <ChartComponent id='charts' primaryXAxis ={ minimum: 23 }></ChartComponent>|
|maximum for primaryXAxis| Property: range.maximum
var primaryXAxis = { range: { maximum: 10 }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: maximum <ChartComponent id='charts' primaryXAxis ={ maximum: 23 }></ChartComponent>|
|interval for primaryXAxis| Property: range.interval
var primaryXAxis = { range: { interval: 1 }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: interval <ChartComponent id='charts' primaryXAxis ={ interval: 2 }></ChartComponent>|
|RangePadding for primaryXAxis| Property: rangePadding
var primaryXAxis = { rangePadding: ‘None’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: rangePadding <ChartComponent id='charts' primaryXAxis ={ rangePadding : 'None'}></ChartComponent>|
|Rounding Places in primaryXAxis| Property: roundingPlaces
var primaryXAxis = { roundingPlaces: 3};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: labelFormat <ChartComponent id='charts' primaryXAxis ={ labelFormat: 'n3'}></ChartComponent>|
|ScrollBar settings of primaryXAxis| Property: scrollbarSettings
var primaryXAxis = { scrollbarSettings : { }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not Applicable|
|TickPosition in primaryXAxis| Property: tickLinesPosition
var primaryXAxis = { tickLinesPosition: ‘Inside’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: tickPosition <ChartComponent id='charts' primaryXAxis ={ tickPosition: 'Inside'}></ChartComponent>|
|valueType of primaryXAxis| Property: valueType
var primaryXAxis = { valueType: ‘DateTime’};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: valueType <ChartComponent id='charts' primaryXAxis ={ valueType: 'DateTime'}></ChartComponent>|
|visible of primaryXAxis| Property: visible
var primaryXAxis = { visible: true};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: visible <ChartComponent id='charts' primaryXAxis ={ visible: true}></ChartComponent>|
|zoomFactor of primaryXAxis| Property: zoomFactor
var primaryXAxis = { zoomFactor: 0.3};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: zoomFactor <ChartComponent id='charts' primaryXAxis ={ zoomFactor: 0.3}></ChartComponent>|
|zoomPosition of primaryXAxis| Property: zoomPosition
var primaryXAxis = { zoomPosition: 0.3};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: zoomPosition <ChartComponent id='charts' primaryXAxis ={ zoomPosition: 0.3}></ChartComponent>|
|labelBorder of primaryXAxis| Property: labelBorder
var primaryXAxis = { labelBorder: { color: ‘red’, width: 2}};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: border <ChartComponent id='charts' primaryXAxis ={ border: { color: 'red', width: 3 }}></ChartComponent>|
|title of primaryXAxis| Property: title.text
var primaryXAxis = { title: { text: ‘Chart title’ }};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: title <ChartComponent id='charts' primaryXAxis ={title: 'Chart title'}></ChartComponent>|
|StripLine of primaryXAxis| Property: stripLine
var primaryXAxis = { stripLine: []};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines <ChartComponent id='charts' primaryXAxis ={stripLines: []}></ChartComponent>|
|Multilevel labels of primaryXAxis| Property: multiLevelLabels
var primaryXAxis = { multiLevelLabels: []};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels <ChartComponent id='charts' primaryXAxis ={multiLevelLabels: []}></ChartComponent>|
|skeleton for an axes| Not Applicable|Property: axes.skeleton <ChartComponent id='charts' primaryXAxis ={axes=[ { skeleton: 'yMd' }}></ChartComponent>|
|skeleton type for an axes| Not Applicable|Property: axes.skeletonType <ChartComponent id='charts' primaryXAxis ={axes=[{skeletonType: 'DateTime'}]}></ChartComponent>|
primaryYAxis
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Alternate grid band| Property: alternateGridBand
var primaryYAxis = {alternateGridBand: { even: { fill: ‘red } } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not applicable|
|Axis line cross value| Property: crossesAt
var primaryYAxis = { crossesAt : 0 };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: crossesAt <ChartComponent id='charts' primaryYAxis ={ crossesAt : 15 }></ChartComponent>|
|axis name with which the axis line has to be crossed| Property: crossesInAxis
var primaryYAxis = { crossesInAxis : ‘’ };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: crossesInAxis <ChartComponent id='charts' primaryYAxis ={ crossesInAxis : '' }></ChartComponent>|
|axis elements placed with axis line| Property: showNextToAxisLine
var primaryYAxis = { showNextToAxisLine : true };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: placeNextToAxisLine <ChartComponent id='charts' primaryYAxis ={ placeNextToAxisLine: '' }></ChartComponent>|
|axis line style| Property: axisLine.color
var primaryYAxis = { axisLine: { color : ‘red’ } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: lineStyle.color <ChartComponent id='charts' primaryYAxis ={ lineStyle: { color: 'black' } }></ChartComponent>|
|axis line dashArray| Property: axisLine.dashArray
var primaryYAxis = { axisLine: { dashArray : ‘10, 5’ } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: lineStyle.dashArray <ChartComponent id='charts' primaryYAxis ={ lineStyle: { dashArray: '10, 5' } }></ChartComponent>|
|Offset for axis| Property: axisLine.offset
var primaryYAxis = { axisLine: { offset : 10 } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: plotOffset <ChartComponent id='charts' primaryYAxis ={ plotOffset: 10 }></ChartComponent>|
|Visible of an axis| Property: axisLine.visible
var primaryYAxis = { axisLine: { visible : false } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: visible <ChartComponent id='charts' primaryYAxis ={ visible: false }></ChartComponent>|
|Width of an axis| Property: axisLine.width
var primaryYAxis = { axisLine: { width : 2 } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: lineStyle.width <ChartComponent id='charts' primaryYAxis ={ lineStyle: { width: 3 }}></ChartComponent>|
|Column index of an axis| Property: columnIndex
var primaryYAxis = { columnIndex: 2 };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: columnIndex <ChartComponent id='charts' primaryYAxis ={ columnIndex: 2}></ChartComponent>|
|span of an axis to place horizontally or vertically| Property: columnSpan
var primaryYAxis = { columnSpan: 2 };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: span <ChartComponent id='charts' primaryYAxis ={ span: 2}></ChartComponent>|
|Crosshair label of an axis| Property: crossHairLabel.visible
var primaryYAxis = { crossHairLabel: { visible: true } };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: crossHairTooltip.enable <ChartComponent id='charts' crossHairTooltip: { enable: true }></ChartComponent>|
|Crosshair label color of an axis| Not applicable |Property: crossHairTooltip.fill <ChartComponent id='charts' crossHairTooltip: { fill: 'red' }></ChartComponent>|
|Crosshair label text style| Not applicable |Property: crossHairTooltip.textStyle <ChartComponent id='charts' crossHairTooltip: { textStyle: { } }></ChartComponent>|
|Desired interval count for primaryYAxis| Property: desiredIntervals
var primaryYAxis = { desiredIntervals: 4};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: desiredIntervals <ChartComponent id='charts' primaryYAxis ={ desiredIntervals: 4 }></ChartComponent>|
|Edges primaryYAxis| Property: edgeLabelPlacement
var primaryYAxis = { edgeLabelPlacement: ‘none’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: edgeLabelPlacement <ChartComponent id='charts' primaryYAxis ={ edgeLabelPlacement: 'Shift' }></ChartComponent>|
|Enables trim for axis labels| Property: enableTrim
var primaryYAxis = { enableTrim: true};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: enableTrim <ChartComponent id='charts' primaryYAxis ={ enableTrim: true }></ChartComponent>|
|Specifies the interval of the axis according to the zoomed data of the chart| Property: enableAutoIntervalOnZooming
var primaryYAxis = { enableAutoIntervalOnZooming: true};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: enableAutoIntervalOnZooming <ChartComponent id='charts' primaryYAxis ={ enableAutoIntervalOnZooming: true }></ChartComponent>|
|Font style for primaryYAxis| Property: font
var primaryYAxis = { font: { fontFamily: ‘Calibri’} };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: titleStyle <ChartComponent id='charts' primaryYAxis ={ titleStyle: { }}></ChartComponent>|
|Indexed for category axis| Property: isIndexed
var primaryYAxis = { font: { isIndexed: true} };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: isIndexed <ChartComponent id='charts' primaryYAxis ={ isIndexed: true}></ChartComponent>|
|Interval type for date time axis| Property: intervalType
var primaryYAxis = { intervalType: ‘Auto’ };<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: intervalType <ChartComponent id='charts' primaryYAxis ={ intervalType: 'Auto'}></ChartComponent>|
|Inversed axis| Property: isInversed
var primaryYAxis = {isInversed: true};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: isInversed <ChartComponent id='charts' primaryYAxis ={ isInversed: true}></ChartComponent>|
|Custom label format| Property: labelFormat
var primaryYAxis = {labelFormat: ‘{value}K’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: labelFormat <ChartComponent id='charts' primaryYAxis ={ labelFormat: '{value}K'}></ChartComponent>|
|labelIntersectAction| Property: labelIntersectAction
var primaryYAxis = {labelIntersectAction: ‘trim’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: labelIntersectAction <ChartComponent id='charts' primaryYAxis ={labelIntersectAction: 'Trim' }></ChartComponent>|
|labelPosition| Property: labelPosition
var primaryYAxis = {labelPosition: ‘inside’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: labelPosition <ChartComponent id='charts' primaryYAxis ={labelPosition: 'Inside' }></ChartComponent>|
|labelPlacement for category axis| Property: labelPlacement
var primaryYAxis = {labelPlacement: ‘onTicks’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: labelPlacement <ChartComponent id='charts' primaryYAxis ={ labelPlacement: 'OnTicks' }></ChartComponent>|
|Axis label alignment| Property: alignment
var primaryYAxis = {alignment: ‘center’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Rotation of axis labels| Property: labelRotation
var primaryYAxis = {labelRotation: 45};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: labelRotation <ChartComponent id='charts' primaryYAxis ={ labelRotation: 45 }></ChartComponent>|
|Log base value for logarithmic axis| Property: logBase
var primaryYAxis = {logBase: 10};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: logBase <ChartComponent id='charts' primaryYAxis ={ logBase: 10 }></ChartComponent>|
|Major grid line| Property: majorGridLines.visible
var primaryYAxis = {majorGridLines: { visible: true}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Width of MajorGridLines| Property: majorGridLines.width
var primaryYAxis = {majorGridLines: { width: 2}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: majorGridLines.width <ChartComponent id='charts' primaryYAxis ={ majorGridLines: { width: 2} }></ChartComponent>|
|Color of MajorGridLines| Property: majorGridLines.color
var primaryYAxis = {majorGridLines: { color: ‘black’ }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: majorGridLines.color <ChartComponent id='charts' primaryYAxis ={ majorGridLines: { color: 'black' } }></ChartComponent>|
|DashArray of MajorGridLines| Property: majorGridLines.dashArray
var primaryYAxis = {majorGridLines: { dashArray: ‘10,5’ }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: majorGridLines.dashArray <ChartComponent id='charts' primaryYAxis ={ majorGridLines: { dashArray: '10,5' } }></ChartComponent>|
|Opacity of major grid line| Property: majorGridLines.opacity
var primaryYAxis = {majorGridLines: { opacity: true }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Major Tick line| Property: majorTickLines.visible
var primaryYAxis = {majorTickLines: { visible: true }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Width of MajorTickLines| Property: majorTickLines.width
var primaryYAxis = {majorTickLines: { width: 2 }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: majorTickLines.width <ChartComponent id='charts' primaryYAxis ={ majorTickLines: { width: 2 } }></ChartComponent>|
|Height of MajorTickLines| Property: majorTickLines.size
var primaryYAxis = {majorTickLines: { size: 2 }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: majorTickLines.height <ChartComponent id='charts' primaryYAxis ={ majorTickLines: { height: 2} }></ChartComponent>|
|Color of MajorTickLines| Property: majorTickLines.color
var primaryYAxis = {majorTickLines: { color: ‘black’ }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: majorTickLines.color <ChartComponent id='charts' primaryYAxis ={ majorTickLines: { color: 'black' } }></ChartComponent>|
|Opacity of major Tick line| Property: majorTickLines.opacity
var primaryYAxis = {majorTickLines: { opacity: true};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>| Not Applicable|
|maximum labels of primaryYAxis| Property: maximumLabels
var primaryYAxis = { maximumLabels: 5};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: maximumLabels <ChartComponent id='charts' primaryYAxis ={ maximumLabels: 4 }></ChartComponent>|
|maximum labels width of primaryYAxis to trim| Property: maximumLabelWidth
var primaryYAxis = { maximumLabelWidth: 40};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: maximumLabelWidth <ChartComponent id='charts' primaryYAxis ={ maximumLabelWidth: 40 }></ChartComponent>|
|minor grid line| Property: minorGridLines.visible
var primaryYAxis = { minorGridLines: { visible: true}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>| Not Applicable|
|Width of minorGridLines| Property: minorGridLines.width
var primaryYAxis = { minorGridLines: { width: 2}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorGridLines.width <ChartComponent id='charts' primaryYAxis ={ minorGridLines: { width: 2} }></ChartComponent>|
|Color of minorGridLines| Property: minorGridLines.color
var primaryYAxis = { minorGridLines: { color: ‘black’}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorGridLines.color <ChartComponent id='charts' primaryYAxis ={ minorGridLines: { color: 'black' } }></ChartComponent>|
|DashArray of minorGridLines| Property: minorGridLines.dashArray
var primaryYAxis = { minorGridLines: { dashArray: ‘10,5’}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorGridLines.dashArray <ChartComponent id='charts' primaryYAxis ={ minorGridLines: { dashArray: '10,5' } }></ChartComponent>|
|Opacity of minor grid line| Property: minorGridLines.opacity
var primaryYAxis = { minorGridLines: { opacity: true}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|minor Tick line| Property: minorTickLines.visible
var primaryYAxis = { minorTickLines: { visible: true}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Width of minorTickLines| Property: minorTickLines.width
var primaryYAxis = { minorTickLines: { width: 2 }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorTickLines.width <ChartComponent id='charts' primaryYAxis ={ minorTickLines: { width: 2}}></ChartComponent>|
|Height of minorTickLines| Property: minorTickLines.size
var primaryYAxis = { minorTickLines: { size: 2}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorTickLines.height <ChartComponent id='charts' primaryYAxis ={ minorTickLines: { height: 2}}></ChartComponent>|
|Color of minorTickLines| Property: minorTickLines.color
var primaryYAxis = { minorTickLines: { color: ‘black’ }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorTickLines.color <ChartComponent id='charts' primaryYAxis ={ minorTickLines: { color: 'black' }}></ChartComponent>|
|Opacity of minor Tick line| Property: minorTickLines.opacity
var primaryYAxis = { minorTickLines: { opacity: true }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Minor ticks per interval of primaryYAxis| Property: minorTicksPerInterval
var primaryYAxis = { minorTicksPerInterval: 4};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minorTicksPerInterval <ChartComponent id='charts' primaryYAxis ={ minorTicksPerInterval: 4 }></ChartComponent>|
|name of the primaryYAxis| Property: name
var primaryYAxis = { name: ‘primaryYAxis’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: name <ChartComponent id='charts' primaryYAxis ={ name: 'primaryYAxis' }></ChartComponent>|
|Orientation of primaryYAxis| Property: orientation
var primaryYAxis = { orientation: ‘Vertical’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|Plot offset for primaryYAxis| Property: plotOffset
var primaryYAxis = { plotOffset: 0};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: plotOffset <ChartComponent id='charts' primaryYAxis ={ plotOffset: 0 }></ChartComponent>|
|minimum for primaryYAxis| Property: range.minimum
var primaryYAxis = { range: { minimum: 10 }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: minimum <ChartComponent id='charts' primaryYAxis ={ minimum: 23 }></ChartComponent>|
|maximum for primaryYAxis| Property: range.maximum
var primaryYAxis = { range: { maximum: 10 }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: maximum <ChartComponent id='charts' primaryYAxis ={ maximum: 23 }></ChartComponent>|
|interval for primaryYAxis| Property: range.interval
var primaryYAxis = { range: { interval: 1 }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: interval <ChartComponent id='charts' primaryYAxis ={ interval: 2 }></ChartComponent>|
|RangePadding for primaryYAxis| Property: rangePadding
var primaryYAxis = { rangePadding: ‘None’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: rangePadding <ChartComponent id='charts' primaryYAxis ={ rangePadding: 'None'}></ChartComponent>|
|Rounding Places in primaryYAxis| Property: roundingPlaces
var primaryYAxis = { roundingPlaces: 3};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: labelFormat <ChartComponent id='charts' primaryYAxis ={ labelFormat: 'n3'}></ChartComponent>|
|ScrollBar settings of primaryYAxis| Property: scrollbarSettings
var primaryYAxis = { scrollbarSettings : { }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Not Applicable|
|TickPosition in primaryYAxis| Property: tickLinesPosition
var primaryYAxis = { tickLinesPosition: ‘Inside’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: tickPosition <ChartComponent id='charts' primaryYAxis ={ tickPosition: 'Inside'}></ChartComponent>|
|valueType of primaryYAxis| Property: valueType
var primaryYAxis = { valueType: ‘DateTime’};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: valueType <ChartComponent id='charts' primaryYAxis ={ valueType: 'DateTime'}></ChartComponent>|
|visible of primaryYAxis| Property: visible
var primaryYAxis = { visible: true};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: visible <ChartComponent id='charts' primaryYAxis ={ visible: true}></ChartComponent>|
|zoomFactor of primaryYAxis| Property: zoomFactor
var primaryYAxis = { zoomFactor: 0.3};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: zoomFactor <ChartComponent id='charts' primaryYAxis ={ zoomFactor: 0.3}></ChartComponent>|
|zoomPosition of primaryYAxis| Property: zoomPosition
var primaryYAxis = { zoomPosition: 0.3};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: zoomPosition <ChartComponent id='charts' primaryYAxis ={ zoomPosition: 0.3}></ChartComponent>|
|labelBorder of primaryYAxis| Property: labelBorder
var primaryYAxis = { labelBorder: { color: ‘red’, width: 2}};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: border <ChartComponent id='charts' primaryYAxis ={ border: { color: 'red', width: 3 }}></ChartComponent>|
|title of primaryYAxis| Property: title.text
var primaryYAxis = { title: { text: ‘Chart title’ }};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: title <ChartComponent id='charts' primaryYAxis ={title: 'Chart title'}></ChartComponent>|
|StripLine of primaryYAxis| Property: stripLine
var primaryYAxis = { stripLine: []};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: stripLines <ChartComponent id='charts' primaryYAxis ={stripLines: []}></ChartComponent>|
|Multilevel labels of primaryYAxis| Property: multiLevelLabels
var primaryYAxis = { multiLevelLabels: []};<EJ.ChartprimaryYAxis ={primaryYAxis}> </EJ.Chart>|Property: multiLevelLabels <ChartComponent id='charts' primaryYAxis ={multiLevelLabels: []}></ChartComponent>|
|skeleton for an axes| Not Applicable|Property: axes.skeleton <ChartComponent id='charts' primaryYAxis ={axes=[ { skeleton: 'yMd' }}></ChartComponent>|
|skeleton type for an axes| Not Applicable|Property: axes.skeletonType <ChartComponent id='charts' primaryYAxis ={axes=[{skeletonType: 'DateTime'}]}></ChartComponent>|
Axes
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Alternate grid band| Property: alternateGridBand
var axes= {alternateGridBand: { even: { fill: ‘red } } };<EJ.Chartaxes={axes}> </EJ.Chart>|Not applicable|
|Axis line cross value| Property: crossesAt
var axes= { crossesAt : 0 };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: crossesAt <ChartComponent id='charts'><AxisDirective crossesAt='4'></AxisDirective></ChartComponent>|
|axis name with which the axis line has to be crossed| Property: crossesInAxis
var axes= { crossesInAxis : ‘’ };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: crossesInAxis <ChartComponent id='charts'><AxisDirective crossesInAxis : '' ></AxisDirective></ChartComponent>|
|axis elements placed with axis line| Property: showNextToAxisLine
var axes= { showNextToAxisLine : true };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: placeNextToAxisLine <ChartComponent id='charts'><AxisDirective placeNextToAxisLine: ''></AxisDirective></ChartComponent>|
|axis line style| Property: axisLine.color
var axes= { axisLine: { color : ‘red’ } };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: lineStyle.color <ChartComponent id='charts'><AxisDirective lineStyle: { color: 'black' }></AxisDirective></ChartComponent>|
|axis line dashArray| Property: axisLine.dashArray
var axes= { axisLine: { dashArray : ‘10, 5’ } };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: lineStyle.dashArray <ChartComponent id='charts'><AxisDirective lineStyle: { dashArray: '10, 5'} ></AxisDirective></ChartComponent>|
|Offset for axis| Property: axisLine.offset
var axes= { axisLine: { offset : 10 } };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: plotOffset <ChartComponent id='charts'><AxisDirective plotOffset: 10></AxisDirective></ChartComponent>|
|Visible of an axis| Property: axisLine.visible
var axes= { axisLine: { visible : false } };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: visible <ChartComponent id='charts'><AxisDirective visible: false></AxisDirective></ChartComponent>|
|Width of an axis| Property: axisLine.width
var axes= { axisLine: { width : 2 } };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: lineStyle.width <ChartComponent id='charts'><AxisDirective lineStyle: { width: 3 }></AxisDirective></ChartComponent>|
|Column index of an axis| Property: columnIndex
var axes= { columnIndex: 2 };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: columnIndex <ChartComponent id='charts'><AxisDirective columnIndex: 2></AxisDirective></ChartComponent>|
|span of an axis to place horizontally or vertically| Property: columnSpan
var axes= { columnSpan: 2 };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: span <ChartComponent id='charts'><AxisDirective span: 2></AxisDirective></ChartComponent>|
|Crosshair label of an axis| Property: crossHairLabel.visible
var axes= { crossHairLabel: { visible: true } };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: crossHairTooltip.enable <ChartComponent id='charts'><AxisDirective crossHairTooltip: { enable: true }></AxisDirective></ChartComponent>|
|Crosshair label color of an axis| Not applicable |Property: crossHairTooltip.fill <ChartComponent id='charts'><AxisDirective crossHairTooltip: { fill: 'red' } ></AxisDirective></ChartComponent>|
|Crosshair label text style| Not applicable |Property: crossHairTooltip.textStyle <ChartComponent id='charts'><AxisDirective crossHairTooltip: { textStyle: { } }></AxisDirective></ChartComponent>|
|Desired interval count for primaryYAxis| Property: desiredIntervals
var axes= { desiredIntervals: 4};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: desiredIntervals <ChartComponent id='charts'><AxisDirective desiredIntervals: 4></AxisDirective></ChartComponent>|
|Edges axes| Property: edgeLabelPlacement
var axes= { edgeLabelPlacement: ‘none’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: edgeLabelPlacement <ChartComponent id='charts'><AxisDirective edgeLabelPlacement: 'Shift'></AxisDirective></ChartComponent>|
|Enables trim for axis labels| Property: enableTrim
var axes= { enableTrim: true};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: enableTrim <ChartComponent id='charts'><AxisDirective enableTrim: true></AxisDirective></ChartComponent>|
|Specifies the interval of the axis according to the zoomed data of the chart| Property: enableAutoIntervalOnZooming
var axes= { enableAutoIntervalOnZooming: true};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: enableAutoIntervalOnZooming <ChartComponent id='charts'><AxisDirective enableAutoIntervalOnZooming: true></AxisDirective></ChartComponent>|
|Font style for axes| Property: font
var axes= { font: { fontFamily: ‘Calibri’} };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: titleStyle <ChartComponent id='charts'><AxisDirective titleStyle: { }></AxisDirective></ChartComponent>|
|Indexed for category axis| Property: isIndexed
var axes= { font: { isIndexed: true} };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: isIndexed <ChartComponent id='charts'><AxisDirective isIndexed: true></AxisDirective></ChartComponent>|
|Interval type for date time axis| Property: intervalType
var axes= { intervalType: ‘Auto’ };<EJ.Chartaxes={axes}> </EJ.Chart>|Property: intervalType <ChartComponent id='charts'><AxisDirective intervalType: 'Auto'></AxisDirective></ChartComponent>|
|Inversed axis| Property: isInversed
var axes= {isInversed: true};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: isInversed <ChartComponent id='charts'><AxisDirective isInversed: true></AxisDirective></ChartComponent>|
|Custom label format| Property: labelFormat
var axes= {labelFormat: ‘{value}K’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: labelFormat <ChartComponent id='charts'><AxisDirective labelFormat: '{value}K'></AxisDirective></ChartComponent>|
|labelIntersectAction| Property: labelIntersectAction
var axes= {labelIntersectAction: ‘trim’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: labelIntersectAction <ChartComponent id='charts'><AxisDirective labelIntersectAction: 'Trim'></AxisDirective></ChartComponent>|
|labelPosition| Property: labelPosition
var axes= {labelPosition: ‘inside’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: labelPosition <ChartComponent id='charts'><AxisDirective labelPosition: 'Inside'></AxisDirective></ChartComponent>|
|labelPlacement for category axis| Property: labelPlacement
var axes= {labelPlacement: ‘onTicks’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: labelPlacement <ChartComponent id='charts'><AxisDirective labelPlacement: 'OnTicks'></AxisDirective></ChartComponent>|
|Axis label alignment| Property: alignment
var axes= {alignment: ‘center’};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Rotation of axis labels| Property: labelRotation
var axes= {labelRotation: 45};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: labelRotation <ChartComponent id='charts'><AxisDirective labelRotation: 45></AxisDirective></ChartComponent>|
|Log base value for logarithmic axis| Property: logBase
var axes= {logBase: 10};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: logBase <ChartComponent id='charts'><AxisDirective logBase: 10></AxisDirective></ChartComponent>|
|Major grid line| Property: majorGridLines.visible
var axes= {majorGridLines: { visible: true}};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Width of MajorGridLines| Property: majorGridLines.width
var axes= {majorGridLines: { width: 2}};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: majorGridLines.width <ChartComponent id='charts'><AxisDirective majorGridLines: { width: 2}></AxisDirective></ChartComponent>|
|Color of MajorGridLines| Property: majorGridLines.color
var axes= {majorGridLines: { color: ‘black’ }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: majorGridLines.color <ChartComponent id='charts'><AxisDirective majorGridLines: { color: 'black' }></AxisDirective></ChartComponent>|
|DashArray of MajorGridLines| Property: majorGridLines.dashArray
var axes= {majorGridLines: { dashArray: ‘10,5’ }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: majorGridLines.dashArray <ChartComponent id='charts'><AxisDirective majorGridLines: { dashArray: '10,5' }></AxisDirective></ChartComponent>|
|Opacity of major grid line| Property: majorGridLines.opacity
var axes= {majorGridLines: { opacity: true }};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Major Tick line| Property: majorTickLines.visible
var axes= {majorTickLines: { visible: true }};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Width of MajorTickLines| Property: majorTickLines.width
var axes= {majorTickLines: { width: 2 }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: majorTickLines.width <ChartComponent id='charts'><AxisDirective majorTickLines: { width: 2 }></AxisDirective></ChartComponent>|
|Height of MajorTickLines| Property: majorTickLines.size
var axes= {majorTickLines: { size: 2 }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: majorTickLines.height <ChartComponent id='charts'><AxisDirective majorTickLines: { height: 2}></AxisDirective></ChartComponent>|
|Color of MajorTickLines| Property: majorTickLines.color
var axes= {majorTickLines: { color: ‘black’ }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: majorTickLines.color <ChartComponent id='charts'><AxisDirective majorTickLines: { color: 'black' }></AxisDirective></ChartComponent>|
|Opacity of major Tick line| Property: majorTickLines.opacity
var axes= {majorTickLines: { opacity: true};<EJ.Chartaxes={axes}> </EJ.Chart>| Not Applicable|
|maximum labels of axes| Property: maximumLabels
var axes= { maximumLabels: 5};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: maximumLabels <ChartComponent id='charts'><AxisDirective maximumLabels: 4></AxisDirective></ChartComponent>|
|maximum labels width of axes to trim| Property: maximumLabelWidth
var axes= { maximumLabelWidth: 40};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: maximumLabelWidth <ChartComponent id='charts'><AxisDirective maximumLabelWidth: 40></AxisDirective></ChartComponent>|
|minor grid line| Property: minorGridLines.visible
var axes= { minorGridLines: { visible: true}};<EJ.Chartaxes={axes}> </EJ.Chart>| Not Applicable|
|Width of minorGridLines| Property: minorGridLines.width
var axes= { minorGridLines: { width: 2}};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorGridLines.width <ChartComponent id='charts'><AxisDirective minorGridLines: { width: 2}></AxisDirective></ChartComponent>|
|Color of minorGridLines| Property: minorGridLines.color
var axes= { minorGridLines: { color: ‘black’}};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorGridLines.color <ChartComponent id='charts'><AxisDirective minorGridLines: { color: 'black'}></AxisDirective></ChartComponent>|
|DashArray of minorGridLines| Property: minorGridLines.dashArray
var axes= { minorGridLines: { dashArray: ‘10,5’}};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorGridLines.dashArray <ChartComponent id='charts'><AxisDirective minorGridLines: { dashArray: '10,5' }></AxisDirective></ChartComponent>|
|Opacity of minor grid line| Property: minorGridLines.opacity
var axes= { minorGridLines: { opacity: true}};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|minor Tick line| Property: minorTickLines.visible
var axes= { minorTickLines: { visible: true}};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Width of minorTickLines| Property: minorTickLines.width
var axes= { minorTickLines: { width: 2 }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorTickLines.width <ChartComponent id='charts'><AxisDirective minorTickLines: { width: 2}></AxisDirective></ChartComponent>|
|Height of minorTickLines| Property: minorTickLines.size
var axes= { minorTickLines: { size: 2}};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorTickLines.height <ChartComponent id='charts'><AxisDirective minorTickLines: { height: 2}></AxisDirective></ChartComponent>|
|Color of minorTickLines| Property: minorTickLines.color
var axes= { minorTickLines: { color: ‘black’ }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorTickLines.color <ChartComponent id='charts'><AxisDirective minorTickLines: { color: 'black' }></AxisDirective></ChartComponent>|
|Opacity of minor Tick line| Property: minorTickLines.opacity
var axes= { minorTickLines: { opacity: true }};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Minor ticks per interval of axes| Property: minorTicksPerInterval
var axes= { minorTicksPerInterval: 4};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minorTicksPerInterval <ChartComponent id='charts'><AxisDirective minorTicksPerInterval: 4></AxisDirective></ChartComponent>|
|name of the axes| Property: name
var axes= { name: ‘axes’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: name <ChartComponent id='charts'><AxisDirective name: 'primaryYAxis'></AxisDirective></ChartComponent>|
|Orientation of axes| Property: orientation
var axes= { orientation: ‘Vertical’};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|Plot offset for axes| Property: plotOffset
var axes= { plotOffset: 0};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: plotOffset <ChartComponent id='charts'><AxisDirective plotOffset: 0></AxisDirective></ChartComponent>|
|minimum for axes| Property: range.minimum
var axes= { range: { minimum: 10 }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: minimum <ChartComponent id='charts'><AxisDirective minimum: 23></AxisDirective></ChartComponent>|
|maximum for axes| Property: range.maximum
var axes= { range: { maximum: 10 }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: maximum <ChartComponent id='charts'><AxisDirective maximum: 23></AxisDirective></ChartComponent>|
|interval for axes| Property: range.interval
var axes= { range: { interval: 1 }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: interval <ChartComponent id='charts'><AxisDirective interval: 2></AxisDirective></ChartComponent>|
|RangePadding for axes| Property: rangePadding
var axes= { rangePadding: ‘None’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: rangePadding <ChartComponent id='charts'><AxisDirective rangePadding: 'None'></AxisDirective></ChartComponent>|
|Rounding Places in axes| Property: roundingPlaces
var axes= { roundingPlaces: 3};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: labelFormat <ChartComponent id='charts'><AxisDirective labelFormat: 'n3'></AxisDirective></ChartComponent>|
|ScrollBar settings of axes| Property: scrollbarSettings
var axes= { scrollbarSettings : { }};<EJ.Chartaxes={axes}> </EJ.Chart>|Not Applicable|
|TickPosition in axes| Property: tickLinesPosition
var axes= { tickLinesPosition: ‘Inside’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: tickPosition <ChartComponent id='charts'><AxisDirective tickPosition: 'Inside'></AxisDirective></ChartComponent>|
|valueType of axes| Property: valueType
var axes= { valueType: ‘DateTime’};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: valueType <ChartComponent id='charts'><AxisDirective valueType: 'DateTime'></AxisDirective></ChartComponent>|
|visible of axes| Property: visible
var axes= { visible: true};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: visible <ChartComponent id='charts'><AxisDirective visible: true></AxisDirective></ChartComponent>|
|zoomFactor of axes| Property: zoomFactor
var axes= { zoomFactor: 0.3};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: zoomFactor <ChartComponent id='charts'><AxisDirective zoomFactor: 0.3 ></AxisDirective></ChartComponent>|
|zoomPosition of axes| Property: zoomPosition
var axes= { zoomPosition: 0.3};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: zoomPosition <ChartComponent id='charts'><AxisDirective zoomPosition: 0.3 ></AxisDirective></ChartComponent>|
|labelBorder of axes| Property: labelBorder
var axes= { labelBorder: { color: ‘red’, width: 2}};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: border <ChartComponent id='charts'><AxisDirective border: { color: 'red', width: 3 } ></AxisDirective></ChartComponent>|
|title of axes| Property: title.text
var axes= { title: { text: ‘Chart title’ }};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: title <ChartComponent id='charts'><AxisDirective title: 'Chart title'></AxisDirective></ChartComponent>|
|StripLine of axes| Property: stripLine
var axes= { stripLine: []};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: stripLines <ChartComponent id='charts'><AxisDirective stripLines: []></AxisDirective></ChartComponent>|
|Multilevel labels of axes| Property: multiLevelLabels
var axes= { multiLevelLabels: []};<EJ.Chartaxes={axes}> </EJ.Chart>|Property: multiLevelLabels <ChartComponent id='charts'><AxisDirective multiLevelLabels: []></AxisDirective></ChartComponent>|
|skeleton for an axes| Not Applicable|Property: axes.skeleton <ChartComponent id='charts'><AxisDirective skeleton: 'yMd' ></AxisDirective></ChartComponent>|
|skeleton type for an axes| Not Applicable|Property: axes.skeletonType <ChartComponent id='charts'><AxisDirective skeletonType: 'DateTime' ></AxisDirective></ChartComponent>|
Rows
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|rows in chart| Property: rowDefinitions
var rowDefinitions=[{ }];<EJ.ChartrowDefinitions={rowDefinitions}> </EJ.Chart>|Property: rowDirective <ChartComponent id='charts'><rowDirective></rowDirective></ChartComponent>|
|Unit| Property: unit
var rowDefinitions=[{ unit : ‘percentage’ }];<EJ.ChartrowDefinitions={rowDefinitions}> </EJ.Chart>|Not Applicable|
|height of rows in chart| Property: rowHeight
var rowDefinitions=[{rowHeight : 50}]<EJ.ChartrowDefinitions={rowDefinitions}> </EJ.Chart>|Property: height <ChartComponent id='charts'><RowDirective height='50%' ></RowDirective></ChartComponent>|
|Line customization| Property: lineColor, lineWidth
var rowDefinitions=[{lineColor : ‘Gray’, linewidth : 0}]<EJ.ChartrowDefinitions={rowDefinitions}> </EJ.Chart>|Property: border <ChartComponent id='charts'><RowDirective border={width: 2, color:'brown'></RowDirective></ChartComponent>|
Series
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|bearFillColor| Property: bearFillColor
var series =[{ bearFillColor: ‘red’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: bearFillColor <ChartComponent id='charts'><SeriesDirective bearFillColor='red'></SeriesDirective></ChartComponent>|
|Border| Property: border
var series =[{ border: {color: ‘red’, width: 2}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: border <ChartComponent id='charts'><SeriesDirective border={ color: 'red', width: 2}></SeriesDirective></ChartComponent>|
|BoxPlotMode| Property: boxPlotMode
var series =[{ boxPlotMode: ‘inclusive’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: boxPlotMode <ChartComponent id='charts'><SeriesDirective boxPlotMode='Inclusive'></SeriesDirective></ChartComponent>|
|Minimum radius of Bubble series| Property: bubbleOptions.minRadius
var series =[{ bubbleOptions: { minRadius: 2}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: minRadius <ChartComponent id='charts'><SeriesDirective minRadius='2'></SeriesDirective></ChartComponent>|
|Maximum radius of Bubble series| Property: bubbleOptions.maxRadius
var series =[{ bubbleOptions: { maxRadius: 2}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: maxRadius <ChartComponent id='charts'><SeriesDirective minRadius='2'></SeriesDirective></ChartComponent>|
|bullFillColor| Property: bullFillColor
var series =[{ bullFillColor: ‘red’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: bullFillColor <ChartComponent id='charts'><SeriesDirective bullFillColor='red'></SeriesDirective></ChartComponent>|
|Cardinal spline tension for spline series| Property: cardinalSplineTension
var series =[{ cardinalSplineTension: 0.5}]<EJ.Chartseries={series}> </EJ.Chart>|Property: cardinalSplineTension <ChartComponent id='charts'><SeriesDirective cardinalSplineTension='0.5'></SeriesDirective></ChartComponent>|
|Column Width for rectangle series| Property: columnWidth
var series =[{ columnWidth : 0.5}]<EJ.Chartseries={series}> </EJ.Chart>|Property: cardinalSplineTension <ChartComponent id='charts'><SeriesDirective columnWidth='0.5'></SeriesDirective></ChartComponent>|
|Column spacing for rectangle series| Property: columnSpacing
var series =[{ columnSpacing: 0.5}]<EJ.Chartseries={series}> </EJ.Chart>|Property: columnSpacing <ChartComponent id='charts'><SeriesDirective columnSpacing='0.5'></SeriesDirective></ChartComponent>|
|Topleft radius for rectangle series| Property: cornerRadius.topLeft
var series =[{ topLeft: 0}]<EJ.Chartseries={series}> </EJ.Chart>|Property: cornerRadius.topLeft <ChartComponent id='charts'><SeriesDirective topLeft='0.5'></SeriesDirective></ChartComponent>|
|topRight radius for rectangle series| Property: cornerRadius.topRight
var series =[{ topRight: 0}]<EJ.Chartseries={series}> </EJ.Chart>|Property: cornerRadius.topRight <ChartComponent id='charts'><SeriesDirective topRight: 0></SeriesDirective></ChartComponent>|
|bottomRight radius for rectangle series| Property: cornerRadius.bottomRight
var series =[{ bottomRight: 0}]<EJ.Chartseries={series}> </EJ.Chart>|Property: cornerRadius.bottomRight <ChartComponent id='charts'><SeriesDirective bottomRight: 0></SeriesDirective></ChartComponent>|
|bottomLeft radius for rectangle series| Property: cornerRadius.bottomLeft
var series =[{ bottomLeft: 0}]<EJ.Chartseries={series}> </EJ.Chart>|Property: cornerRadius.bottomLeft <ChartComponent id='charts'><SeriesDirective bottomLeft: 0></SeriesDirective></ChartComponent>|
|DashArray property| Property: dashArray
var series =[{ dashArray: ‘10, 5’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: dashArray <ChartComponent id='charts'><SeriesDirective dashArray='10, 5'></SeriesDirective></ChartComponent>|
|DataSource for series| Property: dataSource
var series =[{ dataSource: {} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataSource <ChartComponent id='charts'><SeriesDirective dataSource: []></SeriesDirective></ChartComponent>|
|Draw type for Polar series| Property: drawType
var series =[{ drawType: ‘Line’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: drawType <ChartComponent id='charts'><SeriesDirective drawType='Line'></SeriesDirective></ChartComponent>|
|EmptyPointSettings for series| Property: emptyPointSettings.visible
var series =[{emptyPointSettings: { visible: false }}]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Empty Point Display mode| Property: emptyPointSettings.displayMode
var series =[{emptyPointSettings: { displayMode: ‘gap’} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: emptyPointSettings.displayMode <ChartComponent id='charts'><SeriesDirective emptyPointSettings={displayMode: 'gap'}></SeriesDirective></ChartComponent>|
|Empty Point color| Property: emptyPointSettings.color
var series =[{ emptyPointSettings: { color: ‘red’}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: emptyPointSettings.color <ChartComponent id='charts'><SeriesDirective emptyPointSettings={color: 'red'}></SeriesDirective></ChartComponent>|
|Empty Point Border| Property: emptyPointSettings.border
var series =[{emptyPointSettings: { border: {}}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: emptyPointSettings.border <ChartComponent id='charts'><SeriesDirective emptyPointSettings={border: {}}></SeriesDirective></ChartComponent>|
|Enable animation for series| Property: enableAnimation
var series =[{enableAnimation : true}]<EJ.Chartseries={series}> </EJ.Chart>|Property: animation.enable <ChartComponent id='charts'><SeriesDirective animation={ enable={false}}></SeriesDirective></ChartComponent>|
|Animation duration for series| Property: animationDuration
var series =[{animationDuration: 1000}]<EJ.Chartseries={series}> </EJ.Chart>|Property: animation.duration <ChartComponent id='charts'><SeriesDirective animation={ duration={1000} }></SeriesDirective></ChartComponent>|
|Animation delay for series| Not Applicable|Property: animation.delay <ChartComponent id='charts'><SeriesDirective animation={ delay={100} }></SeriesDirective></ChartComponent>|
|Drag settings for series| Property: dragSettings
var series =[{dragSettings : { mode: ‘X’ }}]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Errorbar settings for series| Property: errorBarSettings
var series =[{errorBarSettings: { }}]<EJ.Chartseries={series}> </EJ.Chart>|Property: errorBarSettings <ChartComponent id='charts'><SeriesDirective errorBarSettings={ }></SeriesDirective></ChartComponent>|
|Closed series| Property: isClosed
var series =[{isClosed: true}]<EJ.Chartseries={series}> </EJ.Chart>|Property: isClosed <ChartComponent id='charts'><SeriesDirective isClosed={true}></SeriesDirective></ChartComponent>|
|Stacking Property for series| Property: isStacking
var series =[{isStacking : true}]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Line cap for series| Property: lineCap
var series =[{lineCap : ‘butt’}]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Line join for series| Property: lineJoin
var series =[{lineJoin : ‘round’}]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Opacity for series| Property: opacity
var series =[{opacity: 0.7}]<EJ.Chartseries={series}> </EJ.Chart>|Property: opacity <ChartComponent id='charts'><SeriesDirective opacity={0.7}></SeriesDirective></ChartComponent>|
|Outlier settings of series| Property: outLierSettings
var series =[{outLierSettings: { }}]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Palette| Property: palette
var series =[{palette: “ColorFieldName”}]<EJ.Chartseries={series}> </EJ.Chart>|Property: pointColorMapping <ChartComponent id='charts'><SeriesDirective pointColorMapping='color'></SeriesDirective></ChartComponent>|
|Positive fill for waterfall series| Property: positiveFill
var series =[{ positiveFill: “red”}]<EJ.Chartseries={series}> </EJ.Chart>|Property: positiveFill <ChartComponent id='charts'><SeriesDirective positiveFill: "red"></SeriesDirective></ChartComponent>|
|Show average value in box and whisker series| Property: showMedian
var series =[{ showMedian: true}]<EJ.Chartseries={series}> </EJ.Chart>|Property: showMean <ChartComponent id='charts'><SeriesDirective showMean={false}></SeriesDirective></ChartComponent>|
|To group the series of stacking collection| Property: stackingGroup
var series =[{ stackingGroup: ‘group’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: stackingGroup <ChartComponent id='charts'><SeriesDirective stackingGroup='group'></SeriesDirective></ChartComponent>|
|Specifies the type of the series to render in chart.| Property: type
var series =[{ type: ‘Line’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: type <ChartComponent id='charts'><SeriesDirective type: 'Line'></SeriesDirective></ChartComponent>|
|Defines the visibility of the series| Property: visibility
var series =[{ visibility: true}]<EJ.Chartseries={series}> </EJ.Chart>|Property: visible <ChartComponent id='charts'><SeriesDirective visible={true}></SeriesDirective></ChartComponent>|
|Specifies the different types of spline curve| Property: splineType
var series =[{ splineType : ‘Natural’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: splineType <ChartComponent id='charts'><SeriesDirective splineType='Natural'></SeriesDirective></ChartComponent>|
|Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection.| Property: xAxisName
var series =[{xAxisName : ‘secondaryXAxis’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: xAxisName <ChartComponent id='charts'><SeriesDirective xAxisName='secondaryXAxis'></SeriesDirective></ChartComponent>|
|Name of the property in the datasource that contains x value for the series.| Property: xName
var series =[{xName : ‘x’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: xName <ChartComponent id='charts'><SeriesDirective xName='x'></SeriesDirective></ChartComponent>|
|Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection.| Property: yAxisName
var series =[{yAxisName : ‘secondaryYAxis’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: yAxisName <ChartComponent id='charts'><SeriesDirective yAxisName='secondaryYAxis'></SeriesDirective></ChartComponent>|
|Name of the property in the datasource that contains y value for the series.| Property: yName
var series =[{yName : ‘y’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: yName <ChartComponent id='charts'><SeriesDirective yName='y'></SeriesDirective></ChartComponent>|
|Name of the property in the datasource that contains high value for the series.| Property: high
var series =[{high : ‘y’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: high <ChartComponent id='charts'><SeriesDirective high='y'></SeriesDirective></ChartComponent>|
|Name of the property in the datasource that contains low value for the series.| Property: low
var series =[{low : ‘y’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: low <ChartComponent id='charts'><SeriesDirective low='y'></SeriesDirective></ChartComponent>|
|Name of the property in the datasource that contains close value for the series.| Property: close
var series =[{close : ‘y’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: close <ChartComponent id='charts'><SeriesDirective close='y'></SeriesDirective></ChartComponent>|
|Name of the property in the datasource that contains open value for the series| Property: open
var series =[{open : ‘y’}]<EJ.Chartseries={series}> </EJ.Chart>|Property: open <ChartComponent id='charts'><SeriesDirective open='y'></SeriesDirective></ChartComponent>|
|Option to add trendlines to chart| Property: trendLines
var series =[{trendLines : [{}]}]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines <ChartComponent id='charts'><SeriesDirective trendLines=[{}]></SeriesDirective></ChartComponent>|
|Options for customizing the appearance of the series or data point while highlighting| Property: highlightSettings
var series =[{ highlightSettings : {}}]<EJ.Chartseries={series}> </EJ.Chart>|Not applicable.|
|Options for customizing the appearance of the series/data point on selection| Property: selectionSettings
var series =[{ selectionSettings : {}}]<EJ.Chartseries={series}> </EJ.Chart>|Not applicable.|
marker
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|visibility of marker| Property: marker.visible
var series =[{marker: { visible: true }}]<EJ.Chartseries={series}> </EJ.Chart>|Property: marker.visible <ChartComponent id='charts'><SeriesDirective marker={ visible: false }></SeriesDirective></ChartComponent>|
|visibility of marker| Property: marker.visible
var series =[{marker: { visible: true }}]<EJ.Chartseries={series}> </EJ.Chart>|Property: marker.visible <ChartComponent id='charts'><SeriesDirective marker={ visible: false }></SeriesDirective></ChartComponent>|
|Fill for marker| Property: marker.fill
var series =[{marker: { fill : ‘red’ }}]<EJ.Chartseries={series}> </EJ.Chart>|Property: marker.fill <ChartComponent id='charts'><SeriesDirective marker={ fill : 'red' }></SeriesDirective></ChartComponent>|
|Opacity for marker| Property: marker.opacity
var series =[{marker: { opacity : 0.5 }}]<EJ.Chartseries={series}> </EJ.Chart>|Property: marker.opacity <ChartComponent id='charts'><SeriesDirective marker={ opacity : 0.5 }></SeriesDirective></ChartComponent>|
|Shape of marker| Property: marker.shape
var series =[{marker: { shape : ‘Circle’}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: marker.shape <ChartComponent id='charts'><SeriesDirective marker={ shape : 'Triangle' }></SeriesDirective></ChartComponent>|
|ImageUrl of marker| Property: imageUrl
var series =[{marker: { imageUrl : ‘’}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: imageUrl <ChartComponent id='charts'><SeriesDirective marker={ imageUrl : '' }></SeriesDirective></ChartComponent>|
|Border of marker| Property: border
var series =[{marker: { border : { width: 2, color: ‘red’ }}}]<EJ.Chartseries={series}> </EJ.Chart>|Property: border <ChartComponent id='charts'><SeriesDirective marker={ border : { width: 2, color: 'red'}}></SeriesDirective></ChartComponent>|
|Height of marker| Property: size.height
var series =[{marker:{ size: { height: 30}} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: height <ChartComponent id='charts'><SeriesDirective marker={ height: 25}></SeriesDirective></ChartComponent>|
|Width of marker| Property: size.width
var series =[{marker:{ size: { width: 30}} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: width <ChartComponent id='charts'><SeriesDirective marker={ width: 30}></SeriesDirective></ChartComponent>|
|DataLabelSettings of marker| Property: marker.dataLabel
var series =[{marker:{ dataLabel: { }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: marker.dataLabel <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { }}></SeriesDirective></ChartComponent>|
|Visibility of dataLabel| Property: dataLabel.visible
var series =[{marker:{ dataLabel: { visible: true }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.visible <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { visible: true }}></SeriesDirective></ChartComponent>|
|Text mapping name of dataLabel| Property: dataLabel.textMappingName
var series =[{marker:{ dataLabel: { textMappingName: ‘’ }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.name <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { name: '' }}></SeriesDirective></ChartComponent>|
|Fill color of data label| Property: dataLabel.fill
var series =[{marker:{ dataLabel: { fill: ‘pink’ }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.fill <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { fill: 'pink' }}></SeriesDirective></ChartComponent>|
|Opacity of data label| Property: dataLabel.opacity
var series =[{marker:{ dataLabel: { opacity: 0.6 }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.opacity <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { opacity: 0.6 }}></SeriesDirective></ChartComponent>|
|Text position of data label| Property: dataLabel.textPosition
var series =[{marker:{ dataLabel: {textPosition: ‘middle’ }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.position <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { position: 'Top' }}></SeriesDirective></ChartComponent>|
|Alignment of data label| Property: dataLabel.verticalAlignment
var series =[{marker:{ dataLabel: {verticalAlignment: ‘near’ }} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.alignment <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { alignment: 'Near' }}></SeriesDirective></ChartComponent>|
|Border of data label| Property: dataLabel.border
var series =[{marker:{ dataLabel: {border: {}} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.border <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { border: {} }}></SeriesDirective></ChartComponent>|
|Offset for data label| Property: dataLabel.offset
var series =[{marker:{ dataLabel: {offset: { x: 5, y: 6 }} }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Margin of data label| Property: dataLabel.margin
var series =[{marker:{ dataLabel: {margin: {}} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.margin <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { margin: {} }}></SeriesDirective></ChartComponent>|
|Font of data label| Property: dataLabel.font
var series =[{marker:{ dataLabel: {font: {}} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.font <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { font: {} }}></SeriesDirective></ChartComponent>|
|HTML template in dataLabel| Property: dataLabel.template
var series =[{marker:{ dataLabel: {template: ‘<div>Chart</div>’} }]<EJ.Chartseries={series}> </EJ.Chart>|Property: dataLabel.template <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { template: '<div>Chart</div>' }}></SeriesDirective></ChartComponent>|
|Rounded corner radius X| Not Applicable|Property: dataLabel.rx <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { rx: 10 }}></SeriesDirective></ChartComponent>|
|Rounded corner radius Y| Not Applicable|Property: dataLabel.ry <ChartComponent id='charts'><SeriesDirective marker={ dataLabel: { ry: 10 }}></SeriesDirective></ChartComponent>|
|Maximum Label width for data label| Property: dataLabel.maximumLabelWidth
var series =[{marker:{ dataLabel: {maximumLabelWidth: 20} }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|Enable wrapping of text for data label| Property: dataLabel.enableWrap
var series =[{marker:{ dataLabel: {enableWrap: true} }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|To show contrast color for data label| Property: dataLabel.showContrastColor
var series =[{marker:{ dataLabel: {showContrastColor: true} }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
|To show edge label for data label| Property: dataLabel.showEdgeLabels
var series =[{marker:{ dataLabel: {showEdgeLabels: true} }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable|
TrendLines
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Trendlines settings| Property: series.trendLines
var series =[{trendlines: [{ visibility: “visible”, type: “linear” }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: series.trendLines <ChartComponent id='charts'><TrendlineDirective></TrendlineDirective></ChartComponent>|
|Visibility of trendline| Property: trendLines.visibility
var series =[{trendlines: [{ visibility: “visible”}] }]<EJ.Chartseries={series}> </EJ.Chart>|Not applicable|
|Type of trendLine| Property: trendLines.type
var series =[{trendlines: [{type: “linear” }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.type <ChartComponent id='charts'><TrendlineDirective type='Linear'></TrendlineDirective></ChartComponent>|
|Name of trendLine| Property: trendLines.name
var series =[{trendlines: [{ name: ‘trendLine’ }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.name <ChartComponent id='charts'><TrendlineDirective name='trendLine'></TrendlineDirective></ChartComponent>|
|Period of trendLine| Property: trendLines.period
var series =[{trendlines: [{ period: 45}] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.period <ChartComponent id='charts'><TrendlineDirective name='trendLine'></TrendlineDirective></ChartComponent>|
|Polynomial order for Polynomial type trendLines| Property: trendLines.polynomialOrder
var series =[{trendlines: [{ polynomialOrder: 3}] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.polynomialOrder <ChartComponent id='charts'><TrendlineDirective polynomialOrder={3}></TrendlineDirective></ChartComponent>|
|Backward forecost for trendLines| Property: trendLines.backwardforecast
var series =[{trendlines: [{ backwardforecast: 3 }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.backwardforecast <ChartComponent id='charts'><TrendlineDirective backwardforecast={3}></TrendlineDirective></ChartComponent>|
|Forward forecost for trendLines| Property: trendLines.forwardforecast
var series =[{trendlines: [{ forwardforecast: 3 }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.forwardforecast <ChartComponent id='charts'><TrendlineDirective forwardforecast={3}></TrendlineDirective></ChartComponent>|
|Fill for trendLines| Property: trendLines.fill
var series =[{trendlines: [{ fill: ‘#EEFFCC’}] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.fill <ChartComponent id='charts'><TrendlineDirective fill='EEFFCC'></TrendlineDirective></ChartComponent>|
|Width for trendLines| Property: trendLines.width
var series =[{trendlines: [{ width: 2 }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.width <ChartComponent id='charts'><TrendlineDirective width={2}></TrendlineDirective></ChartComponent>|
|Intercept value for trendLines| Property: trendLines.intercept
var series =[{trendlines: [{ intercept: 2 }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.intercept <ChartComponent id='charts'><TrendlineDirective intercept={2}></TrendlineDirective></ChartComponent>|
|Legend shape for trendLines| Not Applicable|Property: trendLines.legendShape <ChartComponent id='charts'><TrendlineDirective legendShape='Rectangle'></TrendlineDirective></ChartComponent>|
|Animation settings for trendLines| Not Applicable|Property: trendLines.animation <ChartComponent id='charts'><TrendlineDirective animation={ enable: true }></TrendlineDirective></ChartComponent>|
|Marker settings for trendLines| Not Applicable|Property: trendLines.marker <ChartComponent id='charts'><TrendlineDirective marker={ visible: true}></TrendlineDirective></ChartComponent>|
|Tooltip for trendLines| Property: trendLines.tooltip
var series =[{trendlines: [{ tooltip: { } }] }]<EJ.Chartseries={series}> </EJ.Chart>|Property: trendLines.enableTooltip <ChartComponent id='charts'><TrendlineDirective enableTooltip={true}></TrendlineDirective></ChartComponent>|
|DashArray for trendLines| Property: trendLines.dashArray
var series =[{trendlines: [{ dashArray: ‘10, 5’ }] }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable.|
|Visible on legend for trendLines| Property: trendLines.visibleOnLegend
var series =[{trendlines: [{ visibleOnLegend: true }] }]<EJ.Chartseries={series}> </EJ.Chart>|Not Applicable.|
StripLines
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Default behaviour for striplines| Property: primaryXAxis.stripLines
var primaryYAxis = { stripLine: [{ visible: true, start: 30, end: 40,}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: primaryXAxis.stripLines <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ visible: true }] }></ChartComponent>|
|border for stripline| Property: stripLines.borderColor
var primaryYAxis = { stripLine: [{ borderColor: ‘pink’}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.border <ChartComponent id='charts' primaryXAxis ={ stripLines:[{border: { color: 'red'} }] }></ChartComponent>|
|Background color for stripline| Property: stripLines.color
var primaryYAxis = { stripLine: [{ color: ‘pink’}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.color <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ color: 'red' }] }></ChartComponent>|
|Start value for stripline| Property: stripLines.start
var primaryYAxis = { stripLine: [{ start: 10}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.start <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ start: 5 }] }></ChartComponent>|
|End value for stripline| Property: stripLines.end
var primaryYAxis = { stripLine: [{ end: 10}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.end <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ end: 5 }] }></ChartComponent>|
|StartfromAxis for stripline| Property: stripLines.startFromAxis
var primaryYAxis = { stripLine: [{ startFromAxis: true}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.startFromAxis <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ startFromAxis: true}] }></ChartComponent>|
|Text in stripline| Property: stripLines.text
var primaryYAxis = { stripLine: [{ text: ‘StripLine’}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.text <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ text: 'stripline'}] }></ChartComponent>|
|Text alignment in stripline| Property: stripLines.textAlignment
var primaryYAxis = { stripLine: [{ textAlignment: ‘Far’}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.horizontalAlignment <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ horizontalAlignment: 'Far'}] }></ChartComponent>|
|Text alignment in stripline| Not Applicable|Property: stripLines.verticalAlignment <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ verticalAlignment: 'Far'}] }></ChartComponent>|
|Size of stripline| Property: stripLines.width
var primaryYAxis = { stripLine: [{ width: 10}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.size <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ size: 10}] }></ChartComponent>|
|ZIndex of stripline| Property: stripLines.zIndex
var primaryYAxis = { stripLine: [{ zIndex: ‘Behind’}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.zIndex <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ zIndex: 'Behind' }] }></ChartComponent>|
|Font style of stripline| Property: stripLines.fontStyle
var primaryYAxis = { stripLine: [{ fontStyle: {}}]};<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: stripLines.textStyle <ChartComponent id='charts' primaryXAxis ={ stripLines:[{ textStyle: {}}] }></ChartComponent>|
Multilevel Labels
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Default behaviour for multilevelLabels| Property: stripLines.fontStyle
var primaryYAxis = { multiLevelLabels: [{ }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: primaryXAxis.multilevelLabels <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ }] }></ChartComponent>|
|Text alignment for multilevelLabels| Property: multiLevelLabels.textAlignment
var primaryYAxis = { multiLevelLabels: [{ textAlignment: ‘Near’ }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: primaryXAxis.multilevelLabels <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ }] }}></ChartComponent>|
|multilevelLabels.alignment| Property: multiLevelLabels.textAlignment
var primaryYAxis = { multiLevelLabels: [{ textAlignment: ‘Near’ }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multilevelLabels.alignment <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ alignment: 'Near' }] }}></ChartComponent>|
|Text overflow for multilevelLabels| Property: multiLevelLabels.textOverFlow
var primaryYAxis = { multiLevelLabels: [{ textOverFlow : ‘Trim’ }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels.overFlow <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ overFlow: 'Trim' }] }}></ChartComponent>|
|Border for multilevelLabels| Property: multiLevelLabels.border
var primaryYAxis = { multiLevelLabels: [{ border: { } }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels.border <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ border: { }}] }}></ChartComponent>|
|Start value for label| Property: multiLevelLabels.start
var primaryYAxis = { multiLevelLabels: [{ start: 45 }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels.categories.start <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ start: 45}] }] }></ChartComponent>|
|End value for label| Property: multiLevelLabels.end
var primaryYAxis = { multiLevelLabels: [{ end: 45 }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels.categories.end <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ end: 45}] }] }></ChartComponent>|
|Text for label| Property: multiLevelLabels.text
var primaryYAxis = { multiLevelLabels: [{ text: ‘Start’ }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels.categories.text <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ text: 'text'}] }] }></ChartComponent>|
|maximum text width for label| Property: multiLevelLabels.maximumTextWidth
var primaryYAxis = { multiLevelLabels: [{ maximumTextWidth: 10 }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Property: multiLevelLabels.categories.maximumTextWidth <ChartComponent id='charts' primaryXAxis ={ multiLevelLabels: [{ categories: [{ maximumTextWidth: 20 }] }] }></ChartComponent>|
|level of label| Property: multiLevelLabels.level
var primaryYAxis = { multiLevelLabels: [{ level: 10 }] };<EJ.ChartprimaryXAxis ={primaryXAxis}> </EJ.Chart>|Not applicable|
Methods
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|animation for series| Property: animate()
var chartobj= document.getElementById(‘chart’);<EJ.Chartid= chart> </EJ.Chart>
chartobj.animate();|Not applicable|
|Redraw for chart| Property: redraw()
var chartobj= document.getElementById(‘chart’);<EJ.Chartid= chart> </EJ.Chart>
chartobj.redraw();|Property: refresh()
public loaded(args: ILoadedEventArgs): void {
function () => {
args.chart.refresh();<ChartComponent id='charts'></ChartComponent>|
|Export| Property: chart.export()
var chartObj = $(“#chartcontainer”).ejChart(“instance”);
chartObj.export(“chartcontainer”);<EJ.Chartid= chartcontainer></EJ.Chart>|Property: chart.export()
public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.export();<ChartComponent id='charts'></ChartComponent>|
|Print| Property: chart.print()
var chartObj = $(“#chartcontainer”).ejChart(“instance”);
chartObj.print(“chartcontainer”);<EJ.Chartid= chartcontainer></EJ.Chart>|Property: chart.print()
public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.print();<ChartComponent id='charts'></ChartComponent>|
|AddSeries| Not Applicable|Property: chart.addSeries()
public add() {
this.chartInstance.addSeries([{ }]) };<ChartComponent id='charts'></ChartComponent>|
|AddSeries| Not Applicable|Property: chart.removeSeries()
public add() {
this.chartInstance.removeSeries([{ }]) };<ChartComponent id='charts'></ChartComponent>|
Events
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|Fires on annotation click| Property: annotationClick <EJ.Chartid= chartcontainer annotationClick = {annotationClick}></EJ.Chart>
function annotationClick(){};|Not applicable|
|Fires after animation| Property: animationComplete() <EJ.Chartid= chartcontainer animationComplete = {animationComplete}></EJ.Chart>
function animationComplete(){ };|Property: animationComplete() <ChartComponentid='charts animationComplete={this.animationComplete.bind(this)}'></ChartComponent>
public animationComplete(args:IAnimationCompleteEventArgs): void {};|
|Fires on axis label click| Property: axisLabelClick <EJ.Chartid= chartcontainer axisLabelClick = {axisLabelClick}></EJ.Chart>
function axisLabelClick(){ };|Not applicable|
|Fires before axis label render| Property: axisLabelRendering <EJ.Chartid= chartcontainer axisLabelRendering = {axisLabelRendering}></EJ.Chart>
function axisLabelRendering(){ };|Property: axisLabelRender() <ChartComponentid='charts axisLabelRender={this.axisLabelRender.bind(this)}'></ChartComponent>
public axisLabelRender(): void {};|
|Fires on axis label mouseMove| Property: axisLabelMouseMove <EJ.Chartid= chartcontainer axisLabelMouseMove = {axisLabelMouseMove}></EJ.Chart>
function axisLabelRendering(){ };|Not applicable|
|Fires on axis label initialize| Property: axisLabelInitialize <EJ.Chartid= chartcontainer axisLabelInitialize = {axisLabelInitialize}></EJ.Chart>
function axisLabelInitialize(){ };|Not applicable|
|Fires before axis range calculation| Property: axesRangeCalculate <EJ.Chartid= chartcontainer axesRangeCalculate = {axesRangeCalculate}></EJ.Chart>
function axesRangeCalculate(){ };|Property: axisRangeCalculated <ChartComponentid='charts axisRangeCalculated={this.axisRangeCalculated.bind(this)}></ChartComponent>
public axisRangeCalculated(): void {};|
|Fires on axis title rendering| Property: axisTitleRendering <EJ.Chartid= chartcontainer axisTitleRendering = {axisTitleRendering}></EJ.Chart>
function axisTitleRendering(){ };|Not applicable|
|Fires on after chart resize| Property: afterResize <EJ.Chartid= chartcontainer afterResize = {afterResize}></EJ.Chart>
function afterResize(){ };|Not applicable|
|Fires on before chart resize| Property: beforeResize <EJ.Chartid= chartcontainer beforeResize = {beforeResize}></EJ.Chart>
function beforeResize(){ };|Property: resized <ChartComponentid='charts resized={this.resized.bind(this)}></ChartComponent>
public resized(): void {};|
|Fires on chart click| Property: chartClick <EJ.Chartid= chartcontainer chartClick= {chartClick}></EJ.Chart>
function chartClick(){ };|Property: chartMouseClick <ChartComponentid='charts chartMouseClick={this.chartMouseClick.bind(this)}></ChartComponent>
public chartMouseClick(): void {};|
|Fires on chart mouse move| Property: chartMouseMove <EJ.Chartid= chartcontainer chartMouseMove= {chartMouseMove}></EJ.Chart>
function chartMouseMove(){ };|Property: chartMouseMove <ChartComponentid='charts chartMouseMove={this.chartMouseMove.bind(this)}></ChartComponent>
public chartMouseMove(): void {};|
|Fires on chart mouse leave| Property: chartMouseLeave <EJ.Chartid= chartcontainer chartMouseLeave= {chartMouseLeave}></EJ.Chart>
function chartMouseLeave(){ };|Property: chartMouseLeave <ChartComponentid='charts chartMouseLeave={this.chartMouseLeave.bind(this)}></ChartComponent>
public chartMouseLeave(): void {};|
|Fires on before chart double click| Property: chartDoubleClick <EJ.Chartid= chartcontainer chartDoubleClick= {chartDoubleClick}></EJ.Chart>
function chartDoubleClick(){ };|Not applicable|
|Fires on chart mouse up|Not Applicable|Property: chartmouseUp <ChartComponentid='charts chartmouseUp={this.chartmouseUp.bind(this)}></ChartComponent>
public chartmouseUp(): void {};|
|Fires on chart mouse down|Not Applicable|Property: chartmouseDown <ChartComponentid='charts chartmouseDown={this.chartmouseDown.bind(this)}></ChartComponent>
public chartmouseDown(): void {};|
|Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area| Property: chartAreaBoundsCalculate <EJ.Chartid= chartcontainer chartAreaBoundsCalculate= {chartAreaBoundsCalculate}></EJ.Chart>
function chartAreaBoundsCalculate(){ };|Not applicable|
|Fires when the dragging is started| Property: dragStart <EJ.Chartid= chartcontainer dragStart= {dragStart}></EJ.Chart>
function dragStart(){ };|Not applicable|
|Fires while dragging| Property: dragging <EJ.Chartid= chartcontainer dragging= {dragging}></EJ.Chart>
function dragging(){ };|Not applicable|
|Fires when the dragging is completed| Property: dragEnd <EJ.Chartid= chartcontainer dragEnd= {dragEnd}></EJ.Chart>
function dragEnd(){ };|Property: dragComplete <ChartComponentid='charts dragComplete={this.dragComplete.bind(this)}></ChartComponent>
public dragComplete(): void {};|
|Fires when chart is destroyed completely| Property: destroy <EJ.Chartid= chartcontainer destroy= {destroy}></EJ.Chart>
function destroy(){ };|Not applicable|
|Fires after chart is created.| Property: create <EJ.Chartid= chartcontainer create= {create}></EJ.Chart>
function create(){ };|Property: loaded <ChartComponentid='charts loaded={this.loaded.bind(this)}></ChartComponent>
public loaded(): void {};|
|Fires before rendering the data labels.| Property: displayTextRendering <EJ.Chartid= chartcontainer displayTextRendering= {displayTextRendering}></EJ.Chart>
function displayTextRendering(){ };|Property: textRender <ChartComponentid='charts textRender={this.textRender.bind(this)}></ChartComponent>
public textRender(): void {};|
|Fires, when error bar is rendering| Property: errorBarRendering <EJ.Chartid= chartcontainer errorBarRendering= {errorBarRendering}></EJ.Chart>
function errorBarRendering(){ };|Not applicable|
|Fires during the calculation of legend bounds| Property: legendBoundsCalculate <EJ.Chartid= chartcontainer legendBoundsCalculate= {legendBoundsCalculate}></EJ.Chart>
function legendBoundsCalculate(){ };|Not applicable|
|Fires on clicking the legend item.| Property: legendItemClick <EJ.Chartid= chartcontainer legendItemClick= {legendItemClick}></EJ.Chart>
function legendItemClick(){ };|Not applicable|
|Fires when moving mouse over legend item| Property: legendItemMouseMove <EJ.Chartid= chartcontainer legendItemMouseMove= {legendItemMouseMove}></EJ.Chart>
function legendItemMouseMove(){ };|Not applicable|
|Fires before rendering the legend item.| Property: legendItemRendering <EJ.Chartid= chartcontainer legendItemRendering= {legendItemRendering}></EJ.Chart>
function legendItemRendering(){ };|Property: legendRender <ChartComponentid='charts legendRender={this.legendRender.bind(this)}></ChartComponent>
public legendRender(): void {};|
|Fires before loading the chart.| Property: load <EJ.Chartid= chartcontainer load= {load}></EJ.Chart>
function load(){ };|Property: load <ChartComponentid='charts load={this.load.bind(this)}></ChartComponent>
public load(): void {};|
|Fires, when multi level labels are rendering.| Property: multiLevelLabelRendering <EJ.Chartid= chartcontainer multiLevelLabelRendering= {multiLevelLabelRendering}></EJ.Chart>
function multiLevelLabelRendering(){ };|Property: axisMultiLabelRender <ChartComponentid='charts' axisMultiLabelRender={this.axisMultiLabelRender.bind(this)}></ChartComponent>
public axisMultiLabelRender(): void {};|
|Fires on clicking a point in chart.| Property: pointRegionClick <EJ.Chartid= 'chartcontainer' pointRegionClick= {pointRegionClick}></EJ.Chart>
function pointRegionClick(){ };|Property: pointClick <ChartComponentid='charts' pointClick={this.pointClick.bind(this)}></ChartComponent>
public pointClick(): void {};|
|Fires when mouse is moved over a point.| Property: pointRegionMouseMove <EJ.Chartid= 'chartcontainer' pointRegionMouseMove= {pointRegionMouseMove}></EJ.Chart>
function pointRegionMouseMove(){ };|Property: pointMove <ChartComponentid='charts pointMove={this.pointMove.bind(this)}></ChartComponent>
public pointMove(): void {};|
|Fires before rendering chart.| Property: preRender <EJ.Chartid= 'chartcontainer' preRender= {preRender}></EJ.Chart>
function preRender(){ };|Not applicable|
|Fires when point render.| Not Applicable|Property: pointRender <ChartComponentid='charts' pointRender={this.pointRender.bind(this)}></ChartComponent>
public pointRender(): void {};|
|Fires after selected the data in chart| Property: rangeSelected <EJ.Chartid= 'chartcontainer' rangeSelected= {rangeSelected}></EJ.Chart>
function rangeSelected(){ };|Not applicable|
|Fires after selecting a series.| Property: seriesRegionClick <EJ.Chartid= 'chartcontainer' seriesRegionClick= {seriesRegionClick}></EJ.Chart>
function seriesRegionClick(){ };|Not applicable|
|Fires before rendering a series.| Property: seriesRendering <EJ.Chartid= 'chartcontainer' seriesRendering= {seriesRendering}></EJ.Chart>
function seriesRendering(){ };|Property: seriesRender <ChartComponentid='charts' seriesRender={this.seriesRender.bind(this)}></ChartComponent>
public seriesRender(): void {};|
|Fires before rendering the marker symbols.| Property: symbolRendering <EJ.Chartid= 'chartcontainer' symbolRendering= {symbolRendering}></EJ.Chart>
function symbolRendering(){ };|Not applicable|
|Fires before rendering the trendline| Property: trendlineRendering <EJ.Chartid= 'chartcontainer' trendlineRendering= {trendlineRendering}></EJ.Chart>
function trendlineRendering(){ };|Not applicable|
|Fires before rendering the Chart title.| Property: titleRendering <EJ.Chartid= 'chartcontainer' titleRendering= {titleRendering}></EJ.Chart>
function titleRendering(){ };|Not applicable|
|Fires before rendering the Chart sub title.| Property: subTitleRendering <EJ.Chartid= 'chartcontainer' subTitleRendering= {subTitleRendering}></EJ.Chart>
function subTitleRendering(){ };|Not applicable|
|Fires before rendering the tooltip.| Property: toolTipInitialize <EJ.Chartid= 'chartcontainer' toolTipInitialize= {toolTipInitialize}></EJ.Chart>
function toolTipInitialize(){ };|Property: tooltipRender <ChartComponentid='charts' tooltipRender={this.tooltipRender.bind(this)}></ChartComponent>
public tooltipRender(): void {};|
|Fires before rendering crosshair tooltip in axis| Property: trackAxisToolTip <EJ.Chartid= 'chartcontainer' trackAxisToolTip= {trackAxisToolTip}></EJ.Chart>
function trackAxisToolTip(){ };|Not applicable|
|Fires before rendering trackball tooltip.| Property: trackToolTip <EJ.Chartid= 'chartcontainer' trackToolTip= {trackToolTip}></EJ.Chart>
function trackToolTip(){ };|Not applicable|
|Event triggered when scroll starts| Property: scrollStart <EJ.Chartid= 'chartcontainer' scrollStart= {scrollStart}></EJ.Chart>
function scrollStart(){ };|Property: scrollStart <ChartComponentid='charts' scrollStart ={this.scrollStart.bind(this)}></ChartComponent>
public scrollStart(): void {};|
|Event triggered when scroll ends.| Property: scrollEnd <EJ.Chartid= 'chartcontainer' scrollEnd= {scrollEnd}></EJ.Chart>
function scrollEnd(){ };|Property: scrollEnd <ChartComponentid='charts' scrollEnd ={this.scrollEnd.bind(this)}></ChartComponent>
public scrollEnd(): void {};|
|Event triggered when scroll Change.| Property: scrollChange <EJ.Chartid= 'chartcontainer' scrollChange= {scrollChange}></EJ.Chart>
function scrollChange(){ };|Property: scrollChange <ChartComponentid='charts' scrollChange ={this.scrollChange.bind(this)}></ChartComponent>
public scrollChange(): void {};|
|Fires while performing rectangle zooming in chart| Property: zoomComplete <EJ.Chartid= 'chartcontainer' zoomComplete= {zoomComplete}></EJ.Chart>
function zoomComplete(){ };|Property: zoomComplete <ChartComponentid='charts' zoomComplete ={this.zoomComplete.bind(this)}></ChartComponent>
public zoomComplete(): void {};|
Chart properties
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
| — | — | — |
|selected data index| Property: selectedDataPointIndexes
var selectedDataPointIndexes = [ { seriesIndex: 0, pointIndex: 1}];<EJ.Chartid= 'chartcontainer' selectedDataPointIndexes= {selectedDataPointIndexes}></EJ.Chart>|Property: selectedDataIndexes
public selectedDataIndexes: [ { series: 0, point: 1}];<ChartComponentid='charts' selectedDataIndexes={this.selectedDataIndexes}></ChartComponent>|
|sideBySideSeriesPlacement for column based series| Property: sideBySideSeriesPlacement
var sideBySideSeriesPlacement = [ { seriesIndex: 0, pointIndex: 1}];<EJ.Chartid= 'chartcontainer' sideBySideSeriesPlacement= {sideBySideSeriesPlacement}></EJ.Chart>|Property: sideBySidePlacement
public sideBySidePlacement: [{true}];<ChartComponentid='charts' sideBySidePlacement={this.sideBySidePlacement}></ChartComponent>
|
|ZoomSettings| Property: zooming
var zooming = {enable: true};<EJ.Chartid= 'chartcontainer' zooming= {zooming}></EJ.Chart>|Property: zoomSettings
public zoomsettings: ZoomSettingsModel =
{enableMouseWheelZooming: true}<ChartComponentid='charts' zoomSettings={this.zoomsettings}></ChartComponent>
|
|Background color of the chart| Property: background <EJ.Chartid= 'chartcontainer' background='transparent'></EJ.Chart>|Property: background <ChartComponentid='charts' background='#EEFFCC'></ChartComponent>
|
|URL of the image to be used as chart background.| Property: backGroundImageUrl <EJ.Chartid= 'chartcontainer' background='transparent'></EJ.Chart>|Not Applicable|
|Customizing border of the chart| Property: border <EJ.Chartid= 'chartcontainer' border= {}></EJ.Chart>|Property: border <ChartComponentid='charts' border= {}></ChartComponent>
|
|This provides options for customizing export settings| Property: exportSettings
var exportSettings= { filename : “chart”, angle: ‘45’ }<EJ.Chartid= 'chartcontainer' exportSettings={exportSettings}></EJ.Chart>|Property: export() <ChartComponentid='charts' border= {}></ChartComponent>
public onClick(): void {
let fileName: string = (document.getElementById(‘fileName’) as HTMLInputElement).value;
this.chartInstance.export((this.mode.value as ExportType), fileName);|
|ChartArea customization| Property: chartArea
var chartArea= {}<EJ.Chartid= 'chartcontainer' chartArea={chartArea}></EJ.Chart>|Property: chartArea <ChartComponentid='charts' chartArea={this.chartArea}></ChartComponent>|