This article describes the API migration process of {Component Name} component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Annotation | Property: annotation <ej-chart> <e-annotations> <e-annotation> <e-annotation> </e-annotations> </ej-chart> |
Property: e-annotation <ejs-chart> <e-annotations> <e-annotation> <e-annotation> </e-annotations> </ejs-chart> |
Background | Property: background <ej-chart background='red'> </ej-chart> |
Property: background <ej-chart background='red'> </ej-chart> |
backgroundImageUrl | Property: backgroundImageUrl <ej-chart background='red'> </ej-chart> |
Property: Not Applicable. |
border of the chart | Property: border <ej-chart [border]='border'> </ej-chart> this.border = { width: 2, color: ‘red’} |
Property: border <ejs-chart [isResponsive]='border'> </ejs-chart> this.border = { width: 2, color: ‘red’} |
isResponsive of chart | Property: isResponsive <ej-chart [isResponsive]='response'> </ej-chart> this.response = true |
Property: Not Applicable |
Chart area of the chart | Property: chartArea <ej-chart [chartArea]='chartArea'> </ej-chart> this.chartArea = { border: { color: ‘red’, width: 2}, background: ‘transparent’ } |
Property: chartArea <ejs-chart [chartArea]='chartArea'> </ejs-chart> this.chartArea = { border: { color: ‘red’, width: 2}, background: ‘transparent’ } |
Column of the chart | Property: columnDefintions <ej-chart> <e-columnDefinitions> <e-columnDefinition> </e-columnDefinition> </e-columnDefinitions> </ej-chart> |
Property: columns <ej-chart> <e-columns> <e-column> </e-column> </e-columns> </ej-chart> |
crossHair | Property: crossHair <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { } |
Property: crossHair <ejs-chart [crosshair]='crosshair'> </ejs-chart> this.crosshair = { } |
Common series options | Property: commonSeriesOptions <ej-chart [commonSeriesOptions]='series'> </ej-chart> this.series = { } |
Property: Not Applicable |
Indicators | Property: indicator <ej-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ej-chart> |
Property: indicator <ejs-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ejs-chart> |
Rows of the chart | Property: rowDefintions <ej-chart> <e-rowDefinitions> <e-rowDefinition> </e-rowDefinition> </e-rowDefinitions> </ej-chart> |
Property: rows <ej-chart> <e-columns> <e-column> </e-column> </e-columns> </ej-chart> |
primaryXAxis | Property: primaryXAxis <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { } |
Property: primaryXAxis <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { } |
primaryYAxis | Property: primaryYAxis <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.series = { } |
Property: primaryXAxis <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { } |
Series | Property: series <ej-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ej-chart> |
Property: series <ejs-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ejs-chart> |
Selected data | Property: selectedDataPointIndexes <ej-chart [selectedDataPointIndexes]='selectData'> </ej-chart> this.selectedData = [ { seriesIndex: 2, pointIndex: 2}] |
Property: primaryXAxis <ejs-chart [selectedDataIndexes]='selectData'> </ejs-chart> this.selectData = [ { series: 0, point: 1}] |
Chart theme | Property: theme <ej-chart [theme]='theme'> </ej-chart> this.theme = ‘Material’ |
Property: theme <ejs-chart [theme]='theme'> </ejs-chart> this.theme = ‘Fabric’ |
Side by side placement of series | Property: sideBySideSeriePlacement <ej-chart [sideBySideSeriePlacement]='sideBySideSeriePlacement'> </ej-chart> this.sideBySideSeriePlacement = true |
Property: enableSideBySidePlacement <ejs-chart [enableSideBySidePlacement]='sideBySide'> </ejs-chart> this.sideBySide = true |
Chart title | Property: title.text <ej-chart [title]='title'> </ej-chart> this.title = ‘Chart title’ |
Property: title <ejs-chart [title]='sideBySide'> </ejs-chart> this.title =‘Chart title’ |
Zoom settings | Property: zooming <ej-chart [zooming]='zoom'> </ej-chart> this.zoom = {enable : true, enablePinching : true, enableMouseWheel: true, enableScrollBar: true, enableDeferredZoom: true, toolBarItems: [], type: ‘Y’} |
Property: zoomSettings <ejs-chart [zoomSettings]='zoom'> </ejs-chart> this.zoom = {enablePinchZooming: true, enableMouseWheelZooming: true, enableDeferredZooming: true, enablePinchZooming: true, enableSelectionZooming: true, enablePan: true, enableScrollBar: true } |
Multi selection of chart | Not Applicable | Property: isMultiSelect <ejs-chart [isMultiSelect]='select'> </ejs-chart> this.select = true |
Vertical chart | Property: isTransposed <ej-chart> <e-series-collection> <e-series [isTransposed]='isTransposed'> </e-series> </e-series-collection> </ej-chart> this.isTransposed = true |
Property: isTransposed <ejs-chart [isTransposed]='isTransposed'> </ejs-chart> this.isTransposed = true |
Tooltip for chart | Property: tooltip <ej-chart> <e-series-collection> <e-series [tooltip]='tooltip'> </e-series> </e-series-collection> </ej-chart> this.tooltip = {} |
Property: isTransposed <ejs-chart [tooltip]='tooltip'> </ejs-chart> this.tooltip = {} |
Height of chart | Property: size.height <ej-chart [size]='size'> </ej-chart> this.size = { height: ‘300’} |
Property: height <ejs-chart [height]='height'> </ejs-chart> this.height = ‘300’ |
Width of chart | Property: size.width <ej-chart [size]='size'> </ej-chart> this.size = { width: ‘300’} |
Property: height <ejs-chart [width]='width'> </ejs-chart> this.width = ‘300’ |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
3D chart | Property: enable3D <ej-chart [enable3D]='enable'> </ej-chart> this.enable = true |
Property: Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Annotation | Property: annotation <ej-chart> <e-annotations> <e-annotation [visible]='visible'> <e-annotation> </e-annotations> </ej-chart> this.visible = true |
Property: e-annotation <ejs-chart> <e-annotations> <e-annotation> <e-annotation> </e-annotations> </ejs-chart> |
Angle of annotation | Property: annotation.angle <ej-chart> <e-annotations> <e-annotation [angle]='angle'> <e-annotation> </e-annotations> </ej-chart> this.angle = 60 |
Property: Not Applicable |
Annotation content | Property: annotation.content <ej-chart> <e-annotations> <e-annotation> <e-annotation content='<div>Chart</div>'> </e-annotations> </ej-chart> |
Property: annotation.content <ejs-chart> <e-annotations> <e-annotation> <e-annotation content='<div>Chart</div>'> </e-annotations> </ejs-chart> |
Coordinate unit of annotation | Property: annotation.coordinateUnit <ej-chart> <e-annotations> <e-annotation> <e-annotation coordinateUnit='Pixel'> </e-annotations> </ej-chart> |
Property: annotation.coordinateUnits <ejs-chart> <e-annotations> <e-annotation> <e-annotation coordinateUnits='Pixel'> </e-annotations> </ejs-chart> |
Horizontal alignment of annotation | Property: annotation.horiontalAlignment <ej-chart> <e-annotations> <e-annotation> <e-annotation horiontalAlignment='near'> </e-annotations> </ej-chart> |
Property: annotation.horiontalAlignment <ejs-chart> <e-annotations> <e-annotation> <e-annotation horiontalAlignment='Near'> </e-annotations> </ejs-chart> |
Margin for annotation | Property: annotation.margin <ej-chart> <e-annotations> <e-annotation> <e-annotation [margin]='margin'> </e-annotations> </ej-chart> this.margin = { } |
Property: Not Applicable. |
Opacity for annotation | Property: annotation.opacity <ej-chart> <e-annotations> <e-annotation> <e-annotation [opacity]='opacity'> </e-annotations> </ej-chart> this.opacity = 2 |
Property: Not Applicable. |
region of annotation | Property: annotation.region <ej-chart> <e-annotations> <e-annotation> <e-annotation region='Chart'> </e-annotations> </ej-chart> |
Property: annotation.region <ejs-chart> <e-annotations> <e-annotation> <e-annotation region='Chart'> </e-annotations> </ejs-chart> |
Vertical alignment of annotation | Property: annotation.verticalAlignment <ej-chart> <e-annotations> <e-annotation> <e-annotation verticalAlignment='Top'> </e-annotations> </ej-chart> |
Property: annotation.verticalAlignment <ejs-chart> <e-annotations> <e-annotation> <e-annotation verticalAlignment='Top'> </e-annotations> </ejs-chart> |
XValue of annotation | Property: annotation.x <ej-chart> <e-annotations> <e-annotation> <e-annotation [x]='xvalue'> </e-annotations> </ej-chart> this.xvalue = 2 |
Property: annotation.x <ejs-chart> <e-annotations> <e-annotation> <e-annotation x='xvalue'> </e-annotations> </ejs-chart> this.xvalue = 2 |
x axis name of annotation | Property: annotation.xAxisName <ej-chart> <e-annotations> <e-annotation> <e-annotation [xAxisName]='xvalue'> </e-annotations> </ej-chart> this.xvalue = ‘axis’ |
Property: annotation.xAxisName <ejs-chart> <e-annotations> <e-annotation> <e-annotation [xAxisName]='xvalue'> </e-annotations> </ejs-chart> this.xvalue = ‘axis’ |
y axis name of annotation | Property: annotation.yAxisName <ej-chart> <e-annotations> <e-annotation> <e-annotation [yAxisName]='yvalue'> </e-annotations> </ej-chart> this.yvalue = ‘axis’ |
Property: annotation.xAxisName <ejs-chart> <e-annotations> <e-annotation> <e-annotation [yAxisName]='yvalue'> </e-annotations> </ejs-chart> this.yvalue = ‘axis’ |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Column of the chart | Property: columnDefintions <ej-chart> <e-columnDefinitions> <e-columnDefinition> </e-columnDefinition> </e-columnDefinitions> </ej-chart> |
Property: columns <ej-chart> <e-columns> <e-column> </e-column> </e-columns> </ej-chart> |
Width of columns | Property: columnDefinition.width <ej-chart> <e-columnDefinitions> <e-columnDefinition [width]='width'> </e-columnDefinition> </e-columnDefinitions> </ej-chart> this.width = 20;
|
Property: column.width <ej-chart> <e-columns> <e-column [width]='width> </e-column> </e-columns> </ej-chart> this.width = ‘400’; |
Unit of column width | Property: column.unit <ej-chart> <e-columnDefinitions> <e-columnDefinition [unit]='unit'> </e-columnDefinition> </e-columnDefinitions> </ej-chart> this.unit = ‘Pixel’;
|
Property: Not Applicable; |
Line color of columns | Property: columnDefintions.lineColor <ej-chart> <e-columnDefinitions> <e-columnDefinition [lineColor]='color'> </e-columnDefinition> </e-columnDefinitions> </ej-chart> this.color = ‘blue’;
|
Property: column.border.color <ej-chart> <e-columns> <e-column [border]='border> </e-column> </e-columns> </ej-chart> this.border = { color: ‘red’ } |
Line width of columns | Property: columnDefintions.lineWidth <ej-chart> <e-columnDefinitions> <e-columnDefinition [lineWidth]='width'> </e-columnDefinition> </e-columnDefinitions> </ej-chart> this.width = 2;
|
Property: column.border.width <ej-chart> <e-columns> <e-column [border]='border> </e-column> </e-columns> </ej-chart> this.border = { width: 2 } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
row of the chart | Property: rowDefintions <ej-chart> <e-rowDefinitions> <e-rowDefinition> </e-rowDefinition> </e-rowDefinitions> </ej-chart> |
Property: rows <ej-chart> <e-rows> <e-row> </e-row> </e-rows> </ej-chart> |
height of rows | Property: rowDefinition.height <ej-chart> <e-rowDefinitions> <e-rowDefinition [height]='height'> </e-rowDefinition> </e-rowDefinitions> </ej-chart> this.height = 20;
|
Property: row.height <ej-chart> <e-rows> <e-row [height]='height> </e-row> </e-rows> </ej-chart> this.height = ‘400’; |
Unit of row height | Property: row.unit <ej-chart> <e-rowDefinitions> <e-rowDefinition [unit]='unit'> </e-rowDefinition> </e-rowDefinitions> </ej-chart> this.unit = ‘Pixel’;
|
Property: Not Applicable; |
Line color of rows | Property: rowDefintions.lineColor <ej-chart> <e-rowDefinitions> <e-rowDefinition [lineColor]='color'> </e-rowDefinition> </e-rowDefinitions> </ej-chart> this.color = ‘blue’;
|
Property: row.border.color <ej-chart> <e-rows> <e-row [border]='border> </e-row> </e-rows> </ej-chart> this.border = { color: ‘red’ } |
Line height of rows | Property: rowDefintions.lineheight <ej-chart> <e-rowDefinitions> <e-rowDefinition [lineheight]='height'> </e-rowDefinition> </e-rowDefinitions> </ej-chart> this.height = 2;
|
Property: row.border.height <ej-chart> <e-rows> <e-row [border]='border> </e-row> </e-rows> </ej-chart> this.border = { width: 2 } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Common series option | Property: commonSeriesOptions <ej-chart [commonSeriesOptions]='commonSeriesOption'> </ej-chart> this.commonSeriesOption = { } |
Property: border <ejs-chart [commonSeriesOption]='commonSeriesOption'> </ejs-chart> this.commonSeriesOptions = { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
crossHair | Property: visible <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { visible: true } |
Property: enable <ejs-chart [crosshair]='crosshair'> </ejs-chart> this.crosshair = { enable: true } |
type of cross hair | Property: type <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { visible: true } |
Property: Not Applicable |
Trackball settings of crosshair | Property: trackBallSettings <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { trackBallSettings: { } } |
Property: Not Applicable. |
Marker settings of crosshair | Property: markerSettings <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { markerSettings: { } } |
Property: Not Applicable |
crossHair line style | Property: line <ej-chart [crosshair]='crosshair'> </ej-chart> this.crosshair = { line: { color: ‘red’, width: 2} } |
Property: line <ejs-chart [crosshair]='crosshair'> </ejs-chart> this.crosshair = { line :{ color: ‘red’, width: 2 } } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Indicators | Property: indicator <ej-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ej-chart> |
Property: indicator <ejs-chart> <e-indicators> <e-indicator> </e-indicator> </e-indicators> </ejs-chart> |
Indicator type | Property: type <ej-chart> <e-indicators> <e-indicator type='Tma'> </e-indicator> </e-indicators> </ej-chart> |
Property: type <ejs-chart> <e-indicators> <e-indicator type='Tma' > </e-indicator> </e-indicators> </ejs-chart> |
Period of indicator | Property: period <ej-chart> <e-indicators> <e-indicator [period]='period'> </e-indicator> </e-indicators> </ej-chart> this.period = 20; |
Property: period <ejs-chart> <e-indicators> <e-indicator [period]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 14; |
%d value of indicator | Property: dPeriod <ej-chart> <e-indicators> <e-indicator [dPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.dperiod = 20; |
Property: dPeriod <ejs-chart> <e-indicators> <e-indicator [dPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 14; |
%k value of indicator | Property: kPeriod <ej-chart> <e-indicators> <e-indicator [kPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.dperiod = 20; |
Property: kPeriod <ejs-chart> <e-indicators> <e-indicator [kPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 14; |
Show overBought/overSold values of indicator | Property: Not Applicable | Property: showZones <ejs-chart> <e-indicators> <e-indicator [showZones]='showZone' > </e-indicator> </e-indicators> </ejs-chart> this.showZone = true; |
overBought values of indicator | Property: Not Applicable | Property: overBought <ejs-chart> <e-indicators> <e-indicator [overBought]='overBought' > </e-indicator> </e-indicators> </ejs-chart> this.overBought = 10; |
overSold values of indicator | Property: Not Applicable | Property: overSold <ejs-chart> <e-indicators> <e-indicator [overBought]='overSold' > </e-indicator> </e-indicators> </ejs-chart> this.overSold = 10; |
Field value of indicator | Property: field <ej-chart> <e-indicators> <e-indicator [field]='field'> </e-indicator> </e-indicators> </ej-chart> this.field = ‘Close’; |
Property: field <ejs-chart> <e-indicators> <e-indicator [field]='field' > </e-indicator> </e-indicators> </ejs-chart> this.field = ‘Close’; |
Standard deviations of indicator | Property: standardDeviation <ej-chart> <e-indicators> <e-indicator [standardDeviation]='standardDeviation'> </e-indicator> </e-indicators> </ej-chart> this.standardDeviation = 2; |
Property: standardDeviation <ejs-chart> <e-indicators> <e-indicator [standardDeviation]='standardDeviation' > </e-indicator> </e-indicators> </ejs-chart> this.standardDeviation = 2; |
Slow period of MACD indicator | Property: shortPeriod <ej-chart> <e-indicators> <e-indicator [shortPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.period = 2; |
Property: slowPeriod <ejs-chart> <e-indicators> <e-indicator [slowPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 2; |
Fast period of MACD indicator | Property: longPeriod <ej-chart> <e-indicators> <e-indicator [longPeriod]='period'> </e-indicator> </e-indicators> </ej-chart> this.period = 2; |
Property: fastPeriod <ejs-chart> <e-indicators> <e-indicator [fastPeriod]='period' > </e-indicator> </e-indicators> </ejs-chart> this.period = 2; |
Line style of MACD indicator | Property: macdLine <ej-chart> <e-indicators> <e-indicator [macdLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { width: 2, color: ‘red’}; |
Property: macdLine <ejs-chart> <e-indicators> <e-indicator [macdLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 3 }; |
Macd type of indicator | Property: macdType <ej-chart> <e-indicators> <e-indicator [macdType]='type'> </e-indicator> </e-indicators> </ej-chart> this.type = ‘both’; |
Property: macdType <ejs-chart> <e-indicators> <e-indicator [macdType]='type' > </e-indicator> </e-indicators> </ejs-chart> this.type = ‘both’ |
Macd positive color of indicator | Property: Not Applicable | Property: macdType <ejs-chart> <e-indicators> <e-indicator macdPositiveColor='red' > </e-indicator> </e-indicators> </ejs-chart> |
Macd negative color of indicator | Property: Not Applicable | Property: macdType <ejs-chart> <e-indicators> <e-indicator macdPositiveColor='red' > </e-indicator> </e-indicators> </ejs-chart> |
Bollinger band color of indicator | Property: Not Applicable | Property: macdType <ejs-chart> <e-indicators> <e-indicator bandColor='red' > </e-indicator> </e-indicators> </ejs-chart> |
Appearance of lower line in indicator | Property: lowerLine <ej-chart> <e-indicators> <e-indicator [lowerLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { fill: ‘red’, width: 2}; |
Property: lowerLine <ejs-chart> <e-indicators> <e-indicator [lowerLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 2, dashArray: ‘10, 5’, type: ‘smooth’} |
Appearance of upper line in indicator | Property: upperLine <ej-chart> <e-indicators> <e-indicator [upperLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { fill: ‘red’, width: 2}; |
Property: upperLine <ejs-chart> <e-indicators> <e-indicator [upperLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 2, dashArray: ‘10, 5’, type: ‘smooth’} |
Appearance of period line in indicator | Property: periodLine <ej-chart> <e-indicators> <e-indicator [periodLine]='line'> </e-indicator> </e-indicators> </ej-chart> this.line = { fill: ‘red’, width: 2}; |
Property: periodLine <ejs-chart> <e-indicators> <e-indicator [periodLine]='line' > </e-indicator> </e-indicators> </ejs-chart> this.line = { color: ‘red’, width: 2, dashArray: ‘10, 5’, type: ‘smooth’} |
Name of the series for which indicator has to drawn | Property: seriesName <ej-chart> <e-indicators> <e-indicator seriesName='series1'> </e-indicator> </e-indicators> </ej-chart> |
Property: type <ejs-chart> <e-indicators> <e-indicator seriesName='series1' > </e-indicator> </e-indicators> </ejs-chart> |
Histogram customization | Property: histogram <ej-chart> <e-indicators> <e-indicator [histogram]='series1'> </e-indicator> </e-indicators> </ej-chart> this.series1 = { } |
Property: Not Applicable |
Enable animation for indicator | Property: enableAnimation <ej-chart> <e-indicators> <e-indicator [enableAnimation]='animation'> </e-indicator> </e-indicators> </ej-chart> this.animation = true |
Property: animation.enable <ejs-chart> <e-indicators> <e-indicator [animation]='animation' > </e-indicator> </e-indicators> </ejs-chart> this.animation = { enable: true } |
Animation duration for indicator | Property: animationDuration <ej-chart> <e-indicators> <e-indicator [animationDuration]='animation'> </e-indicator> </e-indicators> </ej-chart> this.animation = 10 |
Property: animation.duration <ejs-chart> <e-indicators> <e-indicator [animation]='animation' > </e-indicator> </e-indicators> </ejs-chart> this.animation = { duration: 1000 } |
Animation delay for indicator | Property: Not Applicable | Property: animation.duration <ejs-chart> <e-indicators> <e-indicator [animation]='animation' > </e-indicator> </e-indicators> </ejs-chart> this.animation = { delay: 100 } |
Tooltip for indicator | Property: tooltip <ej-chart> <e-indicators> <e-indicator [tooltip]='tooltip'> </e-indicator> </e-indicators> </ej-chart> this.tooltip = { enable: true } |
Property: enableTooltip <ejs-chart> <e-indicators> <e-indicator [enableTooltip]='tooltip' > </e-indicator> </e-indicators> </ejs-chart> this.tooltip = true; |
Trigger value for indicator | Property: trigger <ej-chart> <e-indicators> <e-indicator [trigger]='trigger'> </e-indicator> </e-indicators> </ej-chart> this.tooltip = 10 |
Not Applicable |
Fill color for indicator | Property: fill <ej-chart> <e-indicators> <e-indicator [fill]='fill'> </e-indicator> </e-indicators> </ej-chart> this.fill = ‘red’ |
Property: fill <ejs-chart> <e-indicators> <e-indicator [fill]='tooltip' > </e-indicator> </e-indicators> </ejs-chart> this.fill = ‘blue’; |
Width for indicator | Property: width <ej-chart> <e-indicators> <e-indicator [width]='width'> </e-indicator> </e-indicators> </ej-chart> this.width = 2 |
Property: width <ejs-chart> <e-indicators> <e-indicator [width]='width' > </e-indicator> </e-indicators> </ejs-chart> this.width = 2; |
xAxis name for indicator | Property: xAxisName <ej-chart> <e-indicators> <e-indicator [xAxisName]='xName'> </e-indicator> </e-indicators> </ej-chart> this.xName = ‘axis’ |
Property: xAxisName <ejs-chart> <e-indicators> <e-indicator [xAxisName]='xAxis' > </e-indicator> </e-indicators> </ejs-chart> this.xAxis = ‘axis’; |
yAxis name for indicator | Property: yAxisName <ej-chart> <e-indicators> <e-indicator [yAxisName]='yName'> </e-indicator> </e-indicators> </ej-chart> this.yName = ‘axis’ |
Property: yAxisName <ejs-chart> <e-indicators> <e-indicator [yAxisName]='yAxis' > </e-indicator> </e-indicators> </ejs-chart> this.yAxis = ‘axis’; |
xAxis name for indicator | Property: xAxisName <ej-chart> <e-indicators> <e-indicator [xAxisName]='xName'> </e-indicator> </e-indicators> </ej-chart> this.xName = ‘axis’ |
Property: xAxisName <ejs-chart> <e-indicators> <e-indicator [xAxisName]='xAxis' > </e-indicator> </e-indicators> </ejs-chart> this.xAxis = ‘axis’; |
dataSource for indicator | Property: points <ej-chart> <e-indicators> <e-indicator [points]='points'> </e-indicator> </e-indicators> </ej-chart> this.points = [] |
Property: dataSource <ejs-chart> <e-indicators> <e-indicator [dataSource]='data' > </e-indicator> </e-indicators> </ejs-chart> this.data = ‘axis’; |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Visibility of legend | Property: legend.visible <ej-chart [legend]='legend'> </ej-chart> this.legend = { visible: true } |
Property: legend.visible <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { visible: true } |
Height of legend | Property: legend.size.height <ej-chart [legend]='legend'> </ej-chart> this.legend = { size: { height: 20 }} |
Property: legend.height <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { height: ‘40’ } |
Width of legend | Property: legend.size.width <ej-chart [legend]='legend'> </ej-chart> this.legend = { size: { width: 20 }} |
Property: legend.height <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { width: ‘40’ } |
Location of legend | Property: legend.location <ej-chart [legend]='legend'> </ej-chart> this.legend = { location: { x: 10, y: 30 }} |
Property: legend.location <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { location: { x: 10, y: 30}} |
Padding of legend | Property: legend.padding <ej-chart [legend]='legend'> </ej-chart> this.legend = { padding: 20 } |
Property: legend.padding <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { padding: 8 } |
Alignment of legend | Property: legend.alignment <ej-chart [legend]='legend'> </ej-chart> this.legend = { alignment: ‘near’ } |
Property: legend.alignment <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { alignment: ‘near’ } |
Text style of legend | Property: legend.font <ej-chart [legend]='legend'> </ej-chart> this.legend = { font: { size: ‘12px’, color: ‘red’ } } |
Property: legend.textStyle <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { textStyle: { size: ‘12px’, color: ‘red’ } } |
Shape height of legend | Property: legend.itemStyle.height <ej-chart [legend]='legend'> </ej-chart> this.legend = { itemStyle: { height: 20 } } |
Property: legend.shapeHeight <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { shapeHeight: 20 } |
Shape width of legend | Property: legend.itemStyle.width <ej-chart [legend]='legend'> </ej-chart> this.legend = { itemStyle: { width: 20} } |
Property: legend.shapeWidth <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { shapeWidth: 20 } |
Shape border of legend | Property: legend.itemStyle.border <ej-chart [legend]='legend'> </ej-chart> this.legend = { itemStyle: { border: { width: 2, color: ‘red’ }} } |
Property: legend.shapeBorder <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { shapeBorder: { color: ‘red’, width: 2 } } |
Shape padding of legend | Property: legend.itemPadding <ej-chart [legend]='legend'> </ej-chart> this.legend = { itemPadding: 10 } } |
Property: legend.shapePadding <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { shapePadding: 10 } |
Background of legend | Property: legend.background <ej-chart [legend]='legend'> </ej-chart> this.legend = { background: ‘transparent’ } } |
Property: legend.background <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { background: ‘transparent’ } |
Opacity of legend | Property: legend.opacity <ej-chart [legend]='legend'> </ej-chart> this.legend = { opacity: 0.7 } } |
Property: legend.opacity <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { opacity: 0.6 } |
Toggle visibility of series legend | Property: legend.toggleSeriesVisibility <ej-chart [legend]='legend'> </ej-chart> this.legend = { toggleSeriesVisibility: true } |
Property: legend.toggleVisibility <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { toggleVisibility: true } |
Title of legend | Property: legend.title <ej-chart [legend]='legend'> </ej-chart> this.legend = { title: ‘legend title’ } |
Property: Not Applicable |
Text over flow of legend | Property: legend.textOverFlow <ej-chart [legend]='legend'> </ej-chart> this.legend = { textOverFlow: ‘Trim’ } |
Property: legend.textOverFlow <ejs-chart [legend]='legend'> </ejs-chart> this.legend = { textStyle:{ textOverFlow: ‘Trim’ } } |
Maximum text width above to trim | Property: legend.textWidth <ej-chart [legend]='legend'> </ej-chart> this.legend = { textWidth: 50 } |
Property: Not Applicable |
Scroll bar for legend | Property: legend.enableScrollBar <ej-chart [legend]='legend'> </ej-chart> this.legend = { enableScrollBar: true } |
Property: Not Applicable |
Row count for legend | Property: legend.rowCount <ej-chart [legend]='legend'> </ej-chart> this.legend = { rowCount: 2 } |
Property: Not Applicable |
Column count for legend | Property: legend.columnCount <ej-chart [legend]='legend'> </ej-chart> this.legend = { columnCount: 2 } |
Property: Not Applicable |
Fill color for legend | Property: legend.fill <ej-chart [legend]='legend'> </ej-chart> this.legend = { fill: 2 } |
Property: Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: primaryXAxis <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { } |
Property: primaryXAxis <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { } |
Alternate grid band for axis | Property: primaryXAxis.alternateGridBand <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { alternateGridBand: { even:{ fill: ‘black’ }} } |
Property: Not Applicable |
Axis line crosses value | Property: primaryXAxis.crossesAt <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { crossesAt: 3 } |
Property: primaryXAxis.crossesAt <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crossesAt: 3 } |
Axis name in which axis line cross | Property: primaryXAxis.crossInAxis <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { crossInAxis: ‘axis’ } |
Property: primaryXAxis.crossInAxis <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crossInAxis: ‘axis’ } |
Axis elements placing with axis line | Property: primaryXAxis.showNextToAxisLine <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { showNextToAxisLine: true } |
Property: primaryXAxis.placeNextToAxisLine <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { placeNextToAxisLine: true } |
Axis line color | Property: primaryXAxis.axisLine.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { axisLine: { color: ‘red’ } } |
Property: primaryXAxis.lineStyle.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { lineStyle: { color: ‘red’ } } |
Axis line dashArray | Property: primaryXAxis.axisLine.dashArray <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { axisLine: { dashArray: ‘10, 5’ } } |
Property: primaryXAxis.lineStyle.dashArray <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { lineStyle: { dashArray: ‘10, 5’ } } |
Visibility of primaryXAxis | Property: primaryXAxis.axisLine.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { axisLine: { visible: true } } |
Property: primaryXAxis.visible <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { visible: true } |
Column index of primaryXAxis | Property: primaryXAxis.columnIndex <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { columnIndex: 2 } |
Property: primaryXAxis.columnIndex <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { columnIndex: 2 } |
span of primaryXAxis | Property: primaryXAxis.columnSpan <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { columnSpan: 2 } |
Property: primaryXAxis.span <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { span: 2 } |
crosshair visibility of primaryXAxis | Property: primaryXAxis.crosshairLabel <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { crosshairLabel : { visible: true } } |
Property: primaryXAxis.crosshairTooltip <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crosshairTooltip: { enable: true } } |
crosshair fill of primaryXAxis | Property: Not Applicable | Property: primaryXAxis.crosshairTooltip <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crosshairTooltip: { fill: ‘blue’ } } |
crosshair label text style of primaryXAxis | Property: Not Applicable | Property: primaryXAxis.crosshairTooltip <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { crosshairTooltip: { labelStyle: { } } } |
Desired interval of primaryXAxis | Property: primaryXAxis.desiredIntervals <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { desiredIntervals: 4 } |
Property: primaryXAxis.desiredIntervals <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { desiredIntervals: 4 } |
Edge label placements of primaryXAxis | Property: primaryXAxis.edgeLabelPlacement <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { egdeLabelPlacement: ‘Shift’ } |
Property: primaryXAxis.edgeLabelPlacement <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { edgeLabelPlacement: ‘Hide’ } |
Enabling trim of primaryXAxis | Property: primaryXAxis.enableTrim <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { enableTrim: true } |
Property: primaryXAxis.enableTrim <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { enableTrim: true } |
Enabling auto interval while zooming | Property: primaryXAxis.enableAutoIntervalOnZooming <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { enableAutoIntervalOnZooming: true } |
Property: primaryXAxis.enableAutoIntervalOnZooming <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { enableAutoIntervalOnZooming: true } |
Font style of primaryXAxis | Property: primaryXAxis.font <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { font: { } } |
Property: primaryXAxis.labelStyle <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelStyle:{ } } |
Enabling indexed of primaryXAxis | Property: primaryXAxis.indexed <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { indexed: true} |
Property: primaryXAxis.indexed <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { indexed: true } |
IntervalType of primaryXAxis | Property: primaryXAxis.intervalType <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { intervalType: ‘Auto’ } |
Property: primaryXAxis.intervalType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { intervalType: ‘Auto’ } |
Enabling inversed of primaryXAxis | Property: primaryXAxis.isInversed <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { isInversed: true } |
Property: primaryXAxis.isInversed <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { isInversed: true } |
Custom label format of primaryXAxis | Property: primaryXAxis.isInversed <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelFormat: ‘{value}K’ } |
Property: primaryXAxis.labelFormat <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {labelFormat: ‘{value}K’ } |
Label intersect action of primaryXAxis | Property: primaryXAxis.labelIntersectAction <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelIntersectAction: ‘trim’ } |
Property: primaryXAxis.labelIntersectAction <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {labelIntersectAction: ‘Trim’ } |
Label position of primaryXAxis | Property: primaryXAxis.labelPosition <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelPosition: ‘Inside’ } |
Property: primaryXAxis.labelPosition <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {labelPosition: ‘Inside’ } |
Label placement of primaryXAxis | Property: primaryXAxis.labelPlacement <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelPlacements: ‘OnTicks’ } |
Property: primaryXAxis.labelPlacement <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {lablePlacement: ‘OnTicks’ } |
Label alignment of primaryXAxis | Property: primaryXAxis.alignment <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { alignment: ‘middle’ } |
Property: Not Applicable |
Label rotation of primaryXAxis | Property: primaryXAxis.labelRotation <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelRotation: 45 } |
Property: primaryXAxis.labelRotation <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelRotation: 45 } |
Log base of primaryXAxis | Property: primaryXAxis.logBase <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { logBase: 4 } |
Property: primaryXAxis.logBase <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { logBase: 5 } |
Log base of primaryXAxis | Property: primaryXAxis.logBase <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { logBase: 4 } |
Property: primaryXAxis.logBase <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { logBase: 5 } |
Major grid line width of primaryXAxis | Property: primaryXAxis.majorGridLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { width: 2 } } |
Property: primaryXAxis.majorGridLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorGridLines: { width: 2} } |
Major grid line color of primaryXAxis | Property: primaryXAxis.majorGridLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { color: ‘red’ } } |
Property: primaryXAxis.majorGridLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorGridLines: { color: ‘red’} } |
Major grid line dash array of primaryXAxis | Property: primaryXAxis.majorGridLines.dashArray <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { dashArray: ‘10, 5’ } } |
Property: primaryXAxis.majorGridLines.dashArray <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorGridLines: { dashArray: ‘10, 5’} } |
Major grid line opacity of primaryXAxis | Property: primaryXAxis.majorGridLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { opacity: 0.7 } } |
Property: Not Applicable |
Major grid line visibility of primaryXAxis | Property: primaryXAxis.majorGridLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorGridLines: { visible: true } } |
Property: Not Applicable |
minor grid line width of primaryXAxis | Property: primaryXAxis.minorGridLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { width: 2 } } |
Property: primaryXAxis.minorGridLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorGridLines: { width: 2} } |
minor grid line color of primaryXAxis | Property: primaryXAxis.minorGridLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { color: ‘red’ } } |
Property: primaryXAxis.minorGridLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorGridLines: { color: ‘red’} } |
minor grid line dash array of primaryXAxis | Property: primaryXAxis.minorGridLines.dashArray <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { dashArray: ‘10, 5’ } } |
Property: primaryXAxis.minorGridLines.dashArray <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorGridLines: { dashArray: ‘10, 5’} } |
minor grid line opacity of primaryXAxis | Property: primaryXAxis.minorGridLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { opacity: 0.7 } } |
Property: Not Applicable |
minor grid line visibility of primaryXAxis | Property: primaryXAxis.minorGridLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorGridLines: { visible: true } } |
Property: Not Applicable |
major Tick line width of primaryXAxis | Property: primaryXAxis.majorTickLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { width: 2 } } |
Property: primaryXAxis.majorTickLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorTickLines: { width: 2} } |
major Tick line color of primaryXAxis | Property: primaryXAxis.majorTickLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { color: ‘red’ } } |
Property: primaryXAxis.majorTickLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { majorTickLines: { color: ‘red’} } |
major Tick line opacity of primaryXAxis | Property: primaryXAxis.majorTickLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { opacity: 0.7 } } |
Property: Not Applicable |
major Tick line visibility of primaryXAxis | Property: primaryXAxis.majorTickLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { majorTickLines: { visible: true } } |
Property: Not Applicable |
minor Tick line width of primaryXAxis | Property: primaryXAxis.minorTickLines.width <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { width: 2 } } |
Property: primaryXAxis.minorTickLines.width <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorTickLines: { width: 2} } |
minor Tick line color of primaryXAxis | Property: primaryXAxis.minorTickLines.color <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { color: ‘red’ } } |
Property: primaryXAxis.minorTickLines.color <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minorTickLines: { color: ‘red’} } |
minor Tick line opacity of primaryXAxis | Property: primaryXAxis.minorTickLines.opacity <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { opacity: 0.7 } } |
Property: Not Applicable |
minor Tick line visibility of primaryXAxis | Property: primaryXAxis.minorTickLines.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTickLines: { visible: true } } |
Property: Not Applicable |
Maximum labels of primaryXAxis | Property: primaryXAxis.maximumLabels <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { maximumLabels: 4} } |
Property: primaryXAxis.maximumLabels <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {maximumLabels: 4} |
Maximum label width of primaryXAxis | Property: primaryXAxis.maximumLabelWidth <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { maximumLabels: 15} } |
Property: primaryXAxis.maximumLabelWidth <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {maximumLabelWidth:15} |
Minor ticks per interval of primaryXAxis | Property: primaryXAxis.minorTicksPerInterval <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { minorTicksPerInterval: 5} } |
Property: primaryXAxis.minorTicksPerInterval <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {minorTicksPerInterval:5} |
Name of primaryXAxis | Property: primaryXAxis.name <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { name: ‘axis’} } |
Property: primaryXAxis.name <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = {name:‘axis’ } |
Plot offset of primaryXAxis | Property: primaryXAxis.plotOffset <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { plotOffset: 10} } |
Property: primaryXAxis.name <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { plotOffset:10 } |
Orientation of primaryXAxis | Property: primaryXAxis.plotOffset <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { orientation: ‘Horizontal’ } } |
Property: primaryXAxis.name <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { orientation: ‘horizontal’ } |
Minimum of primaryXAxis | Property: primaryXAxis.range.minimum <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { range: { minimum: 10} } } |
Property: primaryXAxis.minimum <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { minimum: 10 } |
maximum of primaryXAxis | Property: primaryXAxis.range.maximum <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { range: { maximum: 10} } } |
Property: primaryXAxis.maximum <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { maximum: 1000 } |
interval of primaryXAxis | Property: primaryXAxis.range.interval <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { range: { interval: 10} } } |
Property: primaryXAxis.interval <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { interval: 10 } |
Range padding of primaryXAxis | Property: primaryXAxis.rangePadding <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { rangePadding: ‘Round’ } |
Property: primaryXAxis.rangePadding <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { rangePadding: ‘Normal’ } |
Rounding places of primaryXAxis | Property: primaryXAxis.roundingPlaces <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { roundingPlaces: 3 } |
Property: primaryXAxis.labelFormat <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelFormat: ‘n3’ } |
Tick position of primaryXAxis | Property: primaryXAxis.tickPosition <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { tickPosition: ‘Inside’ } |
Property: primaryXAxis.tickPosition <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { tickPosition: ‘Inside’ } |
Scrollbar settings of primaryXAxis | Property: primaryXAxis.scrollBarSettings <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { scrollBarSettings: { } } |
Property: Not Applicable. |
Value type of primaryXAxis | Property: primaryXAxis.valueType <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { valueType: ‘Category’ } |
Property: primaryXAxis.valueType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { valueType: ‘Category’ } |
Visible of primaryXAxis | Property: primaryXAxis.visible <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { visible: true } |
Property: primaryXAxis.visible <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { visible: true } |
Zoom factor of primaryXAxis | Property: primaryXAxis.zoomFactor <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { zoomFactor: 0.7 } |
Property: primaryXAxis.zoomFactor <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { zoomFactor: 0,.7 } |
Zoom position of primaryXAxis | Property: primaryXAxis.zoomPosition <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { zoomPosition: 0.7 } |
Property: primaryXAxis.zoomPosition <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { zoomPosition: 0.7 } |
Label border of primaryXAxis | Property: primaryXAxis.labelBorder <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { labelBorder: { width: 2, color: ‘red’ } } |
Property: primaryXAxis.labelBorder <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { labelBorder: { color: ‘red’, width: 2} } |
Title of primaryXAxis | Property: primaryXAxis.title <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { title: ’ axis title’ } |
Property: primaryXAxis.title <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { title: ‘axis title’ } |
skeleton of primaryXAxis | Property: primaryXAxis.skeleton <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { skeleton: ‘yMd’ } |
Property: primaryXAxis.skeleton <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { skeleton: ‘yMd’ } |
skeletonType of primaryXAxis | Property: primaryXAxis.skeletonType <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { skeletonType: ‘Date’ } |
Property: primaryXAxis.skeletonType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { skeletonType: ‘Date’ } |
Stripline of primaryXAxis | Property: primaryXAxis.stripLines <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { stripLines: [ { }] } |
Property: primaryXAxis.skeletonType <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { stripLines: [ { }]} |
Multilevel labels of primaryXAxis | Property: primaryXAxis.multiLevelLabels <ej-chart [primaryXAxis]='primaryXAxis'> </ej-chart> this.primaryXAxis = { multiLevelLabels: [ { }] } |
Property: primaryXAxis.multiLevelLabels <ejs-chart [primaryXAxis]='primaryXAxis'> </ejs-chart> this.primaryXAxis = { multiLevelLabels: [ { }]} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: primaryYAxis <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { } |
Property: primaryYAxis <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { } |
Alternate grid band for axis | Property: primaryYAxis.alternateGridBand <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { alternateGridBand: { even:{ fill: ‘black’ }} } |
Property: Not Applicable |
Axis line crosses value | Property: primaryYAxis.crossesAt <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { crossesAt: 3 } |
Property: primaryYAxis.crossesAt <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crossesAt: 3 } |
Axis name in which axis line cross | Property: primaryYAxis.crossInAxis <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { crossInAxis: ‘axis’ } |
Property: primaryYAxis.crossInAxis <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crossInAxis: ‘axis’ } |
Axis elements placing with axis line | Property: primaryYAxis.showNextToAxisLine <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { showNextToAxisLine: true } |
Property: primaryYAxis.placeNextToAxisLine <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { placeNextToAxisLine: true } |
Axis line color | Property: primaryYAxis.axisLine.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { axisLine: { color: ‘red’ } } |
Property: primaryYAxis.lineStyle.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { lineStyle: { color: ‘red’ } } |
Axis line dashArray | Property: primaryYAxis.axisLine.dashArray <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { axisLine: { dashArray: ‘10, 5’ } } |
Property: primaryYAxis.lineStyle.dashArray <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { lineStyle: { dashArray: ‘10, 5’ } } |
Visibility of primaryYAxis | Property: primaryYAxis.axisLine.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { axisLine: { visible: true } } |
Property: primaryYAxis.visible <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { visible: true } |
Column index of primaryYAxis | Property: primaryYAxis.columnIndex <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { columnIndex: 2 } |
Property: primaryYAxis.columnIndex <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { columnIndex: 2 } |
span of primaryYAxis | Property: primaryYAxis.columnSpan <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { columnSpan: 2 } |
Property: primaryYAxis.span <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { span: 2 } |
crosshair visibility of primaryYAxis | Property: primaryYAxis.crosshairLabel <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { crosshairLabel : { visible: true } } |
Property: primaryYAxis.crosshairTooltip <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crosshairTooltip: { enable: true } } |
crosshair fill of primaryYAxis | Property: Not Applicable | Property: primaryYAxis.crosshairTooltip <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crosshairTooltip: { fill: ‘blue’ } } |
crosshair label text style of primaryYAxis | Property: Not Applicable | Property: primaryYAxis.crosshairTooltip <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { crosshairTooltip: { labelStyle: { } } } |
Desired interval of primaryYAxis | Property: primaryYAxis.desiredIntervals <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { desiredIntervals: 4 } |
Property: primaryYAxis.desiredIntervals <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { desiredIntervals: 4 } |
Edge label placements of primaryYAxis | Property: primaryYAxis.edgeLabelPlacement <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { egdeLabelPlacement: ‘Shift’ } |
Property: primaryYAxis.edgeLabelPlacement <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { edgeLabelPlacement: ‘Hide’ } |
Enabling trim of primaryYAxis | Property: primaryYAxis.enableTrim <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { enableTrim: true } |
Property: primaryYAxis.enableTrim <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { enableTrim: true } |
Enabling auto interval while zooming | Property: primaryYAxis.enableAutoIntervalOnZooming <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { enableAutoIntervalOnZooming: true } |
Property: primaryYAxis.enableAutoIntervalOnZooming <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { enableAutoIntervalOnZooming: true } |
Font style of primaryYAxis | Property: primaryYAxis.font <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { font: { } } |
Property: primaryYAxis.labelStyle <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelStyle:{ } } |
Enabling indexed of primaryYAxis | Property: primaryYAxis.indexed <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { indexed: true} |
Property: primaryYAxis.indexed <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { indexed: true } |
IntervalType of primaryYAxis | Property: primaryYAxis.intervalType <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { intervalType: ‘Auto’ } |
Property: primaryYAxis.intervalType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { intervalType: ‘Auto’ } |
Enabling inversed of primaryYAxis | Property: primaryYAxis.isInversed <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { isInversed: true } |
Property: primaryYAxis.isInversed <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { isInversed: true } |
Custom label format of primaryYAxis | Property: primaryYAxis.isInversed <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelFormat: ‘{value}K’ } |
Property: primaryYAxis.labelFormat <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {labelFormat: ‘{value}K’ } |
Label intersect action of primaryYAxis | Property: primaryYAxis.labelIntersectAction <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelIntersectAction: ‘trim’ } |
Property: primaryYAxis.labelIntersectAction <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {labelIntersectAction: ‘Trim’ } |
Label position of primaryYAxis | Property: primaryYAxis.labelPosition <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelPosition: ‘Inside’ } |
Property: primaryYAxis.labelPosition <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {labelPosition: ‘Inside’ } |
Label placement of primaryYAxis | Property: primaryYAxis.labelPlacement <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelPlacements: ‘OnTicks’ } |
Property: primaryYAxis.labelPlacement <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {lablePlacement: ‘OnTicks’ } |
Label alignment of primaryYAxis | Property: primaryYAxis.alignment <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { alignment: ‘middle’ } |
Property: Not Applicable |
Label rotation of primaryYAxis | Property: primaryYAxis.labelRotation <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelRotation: 45 } |
Property: primaryYAxis.labelRotation <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelRotation: 45 } |
Log base of primaryYAxis | Property: primaryYAxis.logBase <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { logBase: 4 } |
Property: primaryYAxis.logBase <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { logBase: 5 } |
Log base of primaryYAxis | Property: primaryYAxis.logBase <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { logBase: 4 } |
Property: primaryYAxis.logBase <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { logBase: 5 } |
Major grid line width of primaryYAxis | Property: primaryYAxis.majorGridLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { width: 2 } } |
Property: primaryYAxis.majorGridLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorGridLines: { width: 2} } |
Major grid line color of primaryYAxis | Property: primaryYAxis.majorGridLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { color: ‘red’ } } |
Property: primaryYAxis.majorGridLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorGridLines: { color: ‘red’} } |
Major grid line dash array of primaryYAxis | Property: primaryYAxis.majorGridLines.dashArray <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { dashArray: ‘10, 5’ } } |
Property: primaryYAxis.majorGridLines.dashArray <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorGridLines: { dashArray: ‘10, 5’} } |
Major grid line opacity of primaryYAxis | Property: primaryYAxis.majorGridLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { opacity: 0.7 } } |
Property: Not Applicable |
Major grid line visibility of primaryYAxis | Property: primaryYAxis.majorGridLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorGridLines: { visible: true } } |
Property: Not Applicable |
minor grid line width of primaryYAxis | Property: primaryYAxis.minorGridLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { width: 2 } } |
Property: primaryYAxis.minorGridLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorGridLines: { width: 2} } |
minor grid line color of primaryYAxis | Property: primaryYAxis.minorGridLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { color: ‘red’ } } |
Property: primaryYAxis.minorGridLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorGridLines: { color: ‘red’} } |
minor grid line dash array of primaryYAxis | Property: primaryYAxis.minorGridLines.dashArray <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { dashArray: ‘10, 5’ } } |
Property: primaryYAxis.minorGridLines.dashArray <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorGridLines: { dashArray: ‘10, 5’} } |
minor grid line opacity of primaryYAxis | Property: primaryYAxis.minorGridLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { opacity: 0.7 } } |
Property: Not Applicable |
minor grid line visibility of primaryYAxis | Property: primaryYAxis.minorGridLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorGridLines: { visible: true } } |
Property: Not Applicable |
major Tick line width of primaryYAxis | Property: primaryYAxis.majorTickLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { width: 2 } } |
Property: primaryYAxis.majorTickLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorTickLines: { width: 2} } |
major Tick line color of primaryYAxis | Property: primaryYAxis.majorTickLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { color: ‘red’ } } |
Property: primaryYAxis.majorTickLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { majorTickLines: { color: ‘red’} } |
major Tick line opacity of primaryYAxis | Property: primaryYAxis.majorTickLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { opacity: 0.7 } } |
Property: Not Applicable |
major Tick line visibility of primaryYAxis | Property: primaryYAxis.majorTickLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { majorTickLines: { visible: true } } |
Property: Not Applicable |
minor Tick line width of primaryYAxis | Property: primaryYAxis.minorTickLines.width <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { width: 2 } } |
Property: primaryYAxis.minorTickLines.width <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorTickLines: { width: 2} } |
minor Tick line color of primaryYAxis | Property: primaryYAxis.minorTickLines.color <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { color: ‘red’ } } |
Property: primaryYAxis.minorTickLines.color <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minorTickLines: { color: ‘red’} } |
minor Tick line opacity of primaryYAxis | Property: primaryYAxis.minorTickLines.opacity <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { opacity: 0.7 } } |
Property: Not Applicable |
minor Tick line visibility of primaryYAxis | Property: primaryYAxis.minorTickLines.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTickLines: { visible: true } } |
Property: Not Applicable |
Maximum labels of primaryYAxis | Property: primaryYAxis.maximumLabels <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { maximumLabels: 4} } |
Property: primaryYAxis.maximumLabels <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {maximumLabels: 4} |
Maximum label width of primaryYAxis | Property: primaryYAxis.maximumLabelWidth <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { maximumLabels: 15} } |
Property: primaryYAxis.maximumLabelWidth <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {maximumLabelWidth:15} |
Minor ticks per interval of primaryYAxis | Property: primaryYAxis.minorTicksPerInterval <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { minorTicksPerInterval: 5} } |
Property: primaryYAxis.minorTicksPerInterval <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {minorTicksPerInterval:5} |
Name of primaryYAxis | Property: primaryYAxis.name <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { name: ‘axis’} } |
Property: primaryYAxis.name <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = {name:‘axis’ } |
Plot offset of primaryYAxis | Property: primaryYAxis.plotOffset <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { plotOffset: 10} } |
Property: primaryYAxis.name <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { plotOffset:10 } |
Orientation of primaryYAxis | Property: primaryYAxis.plotOffset <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { orientation: ‘Horizontal’ } } |
Property: primaryYAxis.name <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { orientation: ‘horizontal’ } |
Minimum of primaryYAxis | Property: primaryYAxis.range.minimum <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { range: { minimum: 10} } } |
Property: primaryYAxis.minimum <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { minimum: 10 } |
maximum of primaryYAxis | Property: primaryYAxis.range.maximum <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { range: { maximum: 10} } } |
Property: primaryYAxis.maximum <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { maximum: 1000 } |
interval of primaryYAxis | Property: primaryYAxis.range.interval <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { range: { interval: 10} } } |
Property: primaryYAxis.interval <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { interval: 10 } |
Range padding of primaryYAxis | Property: primaryYAxis.rangePadding <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { rangePadding: ‘Round’ } |
Property: primaryYAxis.rangePadding <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { rangePadding: ‘Normal’ } |
Rounding places of primaryYAxis | Property: primaryYAxis.roundingPlaces <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { roundingPlaces: 3 } |
Property: primaryYAxis.labelFormat <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelFormat: ‘n3’ } |
Tick position of primaryYAxis | Property: primaryYAxis.tickPosition <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { tickPosition: ‘Inside’ } |
Property: primaryYAxis.tickPosition <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { tickPosition: ‘Inside’ } |
Scrollbar settings of primaryYAxis | Property: primaryYAxis.scrollBarSettings <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { scrollBarSettings: { } } |
Property: Not Applicable. |
Value type of primaryYAxis | Property: primaryYAxis.valueType <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { valueType: ‘Category’ } |
Property: primaryYAxis.valueType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { valueType: ‘Category’ } |
Visible of primaryYAxis | Property: primaryYAxis.visible <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { visible: true } |
Property: primaryYAxis.visible <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { visible: true } |
Zoom factor of primaryYAxis | Property: primaryYAxis.zoomFactor <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { zoomFactor: 0.7 } |
Property: primaryYAxis.zoomFactor <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { zoomFactor: 0,.7 } |
Zoom position of primaryYAxis | Property: primaryYAxis.zoomPosition <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { zoomPosition: 0.7 } |
Property: primaryYAxis.zoomPosition <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { zoomPosition: 0.7 } |
Label border of primaryYAxis | Property: primaryYAxis.labelBorder <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { labelBorder: { width: 2, color: ‘red’ } } |
Property: primaryYAxis.labelBorder <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { labelBorder: { color: ‘red’, width: 2} } |
Title of primaryYAxis | Property: primaryYAxis.title <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { title: ’ axis title’ } |
Property: primaryYAxis.title <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { title: ‘axis title’ } |
skeleton of primaryYAxis | Property: primaryYAxis.skeleton <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { skeleton: ‘yMd’ } |
Property: primaryYAxis.skeleton <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { skeleton: ‘yMd’ } |
skeletonType of primaryYAxis | Property: primaryYAxis.skeletonType <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { skeletonType: ‘Date’ } |
Property: primaryYAxis.skeletonType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { skeletonType: ‘Date’ } |
Stripline of primaryYAxis | Property: primaryYAxis.stripLines <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { stripLines: [ { }] } |
Property: primaryYAxis.skeletonType <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { stripLines: [ { }]} |
Multilevel labels of primaryYAxis | Property: primaryYAxis.multiLevelLabels <ej-chart [primaryYAxis]='primaryYAxis'> </ej-chart> this.primaryYAxis = { multiLevelLabels: [ { }] } |
Property: primaryYAxis.multiLevelLabels <ejs-chart [primaryYAxis]='primaryYAxis'> </ejs-chart> this.primaryYAxis = { multiLevelLabels: [ { }]} |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: axis <ej-chart> <e-axes> <e-axis> </e-axis> </e-axes> </ej-chart> |
Property: axis <ejs-chart> <e-axes> <e-axis> </e-axis> </e-axes> </ejs-chart> |
Alternate grid band for axis | Property: axis.alternateGridBand <ej-chart> <e-axes> <e-axis [alternateGridBand]='band'> </e-axis> </e-axes> </ej-chart> this.band = { even:{ fill: ‘black’ } } |
Property: Not Applicable |
Axis line crosses value | Property: axis.crossesAt <ej-chart> <e-axes> <e-axis [crossesAt]='cross'> </e-axis> </e-axes> </ej-chart> this.cross = 3 } |
Property: axis.crossesAt <ejs-chart> <e-axes> <e-axis [crossesAt]='cross'> </e-axis> </e-axes> </ejs-chart> this.cross = 3 |
Axis name in which axis line cross | Property: axis.crossInAxis <ej-chart> <e-axes> <e-axis crossInAxis='axis'> </e-axis> </e-axes> </ej-chart> |
Property: axis.crossInAxis <ejs-chart> <e-axes> <e-axis crossInAxis='axis'> </e-axis> </e-axes> </ejs-chart> |
Axis elements placing with axis line | Property: axis.showNextToAxisLine <ej-chart> <e-axes> <e-axis [showNextToAxisLine]='value'> </e-axis> </e-axes> </ej-chart> this.value = true } |
Property: axis.placeNextToAxisLine <ejs-chart> <e-axes> <e-axis [placeNextToAxisLine]='place'> </e-axis> </e-axes> </ejs-chart> this.place = true |
Axis line color | Property: axis.axisLine.color <ej-chart> <e-axes> <e-axis [axisLine]='line'> </e-axis> </e-axes> </ej-chart> this.line = { color: ‘red’ } |
Property: axis.lineStyle.color <ejs-chart> <e-axes> <e-axis [lineStyle]='line'> </e-axis> </e-axes> </ejs-chart> this.line = { color: ‘red’ } |
Axis line dashArray | Property: axis.axisLine.dashArray <ej-chart> <e-axes> <e-axis [axisLine]=line'> </e-axis> </e-axes> </ej-chart> this.line = { dashArray: ‘10, 5’ } |
Property: axis.lineStyle.dashArray <ejs-chart> <e-axes> <e-axis [lineStyle]='line'> </e-axis> </e-axes> </ejs-chart> this.line = dashArray: ‘10, 5’ } |
Visibility of axis | Property: axis.axisLine.visible <ej-chart> <e-axes> <e-axis [axisLine]='line'> </e-axis> </e-axes> </ej-chart> this.line = { visible: true } } |
Property: axis.visible <ejs-chart> <e-axes> <e-axis [visible]='visible'> </e-axis> </e-axes> </ejs-chart> this.visible: true |
ColumnIndex of axis | Property: axis.columnIndex <ej-chart> <e-axes> <e-axis [columnIndex]='column'> </e-axis> </e-axes> </ej-chart> this.column = 2 |
Property: axis.columnIndex <ejs-chart> <e-axes> <e-axis [columnIndex]='column'> </e-axis> </e-axes> </ejs-chart> this.column = 2 |
span of axis | Property: axis.columnSpan <ej-chart> <e-axes> <e-axis [columnSpan]='span'> </e-axis> </e-axes> </ej-chart> this.span = 2 |
Property: axis.span <ejs-chart> <e-axes> <e-axis [span]='span'> </e-axis> </e-axes> </ejs-chart> this.span = 2 |
crosshair visibility of axis | Property: axis.crosshairLabel <ej-chart> <e-axes> <e-axis [crosshairLabel]='label'> </e-axis> </e-axes> </ej-chart> this.label = { visible: true } |
Property: axis.crosshairTooltip <ejs-chart> <e-axes> <e-axis [crosshairTooltip]='crosshair'> </e-axis> </e-axes> </ejs-chart> this.crosshair = { enable: true } |
crosshair fill of axis | Property: Not Applicable | Property: axis.crosshairTooltip.fill <ejs-chart> <e-axes> <e-axis [crosshairTooltip]='tooltip'> </e-axis> </e-axes> </ejs-chart> this.tooltip = { fill: ‘blue’ } |
crosshair label text style of axis | Property: Not Applicable | Property: axis.crosshairTooltip <ejs-chart> <e-axes> <e-axis [crosshairTooltip]='tooltip'> </e-axis> </e-axes> </ejs-chart> this.tooltip = { labelStyle: { } } |
Desired interval of axis | Property: axis.desiredIntervals <ej-chart> <e-axes> <e-axis [desiredIntervals]='interval'> </e-axis> </e-axes> </ej-chart> this.interval = 4 |
Property: axis.desiredIntervals <ejs-chart> <e-axes> <e-axis [desiredIntervals]='interval'> </e-axis> </e-axes> </ejs-chart> this.interval = 4 |
Edge label placements of axis | Property: axis.edgeLabelPlacement <ej-chart> <e-axes> <e-axis edgeLabelPlacement='Shift'> </e-axis> </e-axes> </ej-chart> |
Property: axis.edgeLabelPlacement <ejs-chart> <e-axes> <e-axis edgeLabelPlacement='Shift'> </e-axis> </e-axes> </ejs-chart> |
Enabling trim of axis | Property: axis.enableTrim <ej-chart> <e-axes> <e-axis [enableTrim]='trim'> </e-axis> </e-axes> </ej-chart> this.trim = true |
Property: axis.enableTrim <ejs-chart> <e-axes> <e-axis [enableTrim]='trim'> </e-axis> </e-axes> </ejs-chart> this.trim = true |
Enabling auto interval while zooming | Property: axis.enableAutoIntervalOnZooming <ej-chart> <e-axes> <e-axis [enableAutoIntervalOnZooming]='zoom'> </e-axis> </e-axes> </ej-chart> this.zoom = true |
Property: axis.enableAutoIntervalOnZooming <ejs-chart> <e-axes> <e-axis [enableAutoIntervalOnZooming]='zoom'> </e-axis> </e-axes> </ejs-chart> this.zoom = true |
Font style of axis | Property: axis.font <ej-chart> <e-axes> <e-axis [font]='font'> </e-axis> </e-axes> </ej-chart> this.font = { } |
Property: axis.labelStyle <ejs-chart> <e-axes> <e-axis [labelStyle]='label'> </e-axis> </e-axes> </ejs-chart> this.label = { } |
Enabling indexed of axis | Property: axis.indexed <ej-chart> <e-axes> <e-axis [indexed]='indexed> </e-axis> </e-axes> </ej-chart> this.indexed = true |
Property: axis.indexed <ejs-chart> <e-axes> <e-axis [indexed]='indexed'> </e-axis> </e-axes> </ejs-chart> this.indexed = true |
IntervalType of axis | Property: axis.intervalType <ej-chart> <e-axes> <e-axis intervalType='Years'> </e-axis> </e-axes> </ej-chart> |
Property: axis.intervalType <ejs-chart> <e-axes> <e-axis intervalType='Years'> </e-axis> </e-axes> </ejs-chart> |
Enabling inversed of axis | Property: axis.isInversed <ej-chart> <e-axes> <e-axis [isInversed]='inverse'> </e-axis> </e-axes> </ej-chart> this.inverse = true |
Property: axis.isInversed <ejs-chart> <e-axes> <e-axis [isInversed]='inverse'> </e-axis> </e-axes> </ejs-chart> this.inverse = true |
Custom label format of axis | Property: axis.isInversed <ej-chart> <e-axes> <e-axis labelFormat='{value}K'> </e-axis> </e-axes> </ej-chart> |
Property: axis.labelFormat <ejs-chart> <e-axes> <e-axis labelFormat='{value}K'> </e-axis> </e-axes> </ejs-chart> |
Label intersect action of axis | Property: axis.labelIntersectAction <ej-chart> <e-axes> <e-axis labelIntersectAction='trim'> </e-axis> </e-axes> </ej-chart> |
Property: axis.labelIntersectAction <ejs-chart> <e-axes> <e-axis labelIntersectAction='Trim'> </e-axis> </e-axes> </ejs-chart> |
Label position of axis | Property: axis.labelPosition <ej-chart> <e-axes> <e-axis labelPosition='Inside'> </e-axis> </e-axes> </ej-chart> |
Property: axis.labelPosition <ejs-chart> <e-axes> <e-axis labelPosition='Outside'> </e-axis> </e-axes> </ejs-chart> |
Label placement of axis | Property: axis.labelPlacement <ej-chart> <e-axes> <e-axis labelPlacement='OnTicks'> </e-axis> </e-axes> </ej-chart> |
Property: axis.labelPlacement <ejs-chart> <e-axes> <e-axis labelPlacement='BetweenTicks'> </e-axis> </e-axes> </ejs-chart> |
Label alignment of axis | Property: axis.alignment <ej-chart> <e-axes> <e-axis labelAlignment='middle'> </e-axis> </e-axes> </ej-chart> |
Property: Not Applicable |
Label rotation of axis | Property: axis.labelRotation <ej-chart> <e-axes> <e-axis [labelRotation]='rotation'> </e-axis> </e-axes> </ej-chart> this.rotation = 45 |
Property: axis.labelRotation <ejs-chart> <e-axes> <e-axis [labelRotatioon]='rotation'> </e-axis> </e-axes> </ejs-chart> this.rotation = 45 |
Log base of axis | Property: axis.logBase <ej-chart> <e-axes> <e-axis [logBase]='log'> </e-axis> </e-axes> </ej-chart> this.log = 4 |
Property: axis.logBase <ejs-chart> <e-axes> <e-axis [logBase]='log'> </e-axis> </e-axes> </ejs-chart> this.log = 5 |
Major grid line width of axis | Property: axis.majorGridLines.width <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this. majorGridLines = { width: 2 } |
Property: axis.majorGridLines.width <ejs-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ejs-chart> this.majorGridLines = { width: 2} |
Major grid line color of axis | Property: axis.majorGridLines.color <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines = { color: ‘red’ } |
Property: axis.majorGridLines.color <ejs-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ejs-chart> this.majorGridLines = { color: ‘red’} |
Major grid line dash array of axis | Property: axis.majorGridLines.dashArray <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines = { dashArray: ‘10, 5’ } |
Property: axis.majorGridLines.dashArray <ejs-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ejs-chart> this.majorGridLines = { dashArray: ‘10, 5’} |
Major grid line opacity of axis | Property: axis.majorGridLines.opacity <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines= { opacity: 0.7 } |
Property: Not Applicable |
Major grid line visibility of axis | Property: axis.majorGridLines.visible <ej-chart> <e-axes> <e-axis [majorGridLines]='majorGridLines'> </e-axis> </e-axes> </ej-chart> this.majorGridLines = { visible: true } |
Property: Not Applicable |
minor grid line width of axis | Property: axis.minorGridLines.width <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { width: 2 } |
Property: axis.minorGridLines.width <ejs-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ejs-chart> this.minorGridLines: { width: 2 } |
minor grid line color of axis | Property: axis.minorGridLines.color <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines= { color: ‘red’ } |
Property: axis.minorGridLines.color <ejs-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ejs-chart> this. minorGridLines = { color: ‘red’ } |
minor grid line dash array of axis | Property: axis.minorGridLines.dashArray <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { dashArray: ‘10, 5’ } |
Property: axis.minorGridLines.dashArray <ejs-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ejs-chart> this.minorGridLines = { dashArray: ‘10, 5’} |
minor grid line opacity of axis | Property: axis.minorGridLines.opacity <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { opacity: 0.7 } |
Property: Not Applicable |
minor grid line visibility of axis | Property: axis.minorGridLines.visible <ej-chart> <e-axes> <e-axis [minorGridLines]='minorGridLines'> </e-axis> </e-axes> </ej-chart> this.minorGridLines = { visible: true } |
Property: Not Applicable |
major Tick line width of axis | Property: axis.majorTickLines.width <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this.majorTickLines = { width: 2 } |
Property: axis.majorTickLines.width <ejs-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ejs-chart> this.majorTickLines: { width: 2} |
major Tick line color of axis | Property: axis.majorTickLines.color <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this. majorTickLines = { color: ‘red’ } |
Property: axis.majorTickLines.color <ejs-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ejs-chart> this.majorTickLines = { color: ‘red’} |
major Tick line opacity of axis | Property: axis.majorTickLines.opacity <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this.majorTickLines = { opacity: 0.7 } |
Property: Not Applicable |
major Tick line visibility of axis | Property: axis.majorTickLines.visible <ej-chart> <e-axes> <e-axis [majorTickLines]='majorTickLines'> </e-axis> </e-axes> </ej-chart> this.majorTickLines = { visible: true } |
Property: Not Applicable |
minor Tick line width of axis | Property: axis.minorTickLines.width <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { width: 2 } |
Property: axis.minorTickLines.width <ejs-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ejs-chart> this.minorTickLines = { width: 2} } |
minor Tick line color of axis | Property: axis.minorTickLines.color <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { color: ‘red’ } |
Property: axis.minorTickLines.color <ejs-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ejs-chart> this.minorTickLines = { color: ‘red’} |
minor Tick line opacity of axis | Property: axis.minorTickLines.opacity <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { opacity: 0.7 } |
Property: Not Applicable |
minor Tick line visibility of axis | Property: axis.minorTickLines.visible <ej-chart> <e-axes> <e-axis [minorTickLines]='minorTickLines'> </e-axis> </e-axes> </ej-chart> this.minorTickLines = { visible: true } |
Property: Not Applicable |
Maximum labels of axis | Property: axis.maximumLabels <ej-chart> <e-axes> <e-axis [maximumLabels]='labels'> </e-axis> </e-axes> </ej-chart> this.labels = 4 |
Property: axis.maximumLabels <ejs-chart> <e-axes> <e-axis [maximumLabels]='labels'> </e-axis> </e-axes> </ejs-chart> this.labels = 4 |
Maximum label width of axis | Property: axis.maximumLabelWidth <ej-chart> <e-axes> <e-axis [maximumLabelWidth]='width'> </e-axis> </e-axes> </ej-chart> this.width = 15 |
Property: axis.maximumLabelWidth <ejs-chart> <e-axes> <e-axis [maximumLablWidth]='width'> </e-axis> </e-axes> </ejs-chart> this.width = 15; |
Minor ticks per interval of axis | Property: axis.minorTicksPerInterval <ej-chart> <e-axes> <e-axis [minorTicksPerInterval]='interval'> </e-axis> </e-axes> </ej-chart> this.interval = 5 |
Property: axis.minorTicksPerInterval <ejs-chart> <e-axes> <e-axis [minorTicksPerInterval]='interval'> </e-axis> </e-axes> </ejs-chart> this.interval= 5 |
Name of axis | Property: axis.name <ej-chart> <e-axes> <e-axis name='XAxisName'> </e-axis> </e-axes> </ej-chart> |
Property: axis.name <ejs-chart> <e-axes> <e-axis name='xAxis'> </e-axis> </e-axes> </ejs-chart> |
Plot offset of axis | Property: axis.plotOffset <ej-chart> <e-axes> <e-axis [plotOffset]='offset'> </e-axis> </e-axes> </ej-chart> this.offset = 10 |
Property: axis.plotOffset <ejs-chart> <e-axes> <e-axis [plotOffset]='offset'> </e-axis> </e-axes> </ejs-chart> this.axis = { plotOffset:10 } |
Orientation of axis | Property: axis.orientation <ej-chart> <e-axes> <e-axis orientattion='horizontal'> </e-axis> </e-axes> </ej-chart> |
Property: axis.orientation <ejs-chart> <e-axes> <e-axis orientation='horizontal'> </e-axis> </e-axes> </ejs-chart> |
Minimum of axis | Property: axis.range.minimum <ej-chart> <e-axes> <e-axis [range]='range'> </e-axis> </e-axes> </ej-chart> this.range: { minimum: 10 } |
Property: axis.minimum <ejs-chart> <e-axes> <e-axis minimum='minimum'> </e-axis> </e-axes> </ejs-chart> this.minimum = 10 |
maximum of axis | Property: axis.range.maximum <ej-chart> <e-axes> <e-axis [range]='range'> </e-axis> </e-axes> </ej-chart> this. range: { maximum: 10 } |
Property: axis.maximum <ejs-chart> <e-axes> <e-axis [maximum]='maximum'> </e-axis> </e-axes> </ejs-chart> this.maximum = 1000 |
interval of axis | Property: axis.range.interval <ej-chart> <e-axes> <e-axis [range]='range'> </e-axis> </e-axes> </ej-chart> this.range = { interval: 10 } |
Property: axis.interval <ejs-chart> <e-axes> <e-axis interval='interval'> </e-axis> </e-axes> </ejs-chart> this.interval: 10 |
Range padding of axis | Property: axis.rangePadding <ej-chart> <e-axes> <e-axis rangePadding='Additional'> </e-axis> </e-axes> </ej-chart> |
Property: axis.rangePadding <ejs-chart> <e-axes> <e-axis rangePadding='Round'> </e-axis> </e-axes> </ejs-chart> |
Rounding places of axis | Property: axis.roundingPlaces <ej-chart> <e-axes> <e-axis [roundingPlaces]='round'> </e-axis> </e-axes> </ej-chart> this.round = 3} |
Property: axis.labelFormat <ejs-chart> <e-axes> <e-axis labelFormat='n3'> </e-axis> </e-axes> </ejs-chart> |
Tick position of axis | Property: axis.tickPosition <ej-chart> <e-axes> <e-axis tickPosition='Inside'> </e-axis> </e-axes> </ej-chart> |
Property: axis.tickPosition <ejs-chart> <e-axes> <e-axis tickPosition='Inside'> </e-axis> </e-axes> </ejs-chart> |
Scrollbar settings of axis | Property: axis.scrollBarSettings <ej-chart> <e-axes> <e-axis [scrollBarSettings]='scroll'> </e-axis> </e-axes> </ej-chart> this.scroll = { } |
Property: Not Applicable. |
Value type of axis | Property: axis.valueType <ej-chart> <e-axes> <e-axis valueType='Category'> </e-axis> </e-axes> </ej-chart> |
Property: axis.valueType <ejs-chart> <e-axes> <e-axis valueType='Logarithmic'> </e-axis> </e-axes> </ejs-chart> |
Visible of axis | Property: axis.visible <ej-chart> <e-axes> <e-axis [visible]='visible'> </e-axis> </e-axes> </ej-chart> this.visible: true |
Property: axis.visible <ejs-chart> <e-axes> <e-axis [visible]='visible'> </e-axis> </e-axes> </ejs-chart> this.visible: true |
Zoom factor of axis | Property: axis.zoomFactor <ej-chart> <e-axes> <e-axis [zoomFactor]='zoom'> </e-axis> </e-axes> </ej-chart> this.zoom = 0.7 |
Property: axis.zoomFactor <ejs-chart> <e-axes> <e-axis [zoomFactor]='zoom'> </e-axis> </e-axes> </ejs-chart> this.zoom = 0.7 |
Zoom position of axis | Property: axis.zoomPosition <ej-chart> <e-axes> <e-axis [zoomPosition]='zoom'> </e-axis> </e-axes> </ej-chart> this.zoom = 0.7 |
Property: axis.zoomPosition <ejs-chart> <e-axes> <e-axis [zoomPosition]='zoom'> </e-axis> </e-axes> </ejs-chart> this.zoom = 0.7 |
Label border of axis | Property: axis.labelBorder <ej-chart> <e-axes> <e-axis [labelBorder]='labelBorder'> </e-axis> </e-axes> </ej-chart> this.labelBorder: { width: 2, color: ‘red’ } |
Property: axis.labelBorder <ejs-chart> <e-axes> <e-axis [labelBorder]='labelBorder'> </e-axis> </e-axes> </ejs-chart> this.labelBorder: { color: ‘red’, width: 2} |
Title of axis | Property: axis.title <ej-chart> <e-axes> <e-axis title='title'> </e-axis> </e-axes> </ej-chart> |
Property: axis.title <ejs-chart> <e-axes> <e-axis title='axis title'> </e-axis> </e-axes> </ejs-chart> |
skeleton of axis | Property: axis.skeleton <ej-chart> <e-axes> <e-axis skeleton='yMd'> </e-axis> </e-axes> </ej-chart> |
Property: axis.skeleton <ejs-chart> <e-axes> <e-axis skeleton='yMd'> </e-axis> </e-axes> </ejs-chart> |
skeletonType of axis | Property: axis.skeletonType <ej-chart> <e-axes> <e-axis skeletonType='Date'> </e-axis> </e-axes> </ej-chart> |
Property: axis.skeletonType <ejs-chart> <e-axes> <e-axis skeletonType='Date'> </e-axis> </e-axes> </ejs-chart> |
Stripline of axis | Property: axis.stripLines <ej-chart> <e-axes> <e-axis> <e-stripLines> <e-stripLine> </e-stripLine> </e-stripLines> </e-axis> </e-axes> </ej-chart> |
Property: axis.skeletonType <ej-chart> <e-axes> <e-axis> <e-stripLines> <e-stripLine> </e-stripLine> </e-stripLines> </e-axis> </e-axes> </ej-chart> |
Multilevel labels of axis | Property: axis.multiLevelLabels <ej-chart> <e-axes> <e-axis> <e-multiLevelLabels> <e-multiLevelLabel> </e-multiLevelLabel> </e-multiLevelLabels> </e-axis> </e-axes> </ej-chart> |
Property: axis.multiLevelLabels <ej-chart> <e-axes> <e-axis> <e-multilevellabels> <e-multilevellabel> </e-multilevellabel> </e-multilevellabels> </e-axis> </e-axes> </ej-chart> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Series | Property: series <ej-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ej-chart> |
Property: series <ejs-chart> <e-series-collection> <e-series> </e-series> </e-series-collection> </ejs-chart> |
bearFillColor | Property: bearFillColor <ej-chart> <e-series-collection> <e-series bearFillColor='red'> </e-series> </e-series-collection> </ej-chart> |
Property: bearFillColor <ejs-chart> <e-series-collection> <e-series bearFillColor='pink'> </e-series> </e-series-collection> </ejs-chart> |
boxPlotMode | Property: boxPlotMode <ej-chart> <e-series-collection> <e-series boxPlotMode='Inclusive'> </e-series> </e-series-collection> </ej-chart> |
Property: bearFillColor <ejs-chart> <e-series-collection> <e-series boxPlotMode='Inclusive'> </e-series> </e-series-collection> </ejs-chart> |
border | Property: border <ej-chart> <e-series-collection> <e-series [border]='border' > </e-series> </e-series-collection> </ej-chart> this.border = { width: 2, color: 2} |
Property: border <ejs-chart> <e-series-collection> <e-series border='border'> </e-series> </e-series-collection> </ejs-chart> this.border = { width: 2, color: ‘red’ } |
Minimum radius for bubble series | Property: series.bubbleOptions.minRadius <ej-chart> <e-series-collection> <e-series [buubleOptions]='bubble' > </e-series> </e-series-collection> </ej-chart> this.bubble = { minRadius: 3} |
Property: series.MinRadius <ejs-chart> <e-series-collection> <e-series [minRadius]='minimum' > </e-series> </e-series-collection> </ejs-chart> this.minimum = 2 |
maximum radius for bubble series | Property: series.bubbleOptions.maxRadius <ej-chart> <e-series-collection> <e-series [buubleOptions]='bubble' > </e-series> </e-series-collection> </ej-chart> this.bubble = { maxRadius: 3} |
Property: series.maxRadius <ejs-chart> <e-series-collection> <e-series [maxRadius]='maximum' > </e-series> </e-series-collection> </ejs-chart> this.maximum = 2 |
bullFillColor | Property: bullFillColor <ej-chart> <e-series-collection> <e-series bullFillColor='red'> </e-series> </e-series-collection> </ej-chart> |
Property: bullFillColor <ejs-chart> <e-series-collection> <e-series bullFillColor='pink'> </e-series> </e-series-collection> </ejs-chart> |
Cardinal spline tension | Property: series.cardinalSplineTension <ej-chart> <e-series-collection> <e-series [cardinalSplineTension]='spline' > </e-series> </e-series-collection> </ej-chart> this.spline = 0.3 |
Property: series.maxRadius <ejs-chart> <e-series-collection> <e-series [cardinalSplineTension]='spline' > </e-series> </e-series-collection> </ejs-chart> this.spline = 0.2 |
Column spacing | Property: series.columnSpacing <ej-chart> <e-series-collection> <e-series [columnSpacing]='space' > </e-series> </e-series-collection> </ej-chart> this.space = 0.3 |
Property: series.columnSpacing <ejs-chart> <e-series-collection> <e-series [columnSpacing]='space' > </e-series> </e-series-collection> </ejs-chart> this.space = 0.2 |
Column width | Property: series.columnWidth <ej-chart> <e-series-collection> <e-series [columnWidth]='width' > </e-series> </e-series-collection> </ej-chart> this.width = 0.3 |
Property: series.columnWidth <ejs-chart> <e-series-collection> <e-series [columnWidth]='width' > </e-series> </e-series-collection> </ejs-chart> this.width = 0.7 |
topLeft corner radius for rectangle series | Property: series.cornerRadius.topLeft <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { topLeft: 5 } |
Property: series.cornerRadius.topLeft <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { topLeft: 5} |
topRight corner radius for rectangle series | Property: series.cornerRadius.topRight <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { topRight: 5 } |
Property: series.cornerRadius.topRight <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { topRight: 5} |
bottomRight corner radius for rectangle series | Property: series.cornerRadius.bottomRight <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { bottomRight: 5 } |
Property: series.cornerRadius.bottomRight <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { bottomRight: 5} |
bottomLeft corner radius for rectangle series | Property: series.cornerRadius.bottomLeft <ej-chart> <e-series-collection> <e-series [cornerRadius]='corner' > </e-series> </e-series-collection> </ej-chart> this.corner = { bottomLeft: 5 } |
Property: series.cornerRadius.bottomLeft <ejs-chart> <e-series-collection> <e-series [cornerRadius]='radius' > </e-series> </e-series-collection> </ejs-chart> this.radius = { bottomLeft: 5} |
dashArray | Property: series.dashArray <ej-chart> <e-series-collection> <e-series dashArray='10, 5'> </e-series> </e-series-collection> </ej-chart> |
Property: series.dashArray <ejs-chart> <e-series-collection> <e-series dashArray='10, 5'> </e-series> </e-series-collection> </ejs-chart> |
dataSource for series | Property: series.dataSource <ej-chart> <e-series-collection> <e-series [dataSource]='data' > </e-series> </e-series-collection> </ej-chart> this.data = [] |
Property: series.dataSource <ejs-chart> <e-series-collection> <e-series [dataSource]='data' > </e-series> </e-series-collection> </ejs-chart> this.data = [] |
drawType for polar/radar series | Property: series.drawType <ej-chart> <e-series-collection> <e-series drawType='Spline' > </e-series> </e-series-collection> </ej-chart> |
Property: series.drawType <ejs-chart> <e-series-collection> <e-series [drawType]='data' > </e-series> </e-series-collection> </ejs-chart> this.data = ‘Line’ |
Enable animation for series | Property: series.enableAnimation <ej-chart> <e-series-collection> <e-series [enableAnimation]='animation' > </e-series> </e-series-collection> </ej-chart> this.animation = true |
Property: series.animation.enable <ejs-chart> <e-series-collection> <e-series [animation]='animation' > </e-series> </e-series-collection> </ejs-chart> this.animation = { enable: true} |
Duration animation for series | Property: series.animationDuration <ej-chart> <e-series-collection> <e-series [animationDuration]='animation' > </e-series> </e-series-collection> </ej-chart> this.animation = 100 |
Property: series.animation.duration <ejs-chart> <e-series-collection> <e-series [animation]='animation' > </e-series> </e-series-collection> </ejs-chart> this.animation = { enable: true} |
Animation delay for series | Property: Not Applicable | Property: series.animation.delay <ejs-chart> <e-series-collection> <e-series [animation]='animation' > </e-series> </e-series-collection> </ejs-chart> this.animation = { delay: 100 } |
Drag settings for series | Property: series.animationDuration <ej-chart> <e-series-collection> <e-series [dradSettings]='drag' > </e-series> </e-series-collection> </ej-chart> this.drag = { mode: ‘XY’ } |
Property: Not Applicable |
Customization of error bar | Property: series.errorBar <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = {} |
Property: series.errorBar <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { } |
isClosed | Property: series.errorBar <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = {} |
Property: series.errorBar <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { } |
enables Stacking of series | Property: series.isStacking <ej-chart> <e-series-collection> <e-series [isStacking]='isStacking' > </e-series> </e-series-collection> </ej-chart> this.isStacking = true |
Property: series.errorBar <ejs-chart> <e-series-collection> <e-series [isStacking]='isStacking' > </e-series> </e-series-collection> </ejs-chart> this.isStacking = true |
Line cap of series | Property: series.lineCap <ej-chart> <e-series-collection> <e-series [lineCap]='lineCap' > </e-series> </e-series-collection> </ej-chart> this.lineCap = ‘butt’ |
Property: Not Applicable |
Line join of series | Property: series.lineJoin <ej-chart> <e-series-collection> <e-series [lineJoin]='lineJoin' > </e-series> </e-series-collection> </ej-chart> this.lineJoin = ‘round’ |
Property: Not Applicable |
Opacity of series | Property: series.opacity <ej-chart> <e-series-collection> <e-series [opacity]='opacity' > </e-series> </e-series-collection> </ej-chart> this.opacity = 0.6 |
Property: series.opacity <ejs-chart> <e-series-collection> <e-series [opacity]='opacity' > </e-series> </e-series-collection> </ejs-chart> this.opacity = true |
Outlier settings of series | Property: series.lineJoin <ej-chart> <e-series-collection> <e-series [outLierSettings]='outlier' > </e-series> </e-series-collection> </ej-chart> this.outLier = { } |
Property: Not Applicable |
Line join of series | Property: series.lineJoin <ej-chart> <e-series-collection> <e-series [lineJoin]='lineJoin' > </e-series> </e-series-collection> </ej-chart> this.lineJoin = ‘round’ |
Property: Not Applicable |
Palette of series | Property: series.palette <ej-chart> <e-series-collection> <e-series [palette]='opacity' > </e-series> </e-series-collection> </ej-chart> this.palette = [] |
Not applicable |
Positive fill color for waterfall series | Property: series.positiveColor <ej-chart> <e-series-collection> <e-series [positiveColor]='positiveColor' > </e-series> </e-series-collection> </ej-chart> this.positiveColor = ‘red’ |
Property: series.positiveColor <ejs-chart> <e-series-collection> <e-series [positiveColor]='positiveColor' > </e-series> </e-series-collection> </ejs-chart> this.positiveColor = ‘red’ |
To show average value in box and whisker series | Property: series.showMedian <ej-chart> <e-series-collection> <e-series [showMedian]='showMedian' > </e-series> </e-series-collection> </ej-chart> this.showMedian = ‘true’ |
Property: series.showMean <ejs-chart> <e-series-collection> <e-series [showMean]='showMean' > </e-series> </e-series-collection> </ejs-chart> this.showMean = true |
Stacking group for stacking series | Property: series.showMedian <ej-chart> <e-series-collection> <e-series [stackingGroup]='stackingGroup' > </e-series> </e-series-collection> </ej-chart> this.stackingGroup = ‘copper’ |
Property: series.stackingGroup <ejs-chart> <e-series-collection> <e-series [stackingGroup]='stackingGroup' > </e-series> </e-series-collection> </ejs-chart> this.stackingGroup = ‘copper’ |
Type of series | Property: series.type <ej-chart> <e-series-collection> <e-series [type]='type' > </e-series> </e-series-collection> </ej-chart> this.type = ‘Line’ |
Property: series.type <ejs-chart> <e-series-collection> <e-series [type]='type' > </e-series> </e-series-collection> </ejs-chart> this.type = ‘Line’ |
Visibility of series | Property: series.visiblity <ej-chart> <e-series-collection> <e-series [visiblity]='visiblity' > </e-series> </e-series-collection> </ej-chart> this.visiblity = true |
Property: series.visible <ejs-chart> <e-series-collection> <e-series [visible]='visible' > </e-series> </e-series-collection> </ejs-chart> this.visible = true |
Visibility on legend click | Property: series.visiblityOnLegend <ej-chart> <e-series-collection> <e-series [visiblityOnLegend]='visiblity' > </e-series> </e-series-collection> </ej-chart> this.visiblity = true |
Property: legendSettings.toggleVisiblity <ejs-chart [legendSettings]='legend'> <e-series-collection> <e-series [visible]='visible' > </e-series> </e-series-collection> </ejs-chart> this.legend = { toggleVisiblity = true} |
Spline Type of series | Property: series.splineType <ej-chart> <e-series-collection> <e-series [splineType]='splineType' > </e-series> </e-series-collection> </ej-chart> this.splineType = ‘Monotonic’ |
Property: series.splineType <ejs-chart> <e-series-collection> <e-series [splineType]='splineType' > </e-series> </e-series-collection> </ejs-chart> this.splineType = ‘Cardinal’ |
xAxisName of series | Property: xAxisName <ej-chart> <e-series-collection> <e-series xAxisName='xaxis'> </e-series> </e-series-collection> </ej-chart> |
Property: xAxisName <ejs-chart> <e-series-collection> <e-series xAxisName='axis'> </e-series> </e-series-collection> </ejs-chart> |
yAxisName of series | Property: yAxisName <ej-chart> <e-series-collection> <e-series yAxisName='xaxis'> </e-series> </e-series-collection> </ej-chart> |
Property: yAxisName <ejs-chart> <e-series-collection> <e-series yAxisName='axis'> </e-series> </e-series-collection> </ejs-chart> |
yAxisName of series | Property: yAxisName <ej-chart> <e-series-collection> <e-series yAxisName='xaxis'> </e-series> </e-series-collection> </ej-chart> |
Property: yAxisName <ejs-chart> <e-series-collection> <e-series yAxisName='axis'> </e-series> </e-series-collection> </ejs-chart> |
xName of series | Property: xName <ej-chart> <e-series-collection> <e-series xName='x'> </e-series> </e-series-collection> </ej-chart> |
Property: xName <ejs-chart> <e-series-collection> <e-series xName='x'> </e-series> </e-series-collection> </ejs-chart> |
yName of series | Property: yName <ej-chart> <e-series-collection> <e-series yName='y'> </e-series> </e-series-collection> </ej-chart> |
Property: yName <ejs-chart> <e-series-collection> <e-series yName='y'> </e-series> </e-series-collection> </ejs-chart> |
Name of the property in the datasource that contains high value for the series | Property: high <ej-chart> <e-series-collection> <e-series high='high'> </e-series> </e-series-collection> </ej-chart> |
Property: high <ejs-chart> <e-series-collection> <e-series high=''high> </e-series> </e-series-collection> </ejs-chart> |
Name of the property in the datasource that contains low value for the series | Property: low <ej-chart> <e-series-collection> <e-series low='low'> </e-series> </e-series-collection> </ej-chart> |
Property: low <ejs-chart> <e-series-collection> <e-series low=''low> </e-series> </e-series-collection> </ejs-chart> |
Name of the property in the datasource that contains open value for the series | Property: open <ej-chart> <e-series-collection> <e-series open='open'> </e-series> </e-series-collection> </ej-chart> |
Property: open <ejs-chart> <e-series-collection> <e-series open=''open> </e-series> </e-series-collection> </ejs-chart> |
Name of the property in the datasource that contains close value for the series | Property: close <ej-chart> <e-series-collection> <e-series close='close'> </e-series> </e-series-collection> </ej-chart> |
Property: close <ejs-chart> <e-series-collection> <e-series close=''close> </e-series> </e-series-collection> </ejs-chart> |
Trendlines of series | Property: trendlines <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> |
Property: trendLines <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline> </e-trendline> <e-trendlines> </e-series> </e-series-collection> `
|
Marker settings in series | Property: series.marker <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = {} |
Property: series.marker <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fill color in series | Property: series.marker.fill <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { fill: ‘red’} |
Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { fill: ‘red’} |
Opacity of marker | Property: series.marker.opacity <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { opacity: 0.4 } |
Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { opacity: 0.4} |
shape of marker | Property: series.marker.shape <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { shape: ‘Circle’ } |
Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { shape: ‘Circle’ } |
imageUrl of marker | Property: series.marker.imageUrl <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { imageUrl: ‘./src.png’ } |
Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { ‘./src.png’ } |
border of marker | Property: series.marker.border <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { border: { color: ‘red’, width: 2} } |
Property: series.marker.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { border:{ color: ‘red’, width: 2}} |
Height of marker | Property: series.marker.size.height <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { size: { height: 20} } |
Property: series.marker.height <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { height: 20} |
width of marker | Property: series.marker.size.width <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { size: { width: 20} } |
Property: series.marker.width <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { width: 20} |
DataLabel of marker | Property: series.marker.dataLabel <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { visible: true } } |
Property: series.marker.dataLabel <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { visible: true } } |
TextMapping name of datalabel | Property: marker.dataLabel.textMappingName <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { textMappingName: ‘name’ } } |
Property: marker.dataLabel.name <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { name: ‘data’ } } |
Fill color of datalabel | Property: marker.dataLabel.fill <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { fill: ‘red’ } } |
Property: marker.dataLabel.fill <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { fill: ‘red’ } } |
opacity color of datalabel | Property: marker.dataLabel.opacity <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { opacity: 0.6 } } |
Property: marker.dataLabel.opacity <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { opacity: 0.6 } } |
Text position of datalabel | Property: marker.dataLabel.textPosition <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { textPosition: ‘Top’ } } |
Property: marker.dataLabel.position <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { position: ‘Top’ } } |
Vertical alignment of datalabel | Property: marker.dataLabel.verticalAlignment <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { verticalAlignment: ‘Near’ } } |
Property: marker.dataLabel.alignment <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { alignment: ‘far’ } } |
Border of datalabel | Property: marker.dataLabel.border <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { border: { color: ‘red’, width: 2} } } |
Property: marker.dataLabel.border <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { border: { width: 2, color: ‘blue’} } } |
Margin of datalabel | Property: marker.dataLabel.margin <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { margin: { top: 10, left: 10, bottom: 10, right: 10 } } } |
Property: marker.dataLabel.margin <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { margin: { top: 10, left: 10, bottom: 10, right: 10 } } } |
Offset of datalabel | Property: marker.dataLabel.offset <ej-chart> <e-series-collection> <e-series [border]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { offset: 10 } } |
Property: Not applicable |
Text style of datalabel | Property: marker.dataLabel.font <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { font: { } } } |
Property: marker.dataLabel.font <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { font: { }} } |
HTML template of datalabel | Property: marker.dataLabel.template <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { template:” } } |
Property: marker.dataLabel.template <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { template: ” } |
Rounded corner x of datalabel | Property: Not Applicable Property: marker.dataLabel.rx <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { rx: 10 } |
|
Rounded corner y of datalabel | Property: Not Applicable Property: marker.dataLabel.ry <ejs-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ejs-chart> this.marker = { dataLabel: { ry: 10 } |
|
Maximum width of datalabel | Property: marker.dataLabel.maximumLabelWidth <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { maximumLabelWidth:20 } } |
Property: Not Applicable |
Enabling wrap of datalabel | Property: marker.dataLabel.enablWrap <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { enableWrap:true } } |
Property: Not Applicable |
Show contrast color of datalabel | Property: marker.dataLabel.showContrastColor <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { showContrastColor:true } } |
Property: Not Applicable |
Show edge lebel of datalabel | Property: marker.dataLabel.showEdgeLabel <ej-chart> <e-series-collection> <e-series [marker]='marker'> </e-series> </e-series-collection> </ej-chart> this.marker = { dataLabel: { showEdgeLabel: true } } |
Property: Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Type of error bar | Property: series.errorBar.type <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { type: ‘StandardDeviation’} |
Property: series.errorBar.type <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { type: ‘StandardDeviation’ } |
mode of error bar | Property: series.errorBar.mode <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { mode: ‘Horizontal’} |
Property: series.errorBar.mode <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { mode: ‘Horizontal’ } |
direction of error bar | Property: series.errorBar.direction <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { direction: ‘Positive’} |
Property: series.errorBar.direction <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { direction: ‘Positive’ } |
fill of error bar | Property: series.errorBar.fill <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { fill: ‘red’} |
Property: series.errorBar.fill <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { fill: ‘red’ } |
width of error bar | Property: series.errorBar.width <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { width: 2} |
Property: series.errorBar.width <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { width: 2 } |
horizontalError of error bar | Property: series.errorBar.horizontalError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { horizontalError: 2} |
Property: series.errorBar.horizontalError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { horizontalError: 2 } |
verticalError of error bar | Property: series.errorBar.verticalError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { verticalError: 2} |
Property: series.errorBar.verticalError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { verticalError: 2 } |
horizontalPositiveError of error bar | Property: series.errorBar.horizontalPositiveError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { horizontalPositiveError: 2} |
Property: series.errorBar.horizontalPositiveError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { horizontalPositiveError: 2 } |
horizontalNegativeError of error bar | Property: series.errorBar.horizontalNegativeError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { horizontalNegativeError: 2} |
Property: series.errorBar.horizontalNegativeError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { horizontalNegativeError: 2 } |
verticalPositiveError of error bar | Property: series.errorBar.verticalPositiveError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { verticalPositiveError: 2} |
Property: series.errorBar.verticalPositiveError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { verticalPositiveError: 2 } |
verticalNegativeError of error bar | Property: series.errorBar.verticalNegativeError <ej-chart> <e-series-collection> <e-series [errorbar]='errorBar' > </e-series> </e-series-collection> </ej-chart> this.errorBar = { verticalNegativeError: 2} |
Property: series.errorBar.verticalNegativeError <ejs-chart> <e-series-collection> <e-series [errorBar]='errorBar' > </e-series> </e-series-collection> </ejs-chart> this.errorBar = { verticalNegativeError: 2 } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Trendsline type of series | Property: trendlines.type <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline type='Linear'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> |
Property: trendLines.type <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline type='Linear'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> |
Visiblity of Trendslines | Property: trendlines.visible <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [visible]='visible'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.visible: true |
Property: Not Applicable |
Name of trendline | Property: trendlines.name <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline name='linee1'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> |
Property: trendLines.name <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline name='line1'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> |
Period of trendline | Property: trendlines.period <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [period]='period'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.period = 2 |
Property: trendLines.period <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [period]='period'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.period = 2 |
polynomialOrder of trendline | Property: trendlines.polynomialOrder <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [polynomialOrder]='polynomialOrder'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.polynomialOrder = 2 |
Property: trendLines.polynomialOrder <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [polynomialOrder]='polynomialOrder'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.polynomialOrder = 2 |
backwardForecast of trendline | Property: trendlines.backwardForecast <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [backwardForecast]='backwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.backwardForecast = 2 |
Property: trendLines.backwardForecast <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [backwardForecast]='backwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.backwardForecast = 2 |
forwardForecast of trendline | Property: trendlines.forwardForecast <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [forwardForecast]='forwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.forwardForecast = 2 |
Property: trendLines.forwardForecast <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [forwardForecast]='forwardForecast'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.forwardForecast = 2 |
width of trendline | Property: trendlines.width <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [width]='width'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.width = 2 |
Property: trendLines.width <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [width]='width'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.width = 2 |
intercept of trendline | Property: trendlines.intercept <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [intercept]='intercept'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.intercept = 2 |
Property: trendLines.intercept <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [intercept]='intercept'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.intercept = 2 |
fill of trendline | Property: trendlines.fill <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [fill]='fill'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.fill = ‘blue’ |
Property: trendLines.fill <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [fill]='fill'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.fill = ‘blue’ |
dashArray of trendline | Property: trendlines.dashArray <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [dashArray]='dashArray'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.dashArray = ‘10, 5’ |
Property: trendLines.dashArray <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [dashArray]='dashArray'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.dashArray = ‘10, 5’ |
legend shape of trendline | Property: Not Applicable | Property: trendLines.legendShape <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [legendShape]='Circle'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.circle = ‘Circle’ |
Animation of trendline | Property: Not Applicable | Property: trendLines.legendShape <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [animation]='animation'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.animation = { } |
Marker of trendline | Property: Not Applicable | Property: trendLines.legendShape <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [marker]='marker'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.marker = { } |
tooltip of trendline | Property: trendlines.dashArray <ej-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [tooltip]='tooltip'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ej-chart> this.tooltip = { } |
Property: trendLines.enableTooltip <ejs-chart> <e-series-collection> <e-series> <e-trendlines> <e-trendline [enableTooltip]='enableTooltip'> </e-trendline> <e-trendlines> </e-series> </e-series-collection> </ejs-chart> this.enableTooltip = true |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline> </e-stripline> <e-striplines> </e-axes> </ej-chart> |
Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline> </e-stripline> <e-striplines> </e-axes> </ej-chart> |
Color of stripines | Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline color='pink'> </e-stripline> <e-striplines> </e-axes> </ej-chart> |
Property: striplines <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline color='pink'> </e-stripline> <e-striplines> </e-axes> </ej-chart> |
Border of stripines | Property: striplines.border <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [border]='border'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.border = { width: 2, color: ‘red’, opacity: 0.5 } |
Property: striplines.border <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [border]='border'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.border = { width: 2, color: ‘red’, opacity: 0.5 } |
Start of stripines | Property: striplines.start <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [start]='start'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.start = 2 |
Property: striplines.start <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [start]='start'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.start = 2 |
end of stripines | Property: striplines.end <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [end]='end'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.end = 2 |
Property: striplines.end <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [end]='end'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.end = 2 |
startFromAxis of stripines | Property: striplines.startFromAxis <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [startFromAxis]='startFromAxis'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.startFromAxis = true |
Property: striplines.startFromAxis <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [startFromAxis]='startFromAxis'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.startFromAxis = false |
text of stripines | Property: striplines.text <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [text]='text'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.text = ‘striplines’ |
Property: striplines.text <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [text]='text'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.text = ‘Striplines’ |
size of stripines | Property: striplines.width <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [width]='width'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.width = 2 |
Property: striplines.size <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [size]='size'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.size = 2 |
horizontal alignment of stripines | Property: striplines.alignemnt <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [alignment]='alignment'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.horizontalAlignment = ‘near’ |
Property: striplines.horizontalAlignment <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [horizontalAlignment]='horizontalAlignment'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.horizontalAlignment = ‘near’ |
vertical alignment of stripines | Property: Not Applicable | Property: striplines.horizontalAlignment <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [horizontalAlignment]='horizontalAlignment'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.horizontalAlignment = ‘near’ |
zIndex of stripines | Property: striplines.zIndex <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [zIndex]='Over'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.zIndex = ‘striplines’ |
Property: striplines.zIndex <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [zIndex]='zIndex'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.zIndex = ‘Behind’ |
Font style of stripines text | Property: striplines.font <ej-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [font]='font'> </e-stripline> <e-striplines> </e-axes> </ej-chart> this.font = {} |
Property: striplines.textStyle <ejs-chart> <e-axes> <e-axis> </e-axis> <e-striplines> <e-stripline [textStyle]='text'> </e-stripline> <e-striplines> </e-axes> </ejs-chart> this.text = { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: multilevellabels <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Property: multilevellabels <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Text alignment in labels | Property: textAlignment <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel textAlignment='near'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Property: multilevellabels <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel alignment='near'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Text overflow in labels | Property: textOverFlow <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel textOverFlow='trim'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Property: overFlow <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel overFLow='Trim'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Text of multilevel labels | Property: text <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel text='Texts'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Property: categories.text <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel > <e-categories> <e-category text='text'> </e-category> </e-categories> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> |
Start of multilevel labels | Property: start <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel start='start'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.start = 20 |
Property: categories.start <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel > <e-categories> <e-category start='start'> </e-category> </e-categories> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.start = 20 |
End of multilevel labels | Property: end <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel start='start'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.end = 20 |
Property: categories.end <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel > <e-categories> <e-category end='end'> </e-category> </e-categories> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.end = 20 |
Maximum Label width | Property: maximumLabelWidth <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel [maximumLabelWidth]='width'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.width = 16 |
Property: maximumLabelWidth <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel [maximumLabelWidth]='width'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.width = 20; |
Level of labels | Property: level <ej-chart> <e-axes> <e-axis> </e-axis> <e-multilevellabels> <e-multilevellabel [level]='level'> </e-multilevellabel> <e-multilevellabels> </e-axes> </ej-chart> this.level = 3 |
Property: Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Animation | Property: chart.animate <ej-chart (animate)='animation'> </ej-chart> this.animate(args) { } |
Property: Not Applicable |
Redraw | Property: chart.redraw <ej-chart (redraw)='redraw'> </ej-chart> this.redraw(args) { } |
Property: chart.refresh <ej-chart (refresh)='refresh'> </ej-chart> this.refresh(args) { } |
Property: chart.print <ej-chart (print)='print'> </ej-chart> this.print(args) { } |
Property: chart.print <ej-chart (print)='print'> </ej-chart> this.print(args) { } |
|
export | Property: chart.export <ej-chart (print)='print'> </ej-chart> this.print(args) { } |
Property: chart.export <ej-chart (export)='export'> </ej-chart> this.export(args) { } |
add series | Property: Not Applicable | Property: chart.export <ej-chart (addSeries)='addSeries'> </ej-chart> this.addSeries(args) { } |
remove series | Property: Not Applicable | Property: chart.export <ej-chart (removeSeries)='removeSeries'> </ej-chart> this.removeSeries(args) { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Fires on annotation click | Property: chart.annotationClick <ej-chart (annotationClick)='annotationClick($event)'> </ej-chart> this.annotationClick(args) { } |
Property: Not Applicable |
Fires on after animation | Property: chart.animationComplete <ejs-chart (animationComplete)='animationComplete($event)'> </ejs-chart> this.animationComplete(args) { } |
Property: chart.animationComplete <ejs-chart (refresh)='refresh'> </ejs-chart> this.refresh(args) { } |
Fires on axis label click | Property: chart.axislabelClick <ej-chart (axislabelClick)='axislabelClick($event)'> </ej-chart> this.axislabelClick(args) { } |
Property: Not Applicable |
Fires before axis label rendering | Property: chart.axisLabelRendering <ej-chart (axisLabelRendering)='axisLabelRendering($event)'> </ej-chart> this.axisLabelRender(args) { } |
Property: chart.axisLabelRender <ejs-chart (axisLabelRender)='axisLabelRender($event)'> </ejs-chart> this.axisLabelRender(args) { } |
Fires on axis label mouse move | Property: chart.axisLabelMouseMove <ej-chart (axisLabelMouseMove)='axisLabelMouseMove($event)'> </ej-chart> this.axisLabelMouseMove(args) { } |
Property: Not Applicable |
Fires on axis label initialize | Property: chart.axisLabelMouseMove <ej-chart (axisLabelInitialize)='axisLabelInitialize($event)'> </ej-chart> this.axisLabelInitialize(args) { } |
Property: Not Applicable |
Fires before axis range calculate | Property: chart.axisRangeCalculate <ej-chart (axisRangeCalculate)='axisRangeCalculate($event)'> </ej-chart> this.axisRangeCalculate(args) { } |
Property: chart.axisRangeCalculated <ejs-chart (axisRangeCalculated)='axisRangeCalculated($event)'> </ejs-chart> this.axisRangeCalculated(args) { } |
Fires on axis title rendering | Property: chart.axisTitleRendering <ej-chart (axisTitleRendering)='axisTitleRendering($event)'> </ej-chart> this.axisTitleRendering(args) { } |
Property: Not Applicable |
Fires on after chart resize | Property: chart.afterResize <ej-chart (afterResize)='afterResize($event)'> </ej-chart> this.afterResize(args) { } |
Property: Not Applicable |
Fires before resize | Property: chart.beforeResize <ej-chart (beforeResize)='beforeResize($event)'> </ej-chart> this.beforeResize(args) { } |
Property: chart.resized <ejs-chart (resized)='resized($event)'> </ejs-chart> this.resized(args) { } |
Fires chart click | Property: chart.chartClick <ej-chart (chartClick)='chartClick($event)'> </ej-chart> this.chartClick(args) { } |
Property: chart.chartMouseClick <ejs-chart (chartMouseClick)='chartMouseClick($event)'> </ejs-chart> this.chartMouseClick(args) { } |
Fires chart mouse leave | Property: chart.chartMouseLeave <ej-chart (chartMouseLeave)='chartMouseLeave($event)'> </ej-chart> this.chartMouseLeave(args) { } |
Property: chart.chartMouseClick <ejs-chart (chartMouseLeave)='chartMouseLeave($event)'> </ejs-chart> this.chartMouseLeave(args) { } |
Fires on double click | Property: chart.chartDoubleClick <ej-chart (chartDoubleClick)='chartDoubleClick($event)'> </ej-chart> this.chartDoubleClick(args) { } |
Property: Not Applicable |
Fires chart mouse up | Property: Not Applicable | Property: chart.chartmouseUp <ejs-chart (chartmouseUp)='chartmouseUp($event)'> </ejs-chart> this.chartmouseUp(args) { } |
Fires on chart mouse up | Property: Not Applicable | Property: chart.chartmouseDown <ejs-chart (chartmouseDown)='chartmouseDown($event)'> </ejs-chart> this.chartmouseDown(args) { } |
Fires during calculation of area bounds | Property: chart.chartAreaBoundsCalculate <ej-chart (chartAreaBoundsCalculate)='chartAreaBoundsCalculate($event)'> </ej-chart> this.chartAreaBoundsCalculate(args) { } |
Property: Not Applicable |
Fires on drag start | Property: chart.dragStart <ej-chart (dragStart)='dragStart($event)'> </ej-chart> this.dragStart(args) { } |
Property: Not Applicable |
Fires on dragging | Property: chart.dragging <ej-chart (dragging)='dragging($event)'> </ej-chart> this.dragging(args) { } |
Property: Not Applicable |
Fires on drag end | Property: chart.dragEnd <ej-chart (dragEnd)='dragEnd($event)'> </ej-chart> this.dragEnd(args) { } |
Property: chart.dragComplete <ejs-chart (dragComplete)='dragComplete($event)'> </ejs-chart> this.dragComplete(args) { } |
Fires after chart destried | Property: chart.destroy <ej-chart (destroy)='destroy($event)'> </ej-chart> this.destroy(args) { } |
Property: Not Applicable |
Fires on chart created | Property: chart.create <ej-chart (create)='create($event)'> </ej-chart> this.create(args) { } |
Property: chart.load <ejs-chart (load)='load($event)'> </ejs-chart> this.load(args) { } |
Fires on data labeltext render | Property: chart.displayTextRendering <ej-chart (displayTextRendering)='displayTextRendering($event)'> </ej-chart> this.displayTextRendering(args) { } |
Property: chart.textRender <ejs-chart (textRender)='textRender($event)'> </ejs-chart> this.textRender(args) { } |
Fires on errorbar render | Property: chart.errorbarRendering <ej-chart (errorBarRendering)='errorBarRendering($event)'> </ej-chart> this.errorBarRendering(args) { } |
Property: Not Applicable. |
Fires on legend bound calculate | Property: chart.errorbarRendering <ej-chart (legendBoundsCalculate)='legendBoundsCalculate($event)'> </ej-chart> this.legendBoundsCalculate(args) { } |
Property: Not Applicable. |
Fires on legend item click | Property: chart.legendItemClick <ej-chart (legendItemClick)='legendItemClick($event)'> </ej-chart> this.legendItemClick(args) { } |
Property: Not Applicable. |
Fires on legend item mouse move | Property: chart.legendItemMouseMOve <ej-chart (legendItemMouseMOve)='legendItemMouseMOve($event)'> </ej-chart> this.legendItemMouseMOve(args) { } |
Property: Not Applicable. |
Fires on legend item render | Property: chart.legendItemRendering <ej-chart (legendItemRendering)='legendItemMouseMOve($event)'> </ej-chart> this.legendItemMouseMOve(args) { } |
Property: Not Applicable. |
Fires on multilevel label render | Property: chart.multiLevelLabelRendering <ej-chart (multiLevelLabelRendering)='multiLevelLabelRendering($event)'> </ej-chart> this.multiLevelLabelRendering(args) { } |
Property: chart.axisMultiLabelRender <ejs-chart (axisMultiLabelRender)='axisMultiLabelRender($event)'> </ejs-chart> this.axisMultiLabelRender(args) { } |
Fires on point click | Property: chart.pointRegionClick <ej-chart (pointRegionClick)='pointRegionClick($event)'> </ej-chart> this.pointRegionClick(args) { } |
Property: chart.pointClick <ej-chart (pointClick)='pointClick($event)'> </ej-chart> this.pointClick(args) { } |
Fires on multilevel label render | Property: chart.pointRegionMouseMove <ej-chart (pointRegionMouseMove)='pointRegionMouseMove($event)'> </ej-chart> this.pointRegionMouseMove(args) { } |
Property: chart.pointMouseMove <ej-chart (pointMouseMove)='pointMouseMove($event)'> </ej-chart> this.pointMouseMove(args) { } |
Fires on pre render | Property: chart.preRender <ej-chart (preRender)='preRender($event)'> </ej-chart> this.preRender(args) { } |
Property: Not Applicable. |
Fires on point render | Property: Not Applicable. | Property: chart.pointRender <ejss-chart (pointRender)='pointRender($event)'> </ejs-chart> this.pointRender(args) { } |
Fires on range seleted | Property: chart.rangeSelected <ej-chart (rangeSelected)='rangeSelected($event)'> </ej-chart> this.rangeSelected(args) { } |
Property: Not Applicable. |
Fires on series render | Property: chart.seriesRendering <ej-chart (seriesRendering)='seriesRendering($event)'> </ej-chart> this.seriesRendering(args) { } |
Property: chart.seriesRender <ej-chart (seriesRender)='seriesRender($event)'> </ej-chart> this.seriesRender(args) { } |
Fires on trendLine render | Property: chart.trendLineRendering <ej-chart (trendLineRendering)='trendLineRendering($event)'> </ej-chart> this.trendLineRendering(args) { } |
Property: Not Applicable. |
Fires on title render | Property: chart.titleRendering <ej-chart (titleRendering)='titleRendering($event)'> </ej-chart> this.titleRendering(args) { } |
Property: Not Applicable. |
Fires on sub title render | Property: chart.subTitleRendering <ej-chart (subTitleRendering)='subTitleRendering($event)'> </ej-chart> this.subTitleRendering(args) { } |
Property: Not Applicable. |
Fires before tooltip render | Property: chart.tooltipInitilize <ej-chart (tooltipInitilize)='tooltipInitilize($event)'> </ej-chart> this.tooltipInitilize(args) { } |
Property: chart.tooltipRender <ej-chart (tooltipRender)='tooltipRender($event)'> </ej-chart> this.tooltipRender(args) { } |
Fires on cross hair tooltip render | Property: chart.trackAxisTooltip <ej-chart (trackAxisTooltip)='trackAxisTooltip($event)'> </ej-chart> this.trackAxisTooltip(args) { } |
Property: Not Applicable. |
Fires on before track ball rendering | Property: chart.trackTooltip <ej-chart (trackTooltip)='trackTooltip($event)'> </ej-chart> this.trackTooltip(args) { } |
Property: Not Applicable. |
Fires when scroll start | Property: chart.scrollStart <ej-chart (scrollStart)='scrollStart($event)'> </ej-chart> this.scrollStart(args) { } |
Property: chart.scrollStart <ejs-chart (scrollStart)='scrollStart($event)'> </ejs-chart> this.scrollStart(args) { } |
Fires when scroll End | Property: chart.scrollEnd <ej-chart (scrollEnd)='scrollEnd($event)'> </ej-chart> this.scrollEnd(args) { } |
Property: chart.scrollEnd <ejs-chart (scrollEnd)='scrollEnd($event)'> </ejs-chart> this.scrollEnd(args) { } |
Fires when scroll Change | Property: chart.scrollChange <ej-chart (scrollChange)='scrollChange($event)'> </ej-chart> this.scrollChange(args) { } |
Property: chart.scrollChange <ejs-chart (scrollChange)='scrollChange($event)'> </ejs-chart> this.scrollChange(args) { } |
Fires when zoom complete | Property: chart.zoomComplete <ej-chart (zoomComplete)='zoomComplete($event)'> </ej-chart> this.zoomComplete(args) { } |
Property: chart.scrollChange <ejs-chart (zoomComplete)='zoomComplete($event)'> </ejs-chart> this.zoomComplete(args) { } |