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