Ej1 api migration in Angular Chart component
25 Jul 202424 minutes to read
This article describes the API migration process of {Component Name} component from Essential JS 1 to Essential JS 2.
Chart
| 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 = 'Material3'
|
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'
|
3DChart
| 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 |
Annotations
| 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'
|
Columns
| 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 } |
Rows
| 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 } |
Common Series Options
| 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 = { }
|
Crosshair
| 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 } }
|
Indicator
| 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';
|
Legend
| 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 |
PrimaryXAxis
| 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: [ { }]}
|
PrimaryYAxis
| 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: [ { }]}
|
Axes
| 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>
|
Series
| 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> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` | **Property:** *trendLines* ` ` ` ` ` ` ` ` </e-series>` `</e-series-collection>` `</ejs-chart>`` |
|
| 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 = { }
|
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 |
Error bar
| 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 }
|
Trendlines
| 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> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` | **Property:** *trendLines.type* ` ` ` ` ` ` ` ` </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> <br> ` </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> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` | **Property:** *trendLines.name* ` ` ` ` ` ` ` ` </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> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.period = 2 | **Property:** *trendLines.period* |
|
| polynomialOrder of trendline |
Property: trendlines.polynomialOrder <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [polynomialOrder]='polynomialOrder'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.polynomialOrder = 2 | **Property:** *trendLines.polynomialOrder* |
|
| backwardForecast of trendline |
Property: trendlines.backwardForecast <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [backwardForecast]='backwardForecast'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.backwardForecast = 2 | **Property:** *trendLines.backwardForecast* |
|
| forwardForecast of trendline |
Property: trendlines.forwardForecast <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [forwardForecast]='forwardForecast'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.forwardForecast = 2 | **Property:** *trendLines.forwardForecast* |
|
| width of trendline |
Property: trendlines.width <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [width]='width'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.width = 2 | **Property:** *trendLines.width* |
|
| intercept of trendline |
Property: trendlines.intercept <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [intercept]='intercept'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.intercept = 2 | **Property:** *trendLines.intercept* |
|
| fill of trendline |
Property: trendlines.fill <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [fill]='fill'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.fill = 'blue' | **Property:** *trendLines.fill* |
|
| dashArray of trendline |
Property: trendlines.dashArray <ej-chart> <e-series-collection><e-series><e-trendlines> <e-trendline [dashArray]='dashArray'> ` </e-trendline> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.dashArray = '10, 5' | **Property:** *trendLines.dashArray* |
|
| 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> <br> ` </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> <br> ` </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> <br> ` </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> <br> ` </e-series>` `</e-series-collection>` `</ej-chart>` this.tooltip = { } | **Property:** *trendLines.enableTooltip* |
Striplines
| 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 = { }
|
Multilevel labels
| 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 |
Methods
| 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) { }
|
Events
| 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) { }
|