Contents
Migration from Essential® JS 1
8 Dec 202424 minutes to read
This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2.
Annotation
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Rotation of annotation |
Property: e-annotations.angle <ej-chart id="chartContainer"> <e-annotations> <e-annotation angle="270"> </e-annotation> </e-annotations> </e-annotations> </ej-chart>
|
Property: Not applicable. |
| Annotations |
Property: e-annotations.content <ej-chart id="chartContainer"><e-annotations><e-annotation content="Chart"></e-annotation></e-annotations></ej-chart>
|
Property: e-chart-annotations.content <ejs-chart id="container"><e-chart-annotations><e-chart-annotation content="Chart"> </e-chart-annotation></e-chart-annotations></ejs-chart>
|
| Coordinate unit for annotation |
Property: e-annotations.coordinate-unit <ej-chart id="chartContainer"><e-annotations> <e-annotation coordinate-unit="Pixels"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotations.coordinateUnits <ejs-chart id="container" > <e-chart-annotations> <e-chart-annotation coordinateUnits="Pixel" > </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| HorizontalAlignment for annotation |
Property: e-annotations.horizontal-alignment <ej-chart id="chartContainer"> <e-annotations> <e-annotation horizontal-alignment="Left"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotations.horizontalAlignment <ejs-chart id="container" > <e-chart-annotations> <e-chart-annotation horizontalAlignment="Near"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| Margin for annotation |
Property: annotations.margin <ej-chart id="chartContainer"> <e-annotations> <e-annotation> <e-margin top="10" bottom="10" left="10" right="10"> </e-margin> </e-annotation> </e-annotations> </ej-chart>
|
Property: Not applicable |
| Opacity for annotation |
Property: e-annotations.opacity <ej-chart id="chartContainer"> <e-annotations> <e-annotation opacity="0.2"> </e-annotation> </e-annotations> </ej-chart>
|
Property: Not applicable |
| Region for annotation with respect to chart or series |
Property: e-annotations.region <ej-chart id="chartContainer"> <e-annotations> <e-annotation region="Series"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotations.region <ejs-chart id="container" > <e-chart-annotations> <e-chart-annotation region="Series"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| VerticalAlignment for annotation |
Property: e-annotation.vertical-alignment <ej-chart id="chartContainer"> <e-annotations> <e-annotation vertical-alignment="Middle" > </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotations.verticalAlignment <ejs-chart id="container"> <e-chart-annotations> <e-chart-annotation verticalAlignment="Top"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| Visibility of annotations |
Property: e-annotations.visible <ej-chart id="chartContainer"> <e-annotations> <e-annotation visible="true"> </e-annotation> </e-annotations> </ej-chart>
|
Not applicable |
| X offset for annotation |
Property: e-annotations.x <ej-chart id="chartContainer"> <e-annotations> <e-annotation x="170"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotations.x <ejs-chart id="container"> <e-chart-annotations> <e-chart-annotation x="250"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| X axis name in which annotation to be rendered |
Property: e-annotations.xAxisName <ej-chart id="chartContainer"> <e-annotations> <e-annotation xAxisName="xAxis"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotation.xAxisName <ejs-chart id="container"> <e-chart-annotations> <e-chart-annotation xAxisName="xAxis"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| Y offset for annotation |
Property: annotations.y <ej-chart id="chartContainer"> <e-annotations> <e-annotation y="170"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotations.y <ejs-chart id="container"> <e-chart-annotations> <e-chart-annotation y="250"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
| Y axis name in which annotation to be rendered |
Property: annotations.yAxisName <ej-chart id="chartContainer"> <e-annotations> <e-annotation yAxisName="yAxis"> </e-annotation> </e-annotations> </ej-chart>
|
Property: e-chart-annotation.yAxisName <ejs-chart id="container"> <e-chart-annotations> <e-chart-annotation yAxisName="yAxis"> </e-chart-annotation> </e-chart-annotations> </ejs-chart>
|
Columns
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Columns in chart |
Property: e-column-definitions <ej-chart id="chartContainer"> <e-column-definitions> </e-column-definitions> </ej-chart>
|
Property: e-chart-columns <ejs-chart id="lineContainer"> <e-chart-columns> </e-chart-columns> </ejs-chart>
|
| Unit |
Property: unit <ej-chart id="chartContainer"> <e-column-definitions> <e-column-definition unit="percentage"> </e-column-definition> <e-column-definition unit="percentage"> </e-column-definition> </e-column-definitions> </ej-chart>
|
Not Available |
| Width of columns in chart |
Property: column-width <ej-chart id="chartContainer"> <e-column-definitions> <e-column-definition column-width="50"> </e-column-definition> <e-column-definition column-width="50"> </e-column-definition> </e-column-definitions> </ej-chart>
|
Property: width <ejs-chart id="lineContainer"> <e-chart-columns> <e-chart-column width="50%"> </e-chart-column> </e-chart-columns> </ejs-chart>
|
| Line customization |
Property: line-color, line-width <ej-chart id="chartContainer"> <e-column-definitions> <e-column-definition line-color="Gray" line-width="0"> </e-column-definition> </ej-chart>
|
Property: border <ejs-chart id="lineContainer"> <e-chart-columns> <e-chart-column width="50%"> <e-border width="2" color="red"> </e-border> </e-chart-column> </e-chart-columns> </ejs-chart>
|
CommonSeriesOptions
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| CommonSeriesOptios |
Property: commonSeriesOptions <ejs-chart id="lineContainer"> <e-common-series-options> </e-common-series-options> </ejs-chart>
|
Not Applicable |
Crosshair
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Crosshair |
Property: visible <ej-chart id="chartContainer"> <e-crosshair visible="true"> </e-crosshair> </ej-chart>
|
Property: enable <ejs-chart id="lineContainer"> <e-chart-crosshairsettings enable="true"> </e-chart-crosshairsettings> <ejs-chart>
|
| TrackballTooltipSettings |
Property: e-trackball-tooltip-settings <ej-chart id="chartContainer"> <e-crosshair> <e-trackball-tooltip-settings> <e-border width="1" color="grey"> </e-border> </e-trackball-tooltip-settings> </e-crosshair> </ej-chart>
|
Not applicable |
| Marker |
Property: marker <ej-chart id="chartContainer"> <e-crosshair> <e-marker> <e-border width="1" color="grey"> </e-border> </e-marker> </e-crosshair> </ej-chart>
|
Not applicable |
| Crosshair line style |
Property: e-line <ej-chart id="chartContainer"> <e-crosshair> <e-line color="grey" width="2"> </e-line> </e-crosshair> </ej-chart>
|
Property: e-crosshairsettings-line <ejs-chart id="lineContainer"> <e-chart-crosshairsettings> <e-crosshairsettings-line width="4" color="green"> </e-crosshairsettings-line> </e-chart-crosshairsettings> </ejs-chart>
|
| Type |
Property: type<ej-chart id="chartContainer"> <e-crosshair type="Trackball"> </e-crosshair> </ej-chart>
|
Not applicable |
3D chart
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| 3d chart |
Property: enable3d <ej-chart id="container" enable3d="true"> </ej-chart>
|
Not applicable |
| Rotation of 3d chart |
Property: enable-rotation <ej-chart id="container" enable-rotation="true"> </ej-chart>
|
Not applicable |
| Depth |
Property: depth <ej-chart id="container" depth="120"> </ej-chart>
|
Not applicable |
Canvas rendering
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Canvas rendering |
Property: enable-canvas-rendering <ej-chart id="chartContainer" enable-canvas-rendering="true"> </ej-chart>
|
Not applicable |
Indicators
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Type of Indicator |
Property: type <ej-chart id="chartContainer"> <e-indicators> <e-indicator type="AccumulationDistribution"> </e-indicator> </e-indicators> </ej-chart>
|
Property: type <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator type="AccumulationDistribution"> </e-indicator> </e-indicators> </ejs-chart>
|
| Period for indicator |
Property : period <ej-chart id="chartContainer"> <e-indicators> <e-indicator period="14"> </e-indicator> </e-indicators> </ej-chart>
|
Property: period <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator period=3> </e-indicator> </e-indicators> </ejs-chart>
|
| %K value in stochastic indicator |
Property: kPeriod <ej-chart id="chartContainer"> <e-indicators> <e-indicator kPeriod="14"> </e-indicator> </e-indicators> </ej-chart>
|
Property: kPeriod <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator kPeriod=14> </e-indicator> </e-indicators> </ejs-chart>
|
| %D value in stochastic indicator |
Property: dPeriod <ej-chart id="chartContainer"> <e-indicators> <e-indicator dPeriod="14"> </e-indicator> </e-indicators> </ej-chart>
|
Property: dPeriod <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator dPeriod="14"> </e-indicator> </e-indicators> </ejs-chart>
|
| Shows overSold/overBought values | Not applicable |
Property: showZones <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator showZones="true"> </e-indicator> </e-indicators> </ejs-chart>
|
| Overbought value for RSI and stochastic indicator | Not applicable |
Property: overBought <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator overBought="80"> </e-indicator> </e-indicators> </ejs-chart>
|
| Oversold value for RSI and stochastic indicator | Not applicable |
Property: overSold <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator overSold="80"> </e-indicator> </e-indicators> </ejs-chart>
|
| Standard deviation |
Property: standardDeviations <ej-chart id="chartContainer"> <e-indicators> <e-indicator standardDeviations="2"> </e-indicator> </e-indicators> </ej-chart>
|
Property: standardDeviation <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator standardDeviation="4"> </e-indicator> </e-indicators> </ejs-chart>
|
| Field for indicator |
Property: field <ej-chart id="chartContainer"> <e-indicators> <e-indicator field="Close"> </e-indicator> </e-indicators> </ej-chart>
|
Property: field <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator field="Close"> </e-indicator> </e-indicators> </ejs-chart>
|
| Slow period for MACD indicator |
Property: shortPeriod <ej-chart id="chartContainer"> <e-indicators> <e-indicator shortPeriod="12"> </e-indicator> </e-indicators> </ej-chart>
|
Property: lowPeriod <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator slowPeriod=12> </e-indicator> </e-indicators> </ejs-chart>
|
| Fast period for MACD indicator |
Property: longPeriod <ej-chart id="chartContainer"> <e-indicators> <e-indicator longPeriod="26"> </e-indicator> </e-indicators> </ej-chart>
|
Property: fastPeriod <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator fastPeriod="26"> </e-indicator> </e-indicators> </ejs-chart>
|
| Line style for MACD indicator |
Property: e-macd-line <ej-chart id="chartContainer"> <e-indicators> <e-indicator> <e-macd-line width=2 fill= "red"> </e-macd-line> </e-indicator> </e-indicators> </ej-chart>
|
Property: e-technicalindicator-macdline <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator> <e-technicalindicator-macdline width=2 fill= "red"> </e-technicalindicator-macdline> </e-indicator> </e-indicators> </ejs-chart>
|
| Type of MACD indicator |
Property: macdType <ej-chart id="chartContainer"> <e-indicators> <e-indicator macdType="Both"> </e-indicator> </e-indicators> </ej-chart>
|
Property: macdType <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator macdType="Both"> </e-indicator> </e-indicators> </ejs-chart>
|
| Color of the positive bars in Macd indicators | Property: Not applicable |
Property: macdPositiveColor <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator macdPositiveColor="red"> </e-indicator> </e-indicators> </ejs-chart>
|
| Color of the negative bars in Macd indicators | Property: Not applicable |
Property: macdNegativeColor <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator macdNegativeColor="red"> </e-indicator> </e-indicators> </ejs-chart>
|
| Color for Bollinger bands | Property: Not applicable |
Property: bandColor <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator bandColor="red"> </e-indicator> </e-indicators> </ejs-chart>
|
| Appearance of upper line in indicator |
Property: e-upper-line <ej-chart id="chartContainer"> <e-indicators> <e-indicator> <e-upper-line color="#EECCAA" width="1"> </e-upper-line> </e-indicator> </e-indicators> </ej-chart>
|
Property: e-technicalindicator-upperline <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator> <e-technicalindicator-upperline color="#ffb735" width="1" dashArray= "10,5" type="Smooth"> </e-technicalindicator-upperline> </e-indicator> </e-indicators> </ejs-chart>
|
| Appearance of lower line in indicator |
Property: e-lower-line <ej-chart id="chartContainer"> <e-indicators> <e-indicator> <e-lower-line color="#EECCAA" width="1"> </e-lower-line> </e-indicator> </e-indicators> </ej-chart>
|
Property: e-technicalindicator-lowerline <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator> <e-technicalindicator-lowerline color="#ffb735" width="1" dashArray= "10,5" type="Smooth"> </e-technicalindicator-lowerline> </e-indicator> </e-indicators> </ejs-chart>
|
| Appearance of period line in indicator |
Property: e-period-line <ej-chart id="chartContainer"> <e-indicators> <e-indicator> <e-period-line color="#EECCAA" width="1"> </e-period-line> </e-indicator> </e-indicators> </ej-chart>
|
Property: e-technicalindicator-periodline <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator> <e-technicalindicator-periodline color="#ffb735" width="1" dashArray= "10,5" type="Smooth"> </e-technicalindicator-periodline> </e-indicator> </e-indicators> </ejs-chart>
|
| Name of the series for which indicator has to be drawn |
Property: series-name <ej-chart id="chartContainer"> <e-indicators> <e-indicator series-name=""> </e-indicator> </e-indicators> </ej-chart>
|
Property: seriesName <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator seriesName=""> </e-indicator> </e-indicators> </ejs-chart>
|
| Options to customize the histogram in MACD indicator |
Property: e-histogram <ej-chart id="chartContainer"> <e-indicators> <e-indicator> <e-histogram> </e-histogram> </e-indicator> </e-indicators> </ej-chart>
|
Property: Not applicable |
| Enabling animation |
Property: enableAnimation <ej-chart id="chartContainer"> <e-indicators> <e-indicator enableAnimation="true"> </e-indicator> </e-indicators> </ej-chart>
|
Property: e-indicator-animation.enable <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator> <e-indicator-animation enable="true"> </e-indicator-animation> </e-indicator> </e-indicators> </ejs-chart>
|
| Animation duration |
Property: animationDuration <ej-chart id="chartContainer"> <e-indicators> <e-indicator animationDuration="3000"> </e-indicator> </e-indicators> </ej-chart>
|
Property: e-indicator-animation.duration <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator> <e-indicator-animation duration=3000> </e-indicator-animation> </e-indicator> </e-indicators> </ejs-chart>
|
| Tooltip |
Property: e-tooltip <ej-chart id="chartContainer"> <e-indicators> <e-indicator> <e-tooltip visible="true"> </e-tooltip> </e-indicator> </e-indicators> </ej-chart>
|
Property: Not applicable |
| Trigger value of MACD indicator |
Property: trigger <ej-chart id="chartContainer"> <e-indicators> <e-indicator trigger=14> </e-indicator> </e-indicators> </ej-chart>
|
Property: Not applicable |
| Fill color for indicator |
Property: fill <ej-chart id="chartContainer"> <e-indicators> <e-indicator fill="#EEDDCC"> </e-indicator> </e-indicators> </ej-chart>
|
Property: fill <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator fill="red"> </e-indicator> </e-indicators> </ejs-chart>
|
| Width for indicator |
Property: width <ej-chart id="chartContainer"> <e-indicators> <e-indicator width=2> </e-indicator> </e-indicators> </ej-chart>
|
Property: width <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator width=2> </e-indicator> </e-indicators> </ejs-chart>
|
| xAxis Name of indicator |
Property: xAxisName <ej-chart id="chartContainer"> <e-indicators> <e-indicator xAxisName=""> </e-indicator> </e-indicators> </ej-chart>
|
Property: xAxisName <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator xAxisName=""> </e-indicator> </e-indicators> </ejs-chart>
|
| xAxis Name of indicator |
Property: yAxisName <ej-chart id="chartContainer"> <e-indicators> <e-indicator yAxisName=""> </e-indicator> </e-indicators> </ej-chart>
|
Property: yAxisName <ejs-chart id="ADIContainer"> <e-indicators> <e-indicator yAxisName=""> </e-indicator> </e-indicators> </ejs-chart>
|
| Visibility of indicator |
Property: visibility <ej-chart id="chartContainer"> <e-indicators> <e-indicator visibility="true"> </e-indicator> </e-indicators> </ej-chart>
|
Property: Not applicable |
primaryXAxis
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Alternate grid band |
Property: alternateGridBand <ej-chart id="chartContainer"> <e-primary-x-axis> <e-alternate-grid-band> </e-alternate-grid-band> </e-primary-x-axis> </ej-chart>
|
Not applicable |
| Axis line cross value |
Property: crosses-at <ej-chart id="chartContainer"> <e-primary-x-axis crosses-at="0"> </e-primary-x-axis> </ej-chart>
|
Property: crossesAt <ejs-chart id="Container"> <e-chart-primaryxaxis crossesAt="5"> </e-chart-primaryxaxis> </ejs-chart>
|
| Axis name with which the axis line has to be crossed |
Property: crosses-in-axis <ej-chart id="chartContainer"> <e-primary-x-axis crosses-in-axis=""> </e-primary-x-axis> </ej-chart>
|
Property: crossesInAxis <ejs-chart id="Container"> <e-chart-primaryxaxis crossesInAxis=""> </e-chart-primaryxaxis> </ejs-chart>
|
| Axis elements placed with axis line |
Property: show-next-to-axis-line <ej-chart id="chartContainer"> <e-primary-x-axis show-next-to-axis-line="false"> </e-primary-x-axis> </ej-chart>
|
Property: placeNextToAxisLine <ejs-chart id="Container"> <e-chart-primaryxaxis placeNextToAxisLine=""> </e-chart-primaryxaxis> </ejs-chart>
|
| Axis line style |
Property: e-axis-line.color <ej-chart id="chartContainer"> <e-primary-x-axis> <e-axis-line color="red"> </e-axis-line> </e-primary-x-axis> </ej-chart>
|
Property: e-linestyle.color <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-linestyle color="black"> </e-linestyle> </e-chart-primaryxaxis> </ejs-chart>
|
| Axis line dashArray |
Property: e-axis-line.dashArray <ej-chart id="chartContainer"> <e-primary-x-axis> <e-axis-line dashArray="10, 5"> </e-axis-line> </e-primary-x-axis> </ej-chart>
|
Property: e-linestyle.dashArray <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-linestyle dashArray="10, 5"> </e-linestyle> </e-chart-primaryxaxis> </ejs-chart>
|
| Offset for axis |
Property: e-axis-line.offset <ej-chart id="chartContainer"> <e-primary-x-axis> <e-axis-line offset="10"> </e-axis-line> </e-primary-x-axis> </ej-chart>
|
Property: plotOffset <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-linestyle plotOffset="10"> </e-linestyle> </e-chart-primaryxaxis> </ejs-chart>
|
| Visible of an axis |
Property: e-axis-line.visible <ej-chart id="chartContainer"> <e-primary-x-axis> <e-axis-line visible="false"> </e-axis-line> </e-primary-x-axis> </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-linestyle visible="false"> </e-linestyle> </e-chart-primaryxaxis> </ejs-chart>
|
| Width of an axis |
Property: e-axis-line.width <ej-chart id="chartContainer"> <e-primary-x-axis> <e-axis-line width="30"> </e-axis-line> </e-primary-x-axis> </ej-chart>
|
Property: width <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-linestyle width="30"> </e-linestyle> </e-chart-primaryxaxis> </ejs-chart>
|
| Column index of an axis |
Property: columnIndex <ej-chart id="chartContainer"> <e-primary-x-axis columnIndex=2> </e-primary-x-axis> </ej-chart>
|
Property: columnIndex <ejs-chart id="Container"> <e-chart-primaryxaxis columnIndex=2> </e-chart-primaryxaxis> </ejs-chart>
|
| Span of an axis to place horizontally or vertically |
Property: columnSpan <ej-chart id="chartContainer"> <e-primary-x-axis columnSpan=2> </e-primary-x-axis> </ej-chart>
|
Property: span <ejs-chart id="Container"> <e-chart-primaryxaxis span=2> </e-chart-primaryxaxis> </ejs-chart>
|
| Crosshair label of an axis |
Property: e-crosshair-label.visible <ej-chart id="chartContainer"> <e-primary-x-axis> <e-crosshair-label visible="true"> </e-crosshair-label> </e-primary-x-axis> </ej-chart>
|
Property: e-crosshairtooltip.enable <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-crosshairtooltip enable="true"> </e-crosshairtooltip> </e-chart-primaryxaxis> </ejs-chart>
|
| Crosshair label color of an axis | Property: Not applicable |
Property: e-crosshairtooltip.fill <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-crosshairtooltip fill="red"> </e-crosshairtooltip> </e-chart-primaryxaxis> </ejs-chart>
|
| Crosshair label text style | Property: Not applicable |
Property: e-crosshairtooltip.textStyle <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-crosshairtooltip textStyle=""> </e-crosshairtooltip> </e-chart-primaryxaxis> </ejs-chart>
|
| Desired interval count for primaryXAxis |
Property: desiredIntervals <ej-chart id="chartContainer"> <e-primary-x-axis desiredIntervals=4> </e-primary-x-axis> </ej-chart>
|
Property: desiredIntervals <ejs-chart id="Container"> <e-chart-primaryxaxis desiredIntervals=4 > </e-chart-primaryxaxis> </ejs-chart>
|
| Edges primaryXAxis |
Property: edgeLabelPlacement <ej-chart id="chartContainer"> <e-primary-x-axis edgeLabelPlacement="None"> </e-primary-x-axis> </ej-chart>
|
Property: edgeLabelPlacement <ejs-chart id="Container"> <e-chart-primaryxaxis edgeLabelPlacement="Shift" > </e-chart-primaryxaxis> </ejs-chart>
|
| Enables trim for axis labels |
Property: enable-trim <ej-chart id="chartContainer"> <e-primary-x-axis enable-trim="true"> </e-primary-x-axis> </ej-chart>
|
Property: enableTrim <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-crosshairtooltip enableTrim="true"> </e-crosshairtooltip> </e-chart-primaryxaxis> </ejs-chart>
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property: enableAutoIntervalOnZooming <ej-chart id="chartContainer"> <e-primary-x-axis enableAutoIntervalOnZooming="true"> </e-primary-x-axis> </ej-chart>
|
Property: enableAutoIntervalOnZooming <ejs-chart id="Container"> <e-chart-primaryxaxis enableAutoIntervalOnZooming="true"> </e-chart-primaryxaxis> </ejs-chart>
|
| Font style for primaryXAxis |
Property: e-font <ej-chart id="chartContainer"> <e-primary-x-axis> <e-font color="Blue" font-weight="Bold" font-family="Segoe UI" font-size="14px"> </e-font> </e-primary-x-axis> </ej-chart>
|
Property: titleStyle <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-titlestyle> </e-titlestyle> </e-chart-primaryxaxis> </ejs-chart>
|
| Indexed for category axis |
Property: is-indexed <ej-chart id="chartContainer"> <e-primary-x-axis is-indexed="true"> </e-primary-x-axis> </ej-chart>
|
Property: isIndexed <ejs-chart id="Container"> <e-chart-primaryxaxis isIndexed ="true"> </e-chart-primaryxaxis> </ejs-chart>
|
| Interval type for date time axis |
Property: interval-type <ej-chart id="chartContainer"> <e-primary-x-axis interval-type="Auto"> </e-primary-x-axis> </ej-chart>
|
Property: intervalType <ejs-chart id="Container"> <e-chart-primaryxaxis intervalType ="Auto"> </e-chart-primaryxaxis> </ejs-chart>
|
| Inversed axis |
Property: is-inversed <ej-chart id="chartContainer"> <e-primary-x-axis is-inversed="true"> </e-primary-x-axis> </ej-chart>
|
Property: isInversed <ejs-chart id="Container"> <e-chart-primaryxaxis isInversed ="true"> </e-chart-primaryxaxis> </ejs-chart>
|
| Custom label format |
Property: label-format <ej-chart id="chartContainer"> <e-primary-x-axis label-format="{value}K"> </e-primary-x-axis> </ej-chart>
|
Property: labelFormat <ejs-chart id="Container"> <e-chart-primaryxaxis labelFormat ="{value}K"> </e-chart-primaryxaxis> </ejs-chart>
|
| labelIntersectAction |
Property: label-intersect-action <ej-chart id="chartContainer"> <e-primary-x-axis label-intersect-action="Hide"> </e-primary-x-axis> </ej-chart>
|
Property: labelIntersectAction <ejs-chart id="Container"> <e-chart-primaryxaxis labelIntersectAction="Hide"> </e-chart-primaryxaxis> </ejs-chart>
|
| labelPosition |
Property: axislabel-position <ej-chart id="chartContainer"> <e-primary-x-axis axislabel-position="Inside"> </e-primary-x-axis> </ej-chart>
|
Property: labelPosition <ejs-chart id="Container"> <e-chart-primaryxaxis labelPosition="Inside"> </e-chart-primaryxaxis> </ejs-chart>
|
| labelPlacement for category axis |
Property: label-placement <ej-chart id="chartContainer"> <e-primary-x-axis label-placement="onTicks"> </e-primary-x-axis> </ej-chart>
|
Property: labelPlacement <ejs-chart id="Container"> <e-chart-primaryxaxis labelPlacement="onTicks"> </e-chart-primaryxaxis> </ejs-chart>
|
| Rotation of axis labels |
Property: label-rotation <ej-chart id="chartContainer"> <e-primary-x-axis label-rotation="45"> </e-primary-x-axis> </ej-chart>
|
Property: labelRotation <ejs-chart id="Container"> <e-chart-primaryxaxis labelRotation="45"> </e-chart-primaryxaxis> </ejs-chart>
|
| Axis label alignment |
Property: alignment <ej-chart id="chartContainer"> <e-primary-x-axis alignment="Center"> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Log base value for logarithmic axis |
Property: log-base <ej-chart id="chartContainer"> <e-primary-x-axis log-base="10"> </e-primary-x-axis> </ej-chart>
|
Property: logBase <ejs-chart id="Container"> <e-chart-primaryxaxis logBase="10"> </e-chart-primaryxaxis> </ejs-chart>
|
| Major grid line |
Property: e-major-grid-lines.visible <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-grid-lines visible="true"> </e-major-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MajorGridLines |
Property: e-major-grid-lines.width <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-grid-lines width="2"> </e-major-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-majorgridlines.width <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorgridlines width="2"> </e-majorgridlines> </e-chart-primaryxaxis> </ejs-chart>
|
| Color of MajorGridLines |
Property: e-major-grid-lines.color <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-grid-lines color="red"> </e-major-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-majorgridlines.color <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorgridlines color="red"> </e-majorgridlines> </e-chart-primaryxaxis> </ejs-chart>
|
| DashArray of MajorGridLines |
Property: e-major-grid-lines.dash-array <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-grid-lines dash-array="4,5"> </e-major-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-majorgridlines.dashArray <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorgridlines dashArray="4,5"> </e-majorgridlines> </e-chart-primaryxaxis> </ejs-chart>
|
| Opacity of MajorGridLines |
Property: e-major-grid-lines.opacity <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-grid-lines opacity="5"> </e-major-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Major Tick line |
Property: e-major-tick-lines.visible <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-tick-lines visible="true"> </e-major-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MajorTickLines |
Property: e-major-tick-lines.width <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-tick-lines width="2"> </e-major-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-majorticklines.width <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorticklines width="2"> </e-majorticklines> </e-chart-primaryxaxis> </ejs-chart>
|
| Height of MajorTickLines |
Property: e-major-tick-lines.size <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-tick-lines size="2"> </e-major-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-majorticklines.height <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorticklines height="2"> </e-majorticklines> </e-chart-primaryxaxis> </ejs-chart>
|
| Color of MajorTickLines |
Property: e-major-tick-lines.color <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-tick-lines color="red"> </e-major-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-majorticklines.color <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorticklines color="red"> </e-majorticklines> </e-chart-primaryxaxis> </ejs-chart>
|
| Opacity of MajorTickLines |
Property: e-major-tick-lines.opacity <ej-chart id="chartContainer"> <e-primary-x-axis> <e-major-tick-lines opacity="3"> </e-major-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| maximum labels of primaryXAxis |
Property: maximum-labels <ej-chart id="chartContainer"> <e-primary-x-axis maximum-labels="3"> </e-primary-x-axis> </ej-chart>
|
Property: maximumLabels <ejs-chart id="Container"> <e-chart-primaryxaxis maximumLabels="3"> </e-chart-primaryxaxis> </ejs-chart>
|
| maximum labels width of primaryXAxis to trim |
Property: maximum-label-width <ej-chart id="chartContainer"> <e-primary-x-axis maximum-label-width="3"> </e-primary-x-axis> </ej-chart>
|
Property: maximumLabelWidth <ejs-chart id="Container"> <e-chart-primaryxaxis maximumLabelWidth="3"> </e-chart-primaryxaxis> </ejs-chart>
|
| Minor grid line |
Property: e-minor-grid-lines.visible <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-grid-lines visible="true"> </e-minor-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MinorGridLines |
Property: e-minor-grid-lines.width <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-grid-lines width="2"> </e-minor-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-minorgridlines.width <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-minorgridlines width="2"> </e-minorgridlines> </e-chart-primaryxaxis> </ejs-chart>
|
| Color of MinorGridLines |
Property: e-minor-grid-lines.color <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-grid-lines color="red"> </e-minor-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-minorgridlines.color <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-minorgridlines color="red"> </e-minorgridlines> </e-chart-primaryxaxis> </ejs-chart>
|
| DashArray of MinorGridLines |
Property: e-minor-grid-lines.dash-array <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-grid-lines dash-array="4,5"> </e-minor-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-minorgridlines.dashArray <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-minorgridlines dashArray="4,5"> </e-minorgridlines> </e-chart-primaryxaxis> </ejs-chart>
|
| Opacity of MinorGridLines |
Property: e-minor-grid-lines.opacity <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-grid-lines opacity="5"> </e-minor-grid-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Minor Tick line |
Property: e-minor-tick-lines.visible <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-tick-lines visible="true"> </e-minor-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MinorTickLines |
Property: e-minor-tick-lines.width <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-tick-lines width="2"> </e-minor-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-minorticklines.width <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-minorticklines width="2"> </e-minorticklines> </e-chart-primaryxaxis> </ejs-chart>
|
| Height of MinorTickLines |
Property: e-minor-tick-lines.size <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-tick-lines size="2"> </e-minor-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-minorticklines.height <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-majorticklines height="2"> </e-minorticklines> </e-chart-primaryxaxis> </ejs-chart>
|
| Color of MinorTickLines |
Property: e-minor-tick-lines.color <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-tick-lines color="red"> </e-minor-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-minorticklines.color <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-minorticklines color="red"> </e-minorticklines> </e-chart-primaryxaxis> </ejs-chart>
|
| Opacity of MinorTickLines |
Property: e-major-tick-lines.opacity <ej-chart id="chartContainer"> <e-primary-x-axis> <e-minor-tick-lines opacity="3"> </e-minor-tick-lines> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Minor ticks per interval of primaryXAxis |
Property: minor-ticks-per-interval <ej-chart id="chartContainer"> <e-primary-x-axis minor-ticks-per-interval="3"> </e-primary-x-axis> </ej-chart>
|
Property: minorTicksPerInterval <ejs-chart id="Container"> <e-chart-primaryxaxis minorTicksPerInterval="3"> </e-chart-primaryxaxis> </ejs-chart>
|
| Name of the primaryXAxis |
Property: name <ej-chart id="chartContainer"> <e-primary-x-axis name="primaryXAxis"> </e-primary-x-axis> </ej-chart>
|
Property: name <ejs-chart id="Container"> <e-chart-primaryxaxis name="primaryXAxis"> </e-chart-primaryxaxis> </ejs-chart>
|
| Orientation of the primaryXAxis |
Property: orientation <ej-chart id="chartContainer"> <e-primary-x-axis orientation="Vertical"> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| Plot offset for primaryXAxis |
Property: plot-offset <ej-chart id="chartContainer"> <e-primary-x-axis plot-offset="0"> </e-primary-x-axis> </ej-chart>
|
Property: plotOffset <ejs-chart id="Container"> <e-chart-primaryxaxis plotOffset="0"> </e-chart-primaryxaxis> </ejs-chart>
|
| Minimum for primaryXAxis |
Property: e-range.min <ej-chart id="chartContainer"> <e-primary-x-axis> <e-range min="3"> </e-range> </e-primary-x-axis> </ej-chart>
|
Property: minimum <ejs-chart id="Container"> <e-chart-primaryxaxis minimum="4"> </e-chart-primaryxaxis> </ejs-chart>
|
| Maximum for primaryXAxis |
Property: e-range.max <ej-chart id="chartContainer"> <e-primary-x-axis> <e-range max="3"> </e-range> </e-primary-x-axis> </ej-chart>
|
Property: maximum <ejs-chart id="Container"> <e-chart-primaryxaxis maximum="4"> </e-chart-primaryxaxis> </ejs-chart>
|
| Interval for primaryXAxis |
Property: e-range.interval <ej-chart id="chartContainer"> <e-primary-x-axis> <e-range interval="3"> </e-range> </e-primary-x-axis> </ej-chart>
|
Property: interval <ejs-chart id="Container"> <e-chart-primaryxaxis interval="4"> </e-chart-primaryxaxis> </ejs-chart>
|
| RangePadding for primaryXAxis |
Property: range-padding <ej-chart id="chartContainer"> <e-primary-x-axis range-padding="None"> </e-primary-x-axis> </ej-chart>
|
Property: rangePadding <ejs-chart id="Container"> <e-chart-primaryxaxis rangePadding="None"> </e-chart-primaryxaxis> </ejs-chart>
|
| Rounding Places in primaryXAxis |
Property: rounding-places <ej-chart id="chartContainer"> <e-primary-x-axis rounding-places="2"> </e-primary-x-axis> </ej-chart>
|
Property: labelFormat <ejs-chart id="Container"> <e-chart-primaryxaxis labelFormat="n3"> </e-chart-primaryxaxis> </ejs-chart>
|
| ScrollBar settings of primaryXAxis |
Property: e-scrollbar-settings <ej-chart id="chartContainer"> <e-primary-x-axis> <e-scrollbar-settings visible="true"> </e-scrollbar-settings> </e-primary-x-axis> </ej-chart>
|
Property: Not Applicable |
| TickPosition in primaryXAxis |
Property: tick-lines-position <ej-chart id="chartContainer"> <e-primary-x-axis tick-lines-position="Inside"> </e-primary-x-axis> </ej-chart>
|
Property: tickPosition <ejs-chart id="Container"> <e-chart-primaryxaxis tickPosition="Inside"> </e-chart-primaryxaxis> </ejs-chart>
|
| ValueType of primaryXAxis |
Property: value-type <ej-chart id="chartContainer"> <e-primary-x-axis value-type="DateTime"> </e-primary-x-axis> </ej-chart>
|
Property: valueType <ejs-chart id="Container"> <e-chart-primaryxaxis valueType="DateTime"> </e-chart-primaryxaxis> </ejs-chart>
|
| visible of primaryXAxis |
Property: visible <ej-chart id="chartContainer"> <e-primary-x-axis visible="true"> </e-primary-x-axis> </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-chart-primaryxaxis visible="true"> </e-chart-primaryxaxis> </ejs-chart>
|
| ZoomFactor of primaryXAxis |
Property: zoom-factor <ej-chart id="chartContainer"> <e-primary-x-axis zoom-factor="0.3"> </e-primary-x-axis> </ej-chart>
|
Property: zoomFactor <ejs-chart id="Container"> <e-chart-primaryxaxis zoomFactor="0.3"> </e-chart-primaryxaxis> </ejs-chart>
|
| ZoomPosition of primaryXAxis |
Property: zoom-position <ej-chart id="chartContainer"> <e-primary-x-axis zoom-position="0.3"> </e-primary-x-axis> </ej-chart>
|
Property: zoomPosition <ejs-chart id="Container"> <e-chart-primaryxaxis zoomPosition="0.3"> </e-chart-primaryxaxis> </ejs-chart>
|
| labelBorder of primaryXAxis |
Property: e-border <ej-chart id="chartContainer"> <e-primary-x-axis> <e-border color="red" width="3"> </e-border> </e-primary-x-axis> </ej-chart>
|
Property: border <ejs-chart id="Container"> <e-chart-primaryxaxis> <e-border color="red" width="2"> </e-border> </e-chart-primaryxaxis> </ejs-chart>
|
| Title of primaryXAxis |
Property: e-title.text <ej-chart id="chartContainer"> <e-primary-x-axis> <e-title text="title"> </e-title> </e-primary-x-axis> </ej-chart>
|
Property: title <ejs-chart id="Container"> <e-chart-primaryxaxis title="Title"> </e-chart-primaryxaxis> </ejs-chart>
|
| StripLine of primaryXAxis |
Property: e-strip-lines <ej-chart id="chartContainer"> <e-primary-x-axis> <e-strip-lines > </e-strip-lines> </e-primary-x-axis> </ej-chart>
|
Property: e-primaryxaxis-striplines <ejs-chart id="Container"> <e-chart-primaryxaxis > <e-primaryxaxis-striplines> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </ejs-chart>
|
| Multilevel labels of primaryXAxis |
Property: e-multi-level-labels <ej-chart id="chartContainer"> <e-primary-x-axis> <e-multi-level-labels> </e-multi-level-labels> </e-primary-x-axis> </ej-chart>
|
Property: e-primaryxaxis-multilevellabels <ejs-chart id="Container"> <e-chart-primaryxaxis > <e-primaryxaxis-multilevellabels> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </ejs-chart>
|
| Skeleton for an axes | Property: Not Applicable |
Property: skeleton <ejs-chart id="Container"> <e-chart-primaryxaxis > <e-chart-axes><e-chart-axis skeleton="yMd"></e-chart-axis> </e-chart-axes> </e-chart-primaryxaxis> </ejs-chart>
|
| Skeleton type for an axes | Property: Not Applicable |
Property: skeletonType <ejs-chart id="Container"> <e-chart-primaryxaxis > <e-chart-axes><e-chart-axis skeletonType="Date"></e-chart-axis> </e-chart-axes> </e-chart-primaryxaxis> </ejs-chart>
|
primaryYAxis
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Alternate grid band |
Property: alternateGridBand <ej-chart id="chartContainer"> <e-primary-y-axis> <e-alternate-grid-band> </e-alternate-grid-band> </e-primary-y-axis> </ej-chart>
|
Not applicable |
| Axis line cross value |
Property: crosses-at <ej-chart id="chartContainer"> <e-primary-y-axis crosses-at="0"> </e-primary-y-axis> </ej-chart>
|
Property: crossesAt <ejs-chart id="Container"> <e-chart-primaryyaxis crossesAt="5"> </e-chart-primaryyaxis> </ejs-chart>
|
| Axis name with which the axis line has to be crossed |
Property: crosses-in-axis <ej-chart id="chartContainer"> <e-primary-y-axis crosses-in-axis=""> </e-primary-y-axis> </ej-chart>
|
Property: crossesInAxis <ejs-chart id="Container"> <e-chart-primaryyaxis crossesInAxis=""> </e-chart-primaryyaxis> </ejs-chart>
|
| Axis elements placed with axis line |
Property: show-next-to-axis-line <ej-chart id="chartContainer"> <e-primary-y-axis show-next-to-axis-line="false"> </e-primary-y-axis> </ej-chart>
|
Property: placeNextToAxisLine <ejs-chart id="Container"> <e-chart-primaryyaxis placeNextToAxisLine=""> </e-chart-primaryyaxis> </ejs-chart>
|
| Axis line style |
Property: e-axis-line.color <ej-chart id="chartContainer"> <e-primary-y-axis> <e-axis-line color="red"> </e-axis-line> </e-primary-y-axis> </ej-chart>
|
Property: e-linestyle.color <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-linestyle color="black"> </e-linestyle> </e-chart-primaryyaxis> </ejs-chart>
|
| Axis line dashArray |
Property: e-axis-line.dashArray <ej-chart id="chartContainer"> <e-primary-y-axis> <e-axis-line dashArray="10, 5"> </e-axis-line> </e-primary-y-axis> </ej-chart>
|
Property: e-linestyle.dashArray <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-linestyle dashArray="10, 5"> </e-flinestyle> </e-chart-primaryyaxis> </ejs-chart>
|
| Offset for axis |
Property: e-axis-line.offset <ej-chart id="chartContainer"> <e-primary-y-axis> <e-axis-line offset="10"> </e-axis-line> </e-primary-y-axis> </ej-chart>
|
Property: plotOffset <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-linestyle plotOffset="10"> </e-linestyle> </e-chart-primaryyaxis> </ejs-chart>
|
| Visible of an axis |
Property: e-axis-line.visible <ej-chart id="chartContainer"> <e-primary-y-axis> <e-axis-line visible="false"> </e-axis-line> </e-primary-y-axis> </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-linestyle visible="false"> </e-linestyle> </e-chart-primaryyaxis> </ejs-chart>
|
| Width of an axis |
Property: e-axis-line.width <ej-chart id="chartContainer"> <e-primary-y-axis> <e-axis-line width="30"> </e-axis-line> </e-primary-y-axis> </ej-chart>
|
Property: width <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-linestyle width="30"> </e-linestyle> </e-chart-primaryyaxis> </ejs-chart>
|
| Column index of an axis |
Property: columnIndex <ej-chart id="chartContainer"> <e-primary-y-axis columnIndex=2> </e-primary-y-axis> </ej-chart>
|
Property: columnIndex <ejs-chart id="Container"> <e-chart-primaryyaxis columnIndex=2> </e-chart-primaryyaxis> </ejs-chart>
|
| Span of an axis to place horizontally or vertically |
Property: columnSpan <ej-chart id="chartContainer"> <e-primary-y-axis columnSpan=2> </e-primary-y-axis> </ej-chart>
|
Property: span <ejs-chart id="Container"> <e-chart-primaryyaxis span=2> </e-chart-primaryyaxis> </ejs-chart>
|
| Crosshair label of an axis |
Property: e-crosshair-label.visible <ej-chart id="chartContainer"> <e-primary-y-axis> <e-crosshair-label visible="true"> </e-crosshair-label> </e-primary-y-axis> </ej-chart>
|
Property: e-crosshairtooltip.enable <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-crosshairtooltip enable="true"> </e-crosshairtooltip> </e-chart-primaryyaxis> </ejs-chart>
|
| Crosshair label color of an axis | Property: Not applicable |
Property: e-crosshairtooltip.fill <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-crosshairtooltip fill="red"> </e-crosshairtooltip> </e-chart-primaryyaxis> </ejs-chart>
|
| Crosshair label text style | Property: Not applicable |
Property: e-crosshairtooltip.textStyle <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-crosshairtooltip textStyle=""> </e-crosshairtooltip> </e-chart-primaryyaxis> </ejs-chart>
|
| Desired interval count for primaryyaxis |
Property: desiredIntervals <ej-chart id="chartContainer"> <e-primary-y-axis desiredIntervals=4> </e-primary-y-axis> </ej-chart>
|
Property: desiredIntervals <ejs-chart id="Container"> <e-chart-primaryyaxis desiredIntervals=4 > </e-chart-primaryyaxis> </ejs-chart>
|
| Edges primaryyaxis |
Property: edgeLabelPlacement <ej-chart id="chartContainer"> <e-primary-y-axis edgeLabelPlacement="None"> </e-primary-y-axis> </ej-chart>
|
Property: edgeLabelPlacement <ejs-chart id="Container"> <e-chart-primaryyaxis edgeLabelPlacement="Shift" > </e-chart-primaryyaxis> </ejs-chart>
|
| Enables trim for axis labels |
Property: enable-trim <ej-chart id="chartContainer"> <e-primary-y-axis enable-trim="true"> </e-primary-y-axis> </ej-chart>
|
Property: enableTrim <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-crosshairtooltip enableTrim="true"> </e-crosshairtooltip> </e-chart-primaryyaxis> </ejs-chart>
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property: enableAutoIntervalOnZooming <ej-chart id="chartContainer"> <e-primary-y-axis enableAutoIntervalOnZooming="true"> </e-primary-y-axis> </ej-chart>
|
Property: enableAutoIntervalOnZooming <ejs-chart id="Container"> <e-chart-primaryyaxis enableAutoIntervalOnZooming="true"> </e-chart-primaryyaxis> </ejs-chart>
|
| Font style for primaryyaxis |
Property: e-font <ej-chart id="chartContainer"> <e-primary-y-axis> <e-font color="Blue" font-weight="Bold" font-family="Segoe UI" font-size="14px"> </e-font> </e-primary-y-axis> </ej-chart>
|
Property: titleStyle <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-titlestyle> </e-titlestyle> </e-chart-primaryyaxis> </ejs-chart>
|
| Indexed for category axis |
Property: is-indexed <ej-chart id="chartContainer"> <e-primary-y-axis is-indexed="true"> </e-primary-y-axis> </ej-chart>
|
Property: isIndexed <ejs-chart id="Container"> <e-chart-primaryyaxis isIndexed ="true"> </e-chart-primaryyaxis> </ejs-chart>
|
| Interval type for date time axis |
Property: interval-type <ej-chart id="chartContainer"> <e-primary-y-axis interval-type="Auto"> </e-primary-y-axis> </ej-chart>
|
Property: intervalType <ejs-chart id="Container"> <e-chart-primaryyaxis intervalType ="Auto"> </e-chart-primaryyaxis> </ejs-chart>
|
| Inversed axis |
Property: is-inversed <ej-chart id="chartContainer"> <e-primary-y-axis is-inversed="true"> </e-primary-y-axis> </ej-chart>
|
Property: isInversed <ejs-chart id="Container"> <e-chart-primaryyaxis isInversed ="true"> </e-chart-primaryyaxis> </ejs-chart>
|
| Custom label format |
Property: label-format <ej-chart id="chartContainer"> <e-primary-y-axis label-format="{value}K"> </e-primary-y-axis> </ej-chart>
|
Property: labelFormat <ejs-chart id="Container"> <e-chart-primaryyaxis labelFormat ="{value}K"> </e-chart-primaryyaxis> </ejs-chart>
|
| labelIntersectAction |
Property: label-intersect-action <ej-chart id="chartContainer"> <e-primary-y-axis label-intersect-action="Hide"> </e-primary-y-axis> </ej-chart>
|
Property: labelIntersectAction <ejs-chart id="Container"> <e-chart-primaryyaxis labelIntersectAction="Hide"> </e-chart-primaryyaxis> </ejs-chart>
|
| labelPosition |
Property: axislabel-position <ej-chart id="chartContainer"> <e-primary-y-axis axislabel-position="Inside"> </e-primary-y-axis> </ej-chart>
|
Property: labelPosition <ejs-chart id="Container"> <e-chart-primaryyaxis labelPosition="Inside"> </e-chart-primaryyaxis> </ejs-chart>
|
| labelPlacement for category axis |
Property: label-placement <ej-chart id="chartContainer"> <e-primary-y-axis label-placement="onTicks"> </e-primary-y-axis> </ej-chart>
|
Property: labelPlacement <ejs-chart id="Container"> <e-chart-primaryyaxis labelPlacement="onTicks"> </e-chart-primaryyaxis> </ejs-chart>
|
| Rotation of axis labels |
Property: label-rotation <ej-chart id="chartContainer"> <e-primary-y-axis label-rotation="45"> </e-primary-y-axis> </ej-chart>
|
Property: labelRotation <ejs-chart id="Container"> <e-chart-primaryyaxis labelRotation="45"> </e-chart-primaryyaxis> </ejs-chart>
|
| Axis label alignment |
Property: alignment <ej-chart id="chartContainer"> <e-primary-y-axis alignment="Center"> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Log base value for logarithmic axis |
Property: log-base <ej-chart id="chartContainer"> <e-primary-y-axis log-base="10"> </e-primary-y-axis> </ej-chart>
|
Property: logBase <ejs-chart id="Container"> <e-chart-primaryyaxis logBase="10"> </e-chart-primaryyaxis> </ejs-chart>
|
| Major grid line |
Property: e-major-grid-lines.visible <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-grid-lines visible="true"> </e-major-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MajorGridLines |
Property: e-major-grid-lines.width <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-grid-lines width="2"> </e-major-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-majorgridlines.width <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorgridlines width="2"> </e-majorgridlines> </e-chart-primaryyaxis> </ejs-chart>
|
| Color of MajorGridLines |
Property: e-major-grid-lines.color <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-grid-lines color="red"> </e-major-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-majorgridlines.color <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorgridlines color="red"> </e-majorgridlines> </e-chart-primaryyaxis> </ejs-chart>
|
| DashArray of MajorGridLines |
Property: e-major-grid-lines.dash-array <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-grid-lines dash-array="4,5"> </e-major-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-majorgridlines.dashArray <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorgridlines dashArray="4,5"> </e-majorgridlines> </e-chart-primaryyaxis> </ejs-chart>
|
| Opacity of MajorGridLines |
Property: e-major-grid-lines.opacity <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-grid-lines opacity="5"> </e-major-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Major Tick line |
Property: e-major-tick-lines.visible <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-tick-lines visible="true"> </e-major-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MajorTickLines |
Property: e-major-tick-lines.width <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-tick-lines width="2"> </e-major-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-majorticklines.width <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorticklines width="2"> </e-majorticklines> </e-chart-primaryyaxis> </ejs-chart>
|
| Height of MajorTickLines |
Property: e-major-tick-lines.size <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-tick-lines size="2"> </e-major-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-majorticklines.height <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorticklines height="2"> </e-majorticklines> </e-chart-primaryyaxis> </ejs-chart>
|
| Color of MajorTickLines |
Property: e-major-tick-lines.color <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-tick-lines color="red"> </e-major-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-majorticklines.color <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorticklines color="red"> </e-majorticklines> </e-chart-primaryyaxis> </ejs-chart>
|
| Opacity of MajorTickLines |
Property: e-major-tick-lines.opacity <ej-chart id="chartContainer"> <e-primary-y-axis> <e-major-tick-lines opacity="3"> </e-major-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| maximum labels of primaryyaxis |
Property: maximum-labels <ej-chart id="chartContainer"> <e-primary-y-axis maximum-labels="3"> </e-primary-y-axis> </ej-chart>
|
Property: maximumLabels <ejs-chart id="Container"> <e-chart-primaryyaxis maximumLabels="3"> </e-chart-primaryyaxis> </ejs-chart>
|
| maximum labels width of primaryyaxis to trim |
Property: maximum-label-width <ej-chart id="chartContainer"> <e-primary-y-axis maximum-label-width="3"> </e-primary-y-axis> </ej-chart>
|
Property: maximumLabelWidth <ejs-chart id="Container"> <e-chart-primaryyaxis maximumLabelWidth="3"> </e-chart-primaryyaxis> </ejs-chart>
|
| Minor grid line |
Property: e-minor-grid-lines.visible <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-grid-lines visible="true"> </e-minor-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MinorGridLines |
Property: e-minor-grid-lines.width <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-grid-lines width="2"> </e-minor-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-minorgridlines.width <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-minorgridlines width="2"> </e-minorgridlines> </e-chart-primaryyaxis> </ejs-chart>
|
| Color of MinorGridLines |
Property: e-minor-grid-lines.color <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-grid-lines color="red"> </e-minor-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-minorgridlines.color <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-minorgridlines color="red"> </e-minorgridlines> </e-chart-primaryyaxis> </ejs-chart>
|
| DashArray of MinorGridLines |
Property: e-minor-grid-lines.dash-array <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-grid-lines dash-array="4,5"> </e-minor-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-minorgridlines.dashArray <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-minorgridlines dashArray="4,5"> </e-minorgridlines> </e-chart-primaryyaxis> </ejs-chart>
|
| Opacity of MinorGridLines |
Property: e-minor-grid-lines.opacity <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-grid-lines opacity="5"> </e-minor-grid-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Minor Tick line |
Property: e-minor-tick-lines.visible <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-tick-lines visible="true"> </e-minor-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MinorTickLines |
Property: e-minor-tick-lines.width <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-tick-lines width="2"> </e-minor-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-minorticklines.width <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-minorticklines width="2"> </e-minorticklines> </e-chart-primaryyaxis> </ejs-chart>
|
| Height of MinorTickLines |
Property: e-minor-tick-lines.size <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-tick-lines size="2"> </e-minor-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-minorticklines.height <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-majorticklines height="2"> </e-minorticklines> </e-chart-primaryyaxis> </ejs-chart>
|
| Color of MinorTickLines |
Property: e-minor-tick-lines.color <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-tick-lines color="red"> </e-minor-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-minorticklines.color <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-minorticklines color="red"> </e-minorticklines> </e-chart-primaryyaxis> </ejs-chart>
|
| Opacity of MinorTickLines |
Property: e-major-tick-lines.opacity <ej-chart id="chartContainer"> <e-primary-y-axis> <e-minor-tick-lines opacity="3"> </e-minor-tick-lines> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Minor ticks per interval of primaryyaxis |
Property: minor-ticks-per-interval <ej-chart id="chartContainer"> <e-primary-y-axis minor-ticks-per-interval="3"> </e-primary-y-axis> </ej-chart>
|
Property: minorTicksPerInterval <ejs-chart id="Container"> <e-chart-primaryyaxis minorTicksPerInterval="3"> </e-chart-primaryyaxis> </ejs-chart>
|
| Name of the primaryyaxis |
Property: name <ej-chart id="chartContainer"> <e-primary-y-axis name="primaryyaxis"> </e-primary-y-axis> </ej-chart>
|
Property: name <ejs-chart id="Container"> <e-chart-primaryyaxis name="primaryyaxis"> </e-chart-primaryyaxis> </ejs-chart>
|
| Orientation of the primaryyaxis |
Property: orientation <ej-chart id="chartContainer"> <e-primary-y-axis orientation="Vertical"> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| Plot offset for primaryyaxis |
Property: plot-offset <ej-chart id="chartContainer"> <e-primary-y-axis plot-offset="0"> </e-primary-y-axis> </ej-chart>
|
Property: plotOffset <ejs-chart id="Container"> <e-chart-primaryyaxis plotOffset="0"> </e-chart-primaryyaxis> </ejs-chart>
|
| Minimum for primaryyaxis |
Property: e-range.min <ej-chart id="chartContainer"> <e-primary-y-axis> <e-range min="3"> </e-range> </e-primary-y-axis> </ej-chart>
|
Property: minimum <ejs-chart id="Container"> <e-chart-primaryyaxis minimum="4"> </e-chart-primaryyaxis> </ejs-chart>
|
| Maximum for primaryyaxis |
Property: e-range.max <ej-chart id="chartContainer"> <e-primary-y-axis> <e-range max="3"> </e-range> </e-primary-y-axis> </ej-chart>
|
Property: maximum <ejs-chart id="Container"> <e-chart-primaryyaxis maximum="4"> </e-chart-primaryyaxis> </ejs-chart>
|
| Interval for primaryyaxis |
Property: e-range.interval <ej-chart id="chartContainer"> <e-primary-y-axis> <e-range interval="3"> </e-range> </e-primary-y-axis> </ej-chart>
|
Property: interval <ejs-chart id="Container"> <e-chart-primaryyaxis interval="4"> </e-chart-primaryyaxis> </ejs-chart>
|
| RangePadding for primaryyaxis |
Property: range-padding <ej-chart id="chartContainer"> <e-primary-y-axis range-padding="None"> </e-primary-y-axis> </ej-chart>
|
Property: rangePadding <ejs-chart id="Container"> <e-chart-primaryyaxis rangePadding="None"> </e-chart-primaryyaxis> </ejs-chart>
|
| Rounding Places in primaryyaxis |
Property: rounding-places <ej-chart id="chartContainer"> <e-primary-y-axis rounding-places="2"> </e-primary-y-axis> </ej-chart>
|
Property: labelFormat <ejs-chart id="Container"> <e-chart-primaryyaxis labelFormat="n3"> </e-chart-primaryyaxis> </ejs-chart>
|
| ScrollBar settings of primaryyaxis |
Property: e-scrollbar-settings <ej-chart id="chartContainer"> <e-primary-y-axis> <e-scrollbar-settings visible="true"> </e-scrollbar-settings> </e-primary-y-axis> </ej-chart>
|
Property: Not Applicable |
| TickPosition in primaryyaxis |
Property: tick-lines-position <ej-chart id="chartContainer"> <e-primary-y-axis tick-lines-position="Inside"> </e-primary-y-axis> </ej-chart>
|
Property: tickPosition <ejs-chart id="Container"> <e-chart-primaryyaxis tickPosition="Inside"> </e-chart-primaryyaxis> </ejs-chart>
|
| ValueType of primaryyaxis |
Property: value-type <ej-chart id="chartContainer"> <e-primary-y-axis value-type="DateTime"> </e-primary-y-axis> </ej-chart>
|
Property: valueType <ejs-chart id="Container"> <e-chart-primaryyaxis valueType="DateTime"> </e-chart-primaryyaxis> </ejs-chart>
|
| visible of primaryyaxis |
Property: visible <ej-chart id="chartContainer"> <e-primary-y-axis visible="true"> </e-primary-y-axis> </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-chart-primaryyaxis visible="true"> </e-chart-primaryyaxis> </ejs-chart>
|
| ZoomFactor of primaryyaxis |
Property: zoom-factor <ej-chart id="chartContainer"> <e-primary-y-axis zoom-factor="0.3"> </e-primary-y-axis> </ej-chart>
|
Property: zoomFactor <ejs-chart id="Container"> <e-chart-primaryyaxis zoomFactor="0.3"> </e-chart-primaryyaxis> </ejs-chart>
|
| ZoomPosition of primaryyaxis |
Property: zoom-position <ej-chart id="chartContainer"> <e-primary-y-axis zoom-position="0.3"> </e-primary-y-axis> </ej-chart>
|
Property: zoomPosition <ejs-chart id="Container"> <e-chart-primaryyaxis zoomPosition="0.3"> </e-chart-primaryyaxis> </ejs-chart>
|
| labelBorder of primaryyaxis |
Property: e-border <ej-chart id="chartContainer"> <e-primary-y-axis> <e-border color="red" width="3"> </e-border> </e-primary-y-axis> </ej-chart>
|
Property: border <ejs-chart id="Container"> <e-chart-primaryyaxis> <e-border color="red" width="2"> </e-border> </e-chart-primaryyaxis> </ejs-chart>
|
| Title of primaryyaxis |
Property: e-title.text <ej-chart id="chartContainer"> <e-primary-y-axis> <e-title text="title"> </e-title> </e-primary-y-axis> </ej-chart>
|
Property: title <ejs-chart id="Container"> <e-chart-primaryyaxis title="Title"> </e-chart-primaryyaxis> </ejs-chart>
|
| StripLine of primaryyaxis |
Property: e-strip-lines <ej-chart id="chartContainer"> <e-primary-y-axis> <e-strip-lines > </e-strip-lines> </e-primary-y-axis> </ej-chart>
|
Property: e-primaryyaxis-striplines <ejs-chart id="Container"> <e-chart-primaryyaxis > <e-primaryyaxis-striplines> </e-primaryyaxis-striplines> </e-chart-primaryyaxis> </ejs-chart>
|
| Multilevel labels of primaryyaxis |
Property: e-multi-level-labels <ej-chart id="chartContainer"> <e-primary-y-axis> <e-multi-level-labels> </e-multi-level-labels> </e-primary-y-axis> </ej-chart>
|
Property: e-primaryyaxis-multilevellabels <ejs-chart id="Container"> <e-chart-primaryyaxis > <e-primaryyaxis-multilevellabels> </e-primaryyaxis-multilevellabels> </e-chart-primaryyaxis> </ejs-chart>
|
| Skeleton for an axes | Property: Not Applicable |
Property: skeleton <ejs-chart id="Container"> <e-chart-primaryyaxis > <e-chart-axes><e-chart-axis skeleton="yMd"></e-chart-axis> </e-chart-axes> </e-chart-primaryyaxis> </ejs-chart>
|
| Skeleton type for an axes | Property: Not Applicable |
Property: skeletonType <ejs-chart id="Container"> <e-chart-primaryyaxis > <e-chart-axes><e-chart-axis skeletonType="Date"></e-chart-axis> </e-chart-axes> </e-chart-primaryyaxis> </ejs-chart>
|
Axes
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Alternate grid band |
Property: alternateGridBand <ej-chart id="chartContainer"> <e-axes><e-axis > <e-alternate-grid-band> </e-alternate-grid-band> </e-axes></e-axis > </ej-chart>
|
Not applicable |
| Axis line cross value |
Property: crosses-at <ej-chart id="chartContainer"> <e-axes><e-axis crosses-at="0"> </e-axes></e-axis > </ej-chart>
|
Property: crossesAt <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis crossesAt="5"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Axis name with which the axis line has to be crossed |
Property: crosses-in-axis <ej-chart id="chartContainer"> <e-axes><e-axis crosses-in-axis=""> </e-axes></e-axis > </ej-chart>
|
Property: crossesInAxis <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis crossesInAxis=""> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Axis elements placed with axis line |
Property: show-next-to-axis-line <ej-chart id="chartContainer"> <e-axes><e-axis show-next-to-axis-line="false"> </e-axes></e-axis > </ej-chart>
|
Property: placeNextToAxisLine <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis placeNextToAxisLine=""> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Axis line style |
Property: e-axis-line.color <ej-chart id="chartContainer"> <e-axes><e-axis > <e-axis-line color="red"> </e-axis-line> </e-axes></e-axis > </ej-chart>
|
Property: e-linestyle.color <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-linestyle color="black"> </e-linestyle> </e-chart-axes></e-chart-axis> </ejs-chart>
|
| Axis line dashArray |
Property: e-axis-line.dashArray <ej-chart id="chartContainer"> <e-axes><e-axis > <e-axis-line dashArray="10, 5"> </e-axis-line> </e-axes></e-axis > </ej-chart>
|
Property: e-linestyle.dashArray <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-linestyle dashArray="10, 5"> </e-flinestyle> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Offset for axis |
Property: e-axis-line.offset <ej-chart id="chartContainer"> <e-axes><e-axis > <e-axis-line offset="10"> </e-axis-line> </e-axes></e-axis > </ej-chart>
|
Property: plotOffset <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-linestyle plotOffset="10"> </e-linestyle> </e-chart-axes></e-chart-axis </ejs-chart>
|
| Visible of an axis |
Property: e-axis-line.visible <ej-chart id="chartContainer"> <e-axes><e-axis > <e-axis-line visible="false"> </e-axis-line> </e-axes></e-axis > </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-linestyle visible="false"> </e-linestyle> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Width of an axis |
Property: e-axis-line.width <ej-chart id="chartContainer"> <e-axes><e-axis > <e-axis-line width="30"> </e-axis-line> </e-axes></e-axis > </ej-chart>
|
Property: width <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-linestyle width="30"> </e-linestyle> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Column index of an axis |
Property: columnIndex <ej-chart id="chartContainer"> <e-axes><e-axis columnIndex=2> </e-axes></e-axis > </ej-chart>
|
Property: columnIndex <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis columnIndex=2> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Span of an axis to place horizontally or vertically |
Property: columnSpan <ej-chart id="chartContainer"> <e-axes><e-axis columnSpan=2> </e-axes></e-axis > </ej-chart>
|
Property: span <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis span=2> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Crosshair label of an axis |
Property: e-crosshair-label.visible <ej-chart id="chartContainer"> <e-axes><e-axis > <e-crosshair-label visible="true"> </e-crosshair-label> </e-axes></e-axis > </ej-chart>
|
Property: e-crosshairtooltip.enable <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-crosshairtooltip enable="true"> </e-crosshairtooltip> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Crosshair label color of an axis | Property: Not applicable |
Property: e-crosshairtooltip.fill <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-crosshairtooltip fill="red"> </e-crosshairtooltip> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Crosshair label text style | Property: Not applicable |
Property: e-crosshairtooltip.textStyle <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-crosshairtooltip textStyle=""> </e-crosshairtooltip> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Desired interval count for axes |
Property: desiredIntervals <ej-chart id="chartContainer"> <e-axes><e-axis desiredIntervals=4> </e-axes></e-axis > </ej-chart>
|
Property: desiredIntervals <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis desiredIntervals=4 > </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Edges axes |
Property: edgeLabelPlacement <ej-chart id="chartContainer"> <e-axes><e-axis edgeLabelPlacement="None"> </e-axes></e-axis > </ej-chart>
|
Property: edgeLabelPlacement <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis edgeLabelPlacement="Shift" > </e-chart-axes> </e-chart-axis </ejs-chart>
|
| Enables trim for axis labels |
Property: enable-trim <ej-chart id="chartContainer"> <e-axes><e-axis enable-trim="true"> </e-axes></e-axis > </ej-chart>
|
Property: enableTrim <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-crosshairtooltip enableTrim="true"> </e-crosshairtooltip> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Specifies the interval of the axis according to the zoomed data of the chart |
Property: enableAutoIntervalOnZooming <ej-chart id="chartContainer"> <e-axes><e-axis enableAutoIntervalOnZooming="true"> </e-axes></e-axis > </ej-chart>
|
Property: enableAutoIntervalOnZooming <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis enableAutoIntervalOnZooming="true"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Font style for axes |
Property: e-font <ej-chart id="chartContainer"> <e-axes><e-axis > <e-font color="Blue" font-weight="Bold" font-family="Segoe UI" font-size="14px"> </e-font> </e-axes></e-axis > </ej-chart>
|
Property: titleStyle <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-titlestyle> </e-titlestyle> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Indexed for category axis |
Property: is-indexed <ej-chart id="chartContainer"> <e-axes><e-axis is-indexed="true"> </e-axes></e-axis > </ej-chart>
|
Property: isIndexed <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis isIndexed ="true"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Interval type for date time axis |
Property: interval-type <ej-chart id="chartContainer"> <e-axes><e-axis interval-type="Auto"> </e-axes></e-axis > </ej-chart>
|
Property: intervalType <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis intervalType ="Auto"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Inversed axis |
Property: is-inversed <ej-chart id="chartContainer"> <e-axes><e-axis is-inversed="true"> </e-axes></e-axis > </ej-chart>
|
Property: isInversed <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis isInversed ="true"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Custom label format |
Property: label-format <ej-chart id="chartContainer"> <e-axes><e-axis label-format="{value}K"> </e-axes></e-axis > </ej-chart>
|
Property: labelFormat <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis labelFormat ="{value}K"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| labelIntersectAction |
Property: label-intersect-action <ej-chart id="chartContainer"> <e-axes><e-axis label-intersect-action="Hide"> </e-axes></e-axis > </ej-chart>
|
Property: labelIntersectAction <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis labelIntersectAction="Hide"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| labelPosition |
Property: axislabel-position <ej-chart id="chartContainer"> <e-axes><e-axis axislabel-position="Inside"> </e-axes></e-axis > </ej-chart>
|
Property: labelPosition <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis labelPosition="Inside"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| labelPlacement for category axis |
Property: label-placement <ej-chart id="chartContainer"> <e-axes><e-axis label-placement="onTicks"> </e-axes></e-axis > </ej-chart>
|
Property: labelPlacement <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis labelPlacement="onTicks"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Rotation of axis labels |
Property: label-rotation <ej-chart id="chartContainer"> <e-axes><e-axis label-rotation="45"> </e-axes></e-axis > </ej-chart>
|
Property: labelRotation <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis labelRotation="45"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Axis label alignment |
Property: alignment <ej-chart id="chartContainer"> <e-axes><e-axis alignment="Center"> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Log base value for logarithmic axis |
Property: log-base <ej-chart id="chartContainer"> <e-axes><e-axis log-base="10"> </e-axes></e-axis > </ej-chart>
|
Property: logBase <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis logBase="10"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Major grid line |
Property: e-major-grid-lines.visible <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-grid-lines visible="true"> </e-major-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Width of MajorGridLines |
Property: e-major-grid-lines.width <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-grid-lines width="2"> </e-major-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-majorgridlines.width <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorgridlines width="2"> </e-majorgridlines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Color of MajorGridLines |
Property: e-major-grid-lines.color <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-grid-lines color="red"> </e-major-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-majorgridlines.color <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorgridlines color="red"> </e-majorgridlines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| DashArray of MajorGridLines |
Property: e-major-grid-lines.dash-array <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-grid-lines dash-array="4,5"> </e-major-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-majorgridlines.dashArray <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorgridlines dashArray="4,5"> </e-majorgridlines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Opacity of MajorGridLines |
Property: e-major-grid-lines.opacity <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-grid-lines opacity="5"> </e-major-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Major Tick line |
Property: e-major-tick-lines.visible <ej-chart id="chartContainer"> <e-axes><e-axis> <e-major-tick-lines visible="true"> </e-major-tick-lines> </e-axes></e-axis> </ej-chart>
|
Property: Not Applicable |
| Width of MajorTickLines |
Property: e-major-tick-lines.width <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-tick-lines width="2"> </e-major-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-majorticklines.width <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorticklines width="2"> </e-majorticklines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Height of MajorTickLines |
Property: e-major-tick-lines.size <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-tick-lines size="2"> </e-major-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-majorticklines.height <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorticklines height="2"> </e-majorticklines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Color of MajorTickLines |
Property: e-major-tick-lines.color <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-tick-lines color="red"> </e-major-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-majorticklines.color <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorticklines color="red"> </e-majorticklines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Opacity of MajorTickLines |
Property: e-major-tick-lines.opacity <ej-chart id="chartContainer"> <e-axes><e-axis > <e-major-tick-lines opacity="3"> </e-major-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| maximum labels of axes |
Property: maximum-labels <ej-chart id="chartContainer"> <e-axes><e-axis maximum-labels="3"> </e-axes></e-axis > </ej-chart>
|
Property: maximumLabels <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis maximumLabels="3"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| maximum labels width of axes to trim |
Property: maximum-label-width <ej-chart id="chartContainer"> <e-axes><e-axis maximum-label-width="3"> </e-axes></e-axis > </ej-chart>
|
Property: maximumLabelWidth <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis maximumLabelWidth="3"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Minor grid line |
Property: e-minor-grid-lines.visible <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-grid-lines visible="true"> </e-minor-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Width of MinorGridLines |
Property: e-minor-grid-lines.width <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-grid-lines width="2"> </e-minor-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-minorgridlines.width <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-minorgridlines width="2"> </e-minorgridlines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Color of MinorGridLines |
Property: e-minor-grid-lines.color <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-grid-lines color="red"> </e-minor-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-minorgridlines.color <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-minorgridlines color="red"> </e-minorgridlines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| DashArray of MinorGridLines |
Property: e-minor-grid-lines.dash-array <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-grid-lines dash-array="4,5"> </e-minor-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-minorgridlines.dashArray <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-minorgridlines dashArray="4,5"> </e-minorgridlines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Opacity of MinorGridLines |
Property: e-minor-grid-lines.opacity <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-grid-lines opacity="5"> </e-minor-grid-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Minor Tick line |
Property: e-minor-tick-lines.visible <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-tick-lines visible="true"> </e-minor-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Width of MinorTickLines |
Property: e-minor-tick-lines.width <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-tick-lines width="2"> </e-minor-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-minorticklines.width <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-minorticklines width="2"> </e-minorticklines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Height of MinorTickLines |
Property: e-minor-tick-lines.size <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-tick-lines size="2"> </e-minor-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-minorticklines.height <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-majorticklines height="2"> </e-minorticklines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Color of MinorTickLines |
Property: e-minor-tick-lines.color <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-tick-lines color="red"> </e-minor-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-minorticklines.color <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-minorticklines color="red"> </e-minorticklines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Opacity of MinorTickLines |
Property: e-major-tick-lines.opacity <ej-chart id="chartContainer"> <e-axes><e-axis > <e-minor-tick-lines opacity="3"> </e-minor-tick-lines> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Minor ticks per interval of axes |
Property: minor-ticks-per-interval <ej-chart id="chartContainer"> <e-axes><e-axis minor-ticks-per-interval="3"> </e-axes></e-axis > </ej-chart>
|
Property: minorTicksPerInterval <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis minorTicksPerInterval="3"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Name of the axes |
Property: name <ej-chart id="chartContainer"> <e-axes><e-axis name="axes "> </e-axes></e-axis > </ej-chart>
|
Property: name <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis name="axes "> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Orientation of the axes |
Property: orientation <ej-chart id="chartContainer"> <e-axes><e-axis orientation="Vertical"> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| Plot offset for axes |
Property: plot-offset <ej-chart id="chartContainer"> <e-axes><e-axis plot-offset="0"> </e-axes></e-axis > </ej-chart>
|
Property: plotOffset <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis plotOffset="0"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Minimum for axes |
Property: e-range.min <ej-chart id="chartContainer"> <e-axes><e-axis > <e-range min="3"> </e-range> </e-axes></e-axis > </ej-chart>
|
Property: minimum <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis minimum="4"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Maximum for axes |
Property: e-range.max <ej-chart id="chartContainer"> <e-axes><e-axis > <e-range max="3"> </e-range> </e-axes></e-axis > </ej-chart>
|
Property: maximum <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis maximum="4"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Interval for axes |
Property: e-range.interval <ej-chart id="chartContainer"> <e-axes><e-axis > <e-range interval="3"> </e-range> </e-axes></e-axis > </ej-chart>
|
Property: interval <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis interval="4"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| RangePadding for axes |
Property: range-padding <ej-chart id="chartContainer"> <e-axes><e-axis range-padding="None"> </e-axes></e-axis > </ej-chart>
|
Property: rangePadding <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis rangePadding="None"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Rounding Places in axes |
Property: rounding-places <ej-chart id="chartContainer"> <e-axes><e-axis rounding-places="2"> </e-axes></e-axis > </ej-chart>
|
Property: labelFormat <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis labelFormat="n3"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| ScrollBar settings of axes |
Property: e-scrollbar-settings <ej-chart id="chartContainer"> <e-axes><e-axis > <e-scrollbar-settings visible="true"> </e-scrollbar-settings> </e-axes></e-axis > </ej-chart>
|
Property: Not Applicable |
| TickPosition in axes |
Property: tick-lines-position <ej-chart id="chartContainer"> <e-axes><e-axis tick-lines-position="Inside"> </e-axes></e-axis > </ej-chart>
|
Property: tickPosition <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis tickPosition="Inside"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| ValueType of axes |
Property: value-type <ej-chart id="chartContainer"> <e-axes><e-axis value-type="DateTime"> </e-axes></e-axis > </ej-chart>
|
Property: valueType <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis valueType="DateTime"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| visible of axes |
Property: visible <ej-chart id="chartContainer"> <e-axes><e-axis visible="true"> </e-axes></e-axis > </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis visible="true"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| ZoomFactor of axes |
Property: zoom-factor <ej-chart id="chartContainer"> <e-axes><e-axis zoom-factor="0.3"> </e-axes></e-axis > </ej-chart>
|
Property: zoomFactor <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis zoomFactor="0.3"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| ZoomPosition of axes |
Property: zoom-position <ej-chart id="chartContainer"> <e-axes><e-axis zoom-position="0.3"> </e-axes></e-axis > </ej-chart>
|
Property: zoomPosition <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis zoomPosition="0.3"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| labelBorder of axes |
Property: e-border <ej-chart id="chartContainer"> <e-axes><e-axis > <e-border color="red" width="3"> </e-border> </e-axes></e-axis > </ej-chart>
|
Property: border <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis> <e-border color="red" width="2"> </e-border> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Title of axes |
Property: e-title.text <ej-chart id="chartContainer"> <e-axes><e-axis > <e-title text="title"> </e-title> </e-axes></e-axis > </ej-chart>
|
Property: title <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis title="Title"> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| StripLine of axes |
Property: e-strip-lines <ej-chart id="chartContainer"> <e-axes><e-axis > <e-strip-lines > </e-strip-lines> </e-axes></e-axis > </ej-chart>
|
Property: e-axes -striplines <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis > <e-axes -striplines> </e-axes -striplines> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Multilevel labels of axes |
Property: e-multi-level-labels <ej-chart id="chartContainer"> <e-axes><e-axis > <e-multi-level-labels> </e-multi-level-labels> </e-axes></e-axis > </ej-chart>
|
Property: e-axes -multilevellabels <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis > <e-axes -multilevellabels> </e-axes -multilevellabels> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Skeleton for an axes | Property: Not Applicable |
Property: skeleton <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis > <e-chart-axes><e-chart-axis skeleton="yMd"></e-chart-axis> </e-chart-axes> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
| Skeleton type for an axes | Property: Not Applicable |
Property: skeletonType <ejs-chart id="Container"> <e-chart-axes> <e-chart-axis > <e-chart-axes><e-chart-axis skeletonType="Date"></e-chart-axis> </e-chart-axes> </e-chart-axes> </e-chart-axis> </ejs-chart>
|
Series
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| BearFillColor |
Property: bear-fill-color <ej-chart id="chartContainer"> <e-chart-series> <e-series bear-fill-color="red"> </e-series> </e-chart-series> </ej-chart>
|
Property: bearFillColor <ejs-chart id="Container"> <e-series-collection> <e-series bearFillColor="red"> </e-series> </e-series-collection> </ejs-chart>
|
| Border |
Property: e-border <ej-chart id="chartContainer"> <e-chart-series> <e-series > <e-border color="red" dash-array="4,5" width="3"> </e-border> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-border <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-border color="red" width="2"> </e-series-border> </e-series> </e-series-collection> </ejs-chart>
|
| BoxPlotMode |
Property: box-plot-mode <ej-chart id="chartContainer"> <e-chart-series> <e-series box-plot-mode="Exclusive"> </e-series> </e-chart-series> </ej-chart>
|
Property: boxPlotMode <ejs-chart id="Container"> <e-series-collection> <e-series boxPlotMode="Exclusive"> </e-series> </e-series-collection> </ejs-chart>
|
| Minimum radius of Bubble series |
Property: e-bubble-options.min-Radius <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-bubble-options min-Radius="10"> </e-bubble-options> </e-series> </e-chart-series> </ej-chart>
|
Property: minRadius <ejs-chart id="Container"> <e-series-collection> <e-series minRadius="4"> </e-series> </e-series-collection> </ejs-chart>
|
| Maximum radius of Bubble series |
Property: e-bubble-options.max-Radius <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-bubble-options max-Radius="10"> </e-bubble-options> </e-series> </e-chart-series> </ej-chart>
|
Property: maxRadius <ejs-chart id="Container"> <e-series-collection> <e-series maxRadius="4"> </e-series> </e-series-collection> </ejs-chart>
|
| BullFillColor |
Property: bull-fill-color <ej-chart id="chartContainer"> <e-chart-series> <e-series bull-fill-color="red"> </e-series> </e-chart-series> </ej-chart>
|
Property: bullFillColor <ejs-chart id="Container"> <e-series-collection> <e-series bullFillColor="red"> </e-series> </e-series-collection> </ejs-chart>
|
| Cardinal spline tension for spline series |
Property: cardinal-spline-tension <ej-chart id="chartContainer"> <e-chart-series> <e-series cardinal-spline-tension="0.5"> </e-series> </e-chart-series> </ej-chart>
|
Property: cardinalSplineTension <ejs-chart id="Container"> <e-series-collection> <e-series cardinalSplineTension="0.5"> </e-series> </e-series-collection> </ejs-chart>
|
| Column Width for rectangle series |
Property: column-width <ej-chart id="chartContainer"> <e-chart-series> <e-series column-width="2"> </e-series> </e-chart-series> </ej-chart>
|
Property: columnWidth <ejs-chart id="Container"> <e-series-collection> <e-series columnWidth="5"> </e-series> </e-series-collection> </ejs-chart>
|
| Column spacing for rectangle series |
Property: column-spacing <ej-chart id="chartContainer"> <e-chart-series> <e-series column-spacing="2"> </e-series> </e-chart-series> </ej-chart>
|
Property: columnSpacing <ejs-chart id="Container"> <e-series-collection> <e-series columnSpacing="5"> </e-series> </e-series-collection> </ejs-chart>
|
| Topleft radius for rectangle series |
Property: e-corner-radius.top-left <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-corner-radius top-left="0"> </e-corner-radius> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-cornerradius.topLeft <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-cornerradius topLeft="0"> </e-series-cornerradius> </e-series> </e-series-collection> </ejs-chart>
|
| TopRight radius for rectangle series |
Property: e-corner-radius.top-right <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-corner-radius top-right="0"> </e-corner-radius> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-cornerradius.topRight <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-cornerradius topRight="0"> </e-series-cornerradius> </e-series> </e-series-collection> </ejs-chart>
|
| BottomRight radius for rectangle series |
Property: e-corner-radius.bottom-right <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-corner-radius bottom-right="0"> </e-corner-radius> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-cornerradius.bottomRight <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-cornerradius bottomRight="0"> </e-series-cornerradius> </e-series> </e-series-collection> </ejs-chart>
|
| BottomLeft radius for rectangle series |
Property: e-corner-radius.bottom-left <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-corner-radius bottom-left="0"> </e-corner-radius> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-cornerradius.bottomLeft <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-cornerradius bottomLeft="0"> </e-series-cornerradius> </e-series> </e-series-collection> </ejs-chart>
|
| DashArray property |
Property: dash-array <ej-chart id="chartContainer"> <e-chart-series> <e-series dash-array="2,3"> </e-series> </e-chart-series> </ej-chart>
|
Property: dashArray <ejs-chart id="Container"> <e-series-collection> <e-series dashArray="4,5"> </e-series> </e-series-collection> </ejs-chart>
|
| DataSource for series |
Property: dataSource <ej-chart id="chartContainer"> <e-chart-series> <e-series dataSource=""> </e-series> </e-chart-series> </ej-chart>
|
Property: dataSource <ejs-chart id="Container"> <e-series-collection> <e-series dataSource=""> </e-series> </e-series-collection> </ejs-chart>
|
| Draw type for Polar series |
Property: draw-type <ej-chart id="chartContainer"> <e-chart-series> <e-series draw-type="Line"> </e-series> </e-chart-series> </ej-chart>
|
Property: drawType <ejs-chart id="Container"> <e-series-collection> <e-series drawType="Line"> </e-series> </e-series-collection> </ejs-chart>
|
| EmptyPointSettings for series |
Property: e-empty-point-settings.visible <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-empty-point-settings visible="true"> </e-empty-point-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Empty Point Display modes |
Property: e-empty-point-settings.display-mode <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-empty-point-settings display-mode="Average"> </e-empty-point-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-emptypointsettings.mode <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-emptypointsettings mode="Average"> </e-series-emptypointsettings> </e-series> </e-series-collection> </ejs-chart>
|
| Empty Point color |
Property: color <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-empty-point-settings> <e-Style color="red"> </e-Style> </e-empty-point-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-emptypointsettings.fill <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-emptypointsettings fill="red"> </e-series-emptypointsettings> </e-series> </e-series-collection> </ejs-chart>
|
| Empty Point Border |
Property: e-border <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-empty-point-settings> <e-Style color="red"> <e-border color="red" width="3"> </e-border> </e-Style> </e-empty-point-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: e-emptypointsettings-border <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-emptypointsettings> <e-emptypointsettings-border color="red" width="2"> </e-emptypointsettings-border> </e-series-emptypointsettings> </e-series> </e-series-collection> </ejs-chart>
|
| Enable animation for series |
Property: enable-animation <ej-chart id="chartContainer"> <e-chart-series> <e-series enable-animation="true"> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-animation.enable <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-animation enable="true"> </e-series-animation> </e-series> </e-series-collection> </ejs-chart>
|
| Animation duration for series |
Property: animation-duration <ej-chart id="chartContainer"> <e-chart-series> <e-series animation-duratio="1000"> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-animation.duration <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-animation duration="1000"> </e-series-animation> </e-series> </e-series-collection> </ejs-chart>
|
| Animation delay for series | Property: Not Applicable |
Property: e-series-animation.delay <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-animation delay="100"> </e-series-animation> </e-series> </e-series-collection> </ejs-chart>
|
| Drag settings for series |
Property: e-drag-options <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-drag-options type="X"> </e-drag-options> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Errorbar settings for series |
Property: e-error-bar <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-error-bar > </e-error-bar> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-errorbar <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-errorbar> </e-series-errorbar> </e-series> </e-series-collection> </ejs-chart>
|
| Closed series |
Property: is-closed <ej-chart id="chartContainer"> <e-chart-series> <e-series is-closed="true" > </e-series> </e-chart-series> </ej-chart>
|
Property: isClosed <ejs-chart id="Container"> <e-series-collection> <e-series isClosed="true" > </e-series> </e-series-collection> </ejs-chart>
|
| Stacking Property for series |
Property: is-stacking <ej-chart id="chartContainer"> <e-chart-series> <e-series is-stacking="true" > </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Line cap for series |
Property: line-cap <ej-chart id="chartContainer"> <e-chart-series> <e-series line-cap="Butt" > </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Line cap for series |
Property: line-join <ej-chart id="chartContainer"> <e-chart-series> <e-series line-join="Round" > </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Outlier settings of series |
Property: e-outlier-settings <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-outlier-settings shape="Rectangle"> </e-outlier-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Opacity for series |
Property: opacity <ej-chart id="chartContainer"> <e-chart-series> <e-series opacity="0.7" > </e-series> </e-chart-series> </ej-chart>
|
Property: opacity <ejs-chart id="Container"> <e-series-collection> <e-series opacity="0.7" > </e-series> </e-series-collection> </ejs-chart>
|
| point Color Mapping |
Property: point-color-mapping-name <ej-chart id="chartContainer"> <e-chart-series> <e-series point-color-mapping-name="color" > </e-series> </e-chart-series> </ej-chart>
|
Property: pointColorMapping <ejs-chart id="Container"> <e-series-collection> <e-series pointColorMapping="color" > </e-series> </e-series-collection> </ejs-chart>
|
| Positive fill for waterfall series |
Property: positive-fill <ej-chart id="chartContainer"> <e-chart-series> <e-series positive-fill="red" > </e-series> </e-chart-series> </ej-chart>
|
Property: pointColorMapping <ejs-chart id="Container"> <e-series-collection> <e-series pointColorMapping="color" > </e-series> </e-series-collection> </ejs-chart>
|
| Show average value in box and whisker series |
Property: show-median <ej-chart id="chartContainer"> <e-chart-series> <e-series show-median="false" > </e-series> </e-chart-series> </ej-chart>
|
Property: showMean <ejs-chart id="Container"> <e-series-collection> <e-series showMean="false" > </e-series> </e-series-collection> </ejs-chart>
|
| To group the series of stacking collection |
Property: stacking-group <ej-chart id="chartContainer"> <e-chart-series> <e-series stacking-group="group" > </e-series> </e-chart-series> </ej-chart>
|
Property: stackingGroup <ejs-chart id="Container"> <e-series-collection> <e-series stackingGroup="group" > </e-series> </e-series-collection> </ejs-chart>
|
| Specifies the type of the series to render in chart |
Property: type <ej-chart id="chartContainer"> <e-chart-series> <e-series type="Line" > </e-series> </e-chart-series> </ej-chart>
|
Property: type <ejs-chart id="Container"> <e-series-collection> <e-series type="Line" > </e-series> </e-series-collection> </ejs-chart>
|
| Defines the visibility of the series |
Property: visibility <ej-chart id="chartContainer"> <e-chart-series> <e-series visibility="true" > </e-series> </e-chart-series> </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-series-collection> <e-series visible="true" > </e-series> </e-series-collection> </ejs-chart>
|
| Enables or disables the visibility of legend item |
Property: visible-on-legend <ej-chart id="chartContainer"> <e-chart-series> <e-series visible-on-legend="Visible" > </e-series> </e-chart-series> </ej-chart>
|
Property: toggleVisibility <ejs-chart id="Container"> <e-series-collection> <e-series toggleVisibility="true" > </e-series> </e-series-collection> </ejs-chart>
|
| Specifies the different types of spline curve |
Property: spline-type <ej-chart id="chartContainer"> <e-chart-series> <e-series spline-type="Natural" > </e-series> </e-chart-series> </ej-chart>
|
Property: splineType <ejs-chart id="Container"> <e-series-collection> <e-series splineType="Natural" > </e-series> </e-series-collection> </ejs-chart>
|
| Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection |
Property: x-axis-name <ej-chart id="chartContainer"> <e-chart-series> <e-series x-axis-name="secondaryXAxis" > </e-series> </e-chart-series> </ej-chart>
|
Property: xAxisName <ejs-chart id="Container"> <e-series-collection> <e-series xAxisName="secondaryXAxis" > </e-series> </e-series-collection> </ejs-chart>
|
| Name of the property in the datasource that contains x value for the series |
Property: x-name <ej-chart id="chartContainer"> <e-chart-series> <e-series x-name="x" > </e-series> </e-chart-series> </ej-chart>
|
Property: xName <ejs-chart id="Container"> <e-series-collection> <e-series xName="x" > </e-series> </e-series-collection> </ejs-chart>
|
| Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection |
Property: y-axis-name <ej-chart id="chartContainer"> <e-chart-series> <e-series y-axis-name="secondaryYAxis" > </e-series> </e-chart-series> </ej-chart>
|
Property: yAxisName <ejs-chart id="Container"> <e-series-collection> <e-series yAxisName="secondaryYAxis" > </e-series> </e-series-collection> </ejs-chart>
|
| Name of the property in the datasource that contains y value for the series |
Property: x-name <ej-chart id="chartContainer"> <e-chart-series> <e-series y-name="y" > </e-series> </e-chart-series> </ej-chart>
|
Property: yName <ejs-chart id="Container"> <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 id="chartContainer"> <e-chart-series> <e-series high="y" > </e-series> </e-chart-series> </ej-chart>
|
Property: high <ejs-chart id="Container"> <e-series-collection> <e-series high="y" > </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 id="chartContainer"> <e-chart-series> <e-series low="y" > </e-series> </e-chart-series> </ej-chart>
|
Property: low <ejs-chart id="Container"> <e-series-collection> <e-series low="y" > </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 id="chartContainer"> <e-chart-series> <e-series close="y" > </e-series> </e-chart-series> </ej-chart>
|
Property: close <ejs-chart id="Container"> <e-series-collection> <e-series close="y" > </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 id="chartContainer"> <e-chart-series> <e-series open="y" > </e-series> </e-chart-series> </ej-chart>
|
Property: open <ejs-chart id="Container"> <e-series-collection> <e-series open="y" > </e-series> </e-series-collection> </ejs-chart>
|
| Option to add trendlines to chart |
Property: e-trend-lines <ej-chart id="chartContainer"> <e-chart-series> <e-series > <e-trend-lines> </e-trend-lines> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-trendlines <ejs-chart id="Container"> <e-series-collection> <e-series > <e-series-trendlines> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Options for customizing the appearance of the series or data point while highlighting |
Property: e-highlight-settings <ej-chart id="chartContainer"> <e-chart-series> <e-series > <e-highlight-settings> </e-highlight-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: Not applicable |
| Options for customizing the appearance of the series/data point on selection |
Property: e-selection-settings <ej-chart id="chartContainer"> <e-chart-series> <e-series > <e-selection-settings> </e-selection-settings> </e-series> </e-chart-series> </ej-chart>
|
Property: Not applicable |
marker
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| visibility of marker |
Property: visible <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker visible="true"> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: visible <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker visible="true"> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Fill for marker |
Property: fill <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker fill="red"> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: fill <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker fill="red"> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Opacity for marker |
Property: opacity <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker opacity="0.5"> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: opacity <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker opacity="0.5"> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Shape for marker |
Property: shape <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker shape="Circle"> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: shape <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker shape="Circle"> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| ImageUrl for marker |
Property: image-url <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker image-url=""> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: imageUrl <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker imageUrl=""> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Border for marker |
Property: e-border <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-border color="red" width="2"> </e-border> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-marker-border <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-marker-border color="red" width="2"> </e-marker-border> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Height for marker |
Property: size.height <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-Size height="40"> </e-Size> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: height <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker height="40"> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Width for marker |
Property: size.Width <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-Size Width="40"> </e-Size> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: Width <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker Width="40"> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| DataLabelSettings of marker |
Property: e-series-marker.e-data-label <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: marker.dataLabel <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Visibility of dataLabel |
Property: e-data-label.visible <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label visible="true"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.visible <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel visible="true"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Text mapping name of dataLabel |
Property: e-data-label.text-mapping-name <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label text-mapping-name=""> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.name <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel name=""> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Fill color of data label |
Property: e-data-label.fill <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label fill="red"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: dataLabel.fill <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel fill="red"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Opacity of data label |
Property: e-data-label.opacity <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label opacity="0.6"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.opacity <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel opacity="0.5"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Text position of data label |
Property: e-data-label.text-position <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label text-position="Middle"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.position <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel position="Top"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Alignment of data label |
Property: e-data-label.vertical-text-alignment <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label vertical-text-alignment="Center"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.alignment <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel alignment="Center"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Border of data label |
Property: e-data-label.e-border <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label> <e-border color="red" width="2"> </e-border> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-datalabelsettings-border <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel> <e-datalabelsettings-border color="red" width="2"> </e-datalabelsettings-border> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Offset for data label |
Property: e-data-label.e-offset <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label> <e-offset x="5" y="6"> </e-offset> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Margin of data label |
Property: e-data-label.e-margin <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label> <e-margin top="10" bottom="10" left="10" right="10"> </e-margin> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabe.e-datalabelsettings-margin <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel> <e-datalabelsettings-margin top="10" left="10" bottom="10" right="10"> </e-datalabelsettings-margin> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Font of data label |
Property: e-data-label.e-font <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label> <e-font color="red"> </e-font> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.e-font <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel> <e-font color="red" opacity="4"> </e-font> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| HTML template in dataLabel |
Property: e-data-label.template <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label template="<div>Chart</div>"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: e-series-datalabel.template <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel template="<div>Chart</div>"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Rounded corner radius X | Property: Not Applicable |
Property: e-series-datalabel.rx <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel rx="10"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Rounded corner radius Y | Property: Not Applicable |
Property: e-series-datalabel.ry <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-marker> <e-series-datalabel ry="10"> </e-series-datalabel> </e-series-marker> </e-series> </e-series-collection> </ejs-chart>
|
| Maximum Label width for data label |
Property: maximum-label-width <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label maximum-label-width="10"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Enable wrapping of text for data label |
Property: enable-wrap <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label enable-wrap="true"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
| To show edge label for data label |
Property: show-edge-labels <ej-chart id="chartContainer"> <e-chart-series> <e-series> <e-marker> <e-data-label show-edge-labels="true"> </e-data-label> </e-marker> </e-series> </e-chart-series> </ej-chart>
|
Property: Not Applicable |
TrendLines
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Trendlines settings |
Property: e-series.e-trend-lines <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-series.e-series-trendlines <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Visibility of trendline |
Property: e-trend-line.visibility <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line visibility="true"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: Not applicable |
| Type of trendLine |
Property: e-trend-line.type <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line type="Linear"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.type <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline type="Polynomial"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Name of trendLine |
Property: e-trend-line.name <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line name="trendLine"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.name <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline name="trendLine"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Period of trendLine | Property: Not available |
Property: e-trendline.period <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline period="45"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Polynomial order for Polynomial type trendLines |
Property: e-trend-line.polynomial-order <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line polynomial-order="3"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.polynomialOrder <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline polynomialOrder="3"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Backward forecost for trendLines |
Property: e-trend-line.backward-forecast <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line backward-forecast="3"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.backwardForecast <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline backwardForecast="3"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Forward forecost for trendLines |
Property: e-trend-line.forward-forecast <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line forward-forecast="3"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.forwardForecast <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline forwardForecast="3"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Fill for trendLines |
Property: e-trend-line.fill <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line fill="red"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.fill <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline fill="red"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Width for trendLines |
Property: e-trend-line.width <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line width="2"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: e-trendline.width <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline width="2"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Intercept value for trendLines | Property: Not Applicable |
Property: e-trendline.intercept <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline intercept="2"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Intercept value for trendLines | Property: Not Applicable |
Property: e-trendline.legendShape <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline legendShape="Rectangle"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Animation settings for trendLines | Property: Not Applicable |
Property: e-trendline.animation <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline> <e-trendline-animation enable="true"> </e-trendline-animation> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Marker settings for trendLines | Property: Not Applicable |
Property: e-trendline.marker <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline> <e-trendline-marker visible="true"> </e-trendline-marker> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| Tooltip for trendLines | Property: Not Applicable |
Property: e-trendline.enableTooltip <ejs-chart id="Container"> <e-series-collection> <e-series> <e-series-trendlines> <e-trendline enableTooltip="true"> </e-trendline> </e-series-trendlines> </e-series> </e-series-collection> </ejs-chart>
|
| DashArray for trendLines |
Property: e-trend-line.dash-array <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line dash-array="2,3"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: Not Applicable |
| Visible on legend for trendLines |
Property: e-trend-line.visible-on-legend <ej-chart id="Container"> <e-chart-series> <e-series> <e-trend-lines> <e-trend-line visible-on-legend="true"> </e-trend-line> </e-trend-lines> </e-series> <e-chart-series> </ej-chart>
|
Property: Not Applicable |
StripLines
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Default behaviour for striplines |
Property: e-primary-x-axis.e-strip-lines <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line visible="true"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.width <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline visible="true"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| border for stripline |
Property: e-strip-lines.border-color <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line border-color="red"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.e-primaryxaxis-border <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline> <e-primaryxaxis-border color="red"> </e-primaryxaxis-border> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Background color for stripline |
Property: e-strip-line.color <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line color="red"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.color <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline color="red"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Start value for stripline |
Property: e-strip-line.start <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line start="10"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.start <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline start="10"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| End value for stripline |
Property: e-strip-line.end <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line end="10"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.end <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline end="10"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| StartfromAxis value for stripline |
Property: e-strip-line.start-from-axis <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line start-from-axis="true"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.startFromAxis <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline startFromAxis="true"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Text in stripline |
Property: e-strip-line.text <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line text="StripLine"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.text <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline text="StripLine"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Text alignment in stripline |
Property: e-strip-line.text-alignment <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line text-alignment="MiddleCenter"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.horizontalAlignment <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline horizontalAlignment="Middle"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Vertical Text alignment in stripline |
Property: e-strip-line.text-alignment <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line text-alignment="MiddleCenter"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.verticalAlignment <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline verticalAlignment="Middle"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Size of stripline |
Property: e-strip-line.border-width <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line border-width="10"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.size <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline size="10"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| ZIndex of stripline |
Property: e-strip-line.z-index <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line z-index="Behind"> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.zIndex <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline zIndex="Behind"> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Font style of stripline |
Property: e-strip-line.e-Font <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-strip-lines> <e-strip-line> <e-Font> </e-Font> </e-strip-line> </e-strip-lines> </e-primary-x-axis> <e-chart-series> </ej-chart>
|
Property: e-primaryxaxis-stripline.zIndex <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-striplines> <e-primaryxaxis-stripline> <e-primaryxaxis-textstyle> </e-primaryxaxis-textstyle> </e-primaryxaxis-stripline> </e-primaryxaxis-striplines> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
Multilevel Labels
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Default behaviour for multilevelLabels |
Property: e-primary-x-axis.e-multi-level-labels <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label visible="true"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: e-chart-primaryxaxis-stripline.e-primaryxaxis-multilevellabel <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels > <e-primaryxaxis-multilevellabel visible="true"> </e-primaryxaxis-multilevellabel > </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Text alignment for multilevelLabels |
Property: text-alignment <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label text-alignment="Center"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: alignment <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel alignment="Center"> </e-primaryxaxis-multilevellabel > </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Text overflow for multilevelLabels |
Property: text-overflow <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label text-overflow="Trim"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: overFlow <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel overFlow="Trim"> </e-primaryxaxis-multilevellabel> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Border for multilevelLabels |
Property: text-overflow <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: overFlow <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel> <e-primaryxaxis-border color="red" width="2"> </e-primaryxaxis-border> </e-primaryxaxis-multilevellabel> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Start value for label |
Property: start <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label start="45"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: start <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel> <e-primaryxaxis-categories> <e-primaryxaxis-category start="45"> </e-primaryxaxis-category> </e-primaryxaxis-categories> </e-primaryxaxis-multilevellabel> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| End value for label |
Property: end <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label end="45"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: end <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel> <e-primaryxaxis-categories> <e-primaryxaxis-category end="45"> </e-primaryxaxis-category> </e-primaryxaxis-categories> </e-primaryxaxis-multilevellabel> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Text for label |
Property: text <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label text="Start"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: text <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel> <e-primaryxaxis-categories> <e-primaryxaxis-category text="Start"> </e-primaryxaxis-category> </e-primaryxaxis-categories> </e-primaryxaxis-multilevellabel> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| Maximum text width for label |
Property: maximum-text-width <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label maximum-text-width="10"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: maximumTextWidth <ejs-chart id="Container"> <e-series-collection> <e-chart-primaryxaxis> <e-primaryxaxis-multilevellabels> <e-primaryxaxis-multilevellabel> <e-primaryxaxis-categories> <e-primaryxaxis-category maximumTextWidth="10"> </e-primaryxaxis-category> </e-primaryxaxis-categories> </e-primaryxaxis-multilevellabel> </e-primaryxaxis-multilevellabels> </e-chart-primaryxaxis> </e-series-collection></ejs-chart>
|
| level of labels |
Property: level <ej-chart id="Container"> <e-chart-series> <e-primary-x-axis> <e-multi-level-labels> <e-multi-level-label level="1"> </e-multi-level-label> </e-multi-level-labels> </e-primary-x-axis> </e-chart-series> </ej-chart>
|
Property: Not applicable |
Methods
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Animation for series |
Property: chart.animate <ej-chart id="chart"> </ej-chart> <script> var chartobj=$("#chart").ejchart(instance);
|
Not applicable |
| Redraw for chart |
Property chart.redraw <ej-chart id="chart"> </ej-chart> <script> var chartobj= $("#chart").ejchart(instance); </script>
|
Property: chart.refresh() <ejs-chart id="chart"> </ejs-chart> <script> var chartobj= document.getElementById('chart').ej2_instances[0]; </script>
|
| Export |
Property chart.export <ej-chart id="chart" > </ej-chart> <script> var chartobj= $("#chart").ejchart(instance); </script>
|
Property: chart.export() <ejs-chart id="chart" > </ejs-chart> <script> var chartobj= document.getElementById('chart').ej2_instances[0]; </script>
|
Property chart.print <ej-chart id="chart" > </ej-chart> <script> var chartobj= $("#chart").ejchart(instance); </script>
|
Property: chart.print() <ejs-chart id="chart"> </ejs-chart> <script> var chartobj= document.getElementById('chart').ej2_instances[0]; </script>
|
|
| AddSeries | Property Not Applicable |
Property: chart.addSeries() <ejs-chart id="chart"> </ejs-chart> <script> var chartobj= document.getElementById('chart').ej2_instances[0]; </script>
|
| RemoveSeries | Property Not Applicable |
Property: chart.removeSeries() <ejs-chart id="chart"> </ejs-chart> <script> var chartobj= document.getElementById('chart').ej2_instances[0]; </script>
|
Events
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| Fires on annotation click |
Property: annotation-click <ej-chart id="chart" annotation-click="annotaionclick"> </ej-chart> <script> function annotaionclick(args) { </script>
|
Not applicable |
| Fires after animation |
Property: animation-complete <ej-chart id="chart" animation-complete="animationcomplete"> </ej-chart> <script> function animationcomplete(args) { </script>
|
Property: animationComplete <ejs-chart id="chart" animationComplete="animationComplete"> </ejs-chart> <script> function animationComplete(args) { </script>
|
| Fires on axis label click |
Property: axis-label-click <ej-chart id="chart" axis-label-click="Axislabelclick"> </ej-chart> <script> function Axislabelclick(args) { </script>
|
Property: Not applicable |
| Fires before axis label render |
Property: axes-label-rendering <ej-chart id="chart" axes-label-rendering="axisLabelRendering"> </ej-chart> <script> function axisLabelRendering(args) { </script>
|
Property: axisLabelRender <ejs-chart id="chart" axisLabelRender="axisLabelRendering"> </ejs-chart> <script> function axisLabelRendering(args) { </script>
|
| Fires on axis label mouseMove |
Property: axis-label-mouse-move <ej-chart id="chart" axis-label-mouse-move="axisLabelMouseMove"> </ej-chart> <script> function axisLabelMouseMove(args) { </script>
|
Property: Not applicable |
| Fires on axis label initialize |
Property: axes-labels-initialize <ej-chart id="chart" axes-labels-initialize="axisLabelInitialize"> </ej-chart> <script> function axisLabelInitialize(args) { </script>
|
Property: Not applicable |
| Fires before axis range calculation |
Property: axes-range-calculate <ej-chart id="chart" axes-range-calculate="axesRangeCalculate"> </ej-chart> <script> function axesRangeCalculate(args) { </script>
|
Property: axisRangeCalculated <ejs-chart id="chart" axisRangeCalculated="axesRangeCalculate"> </ejs-chart> <script> function axesRangeCalculate(args) { </script>
|
| Fires on axis title rendering |
Property: axes-title-rendering <ej-chart id="chart" axes-title-rendering="axisTitleRendering"> </ej-chart> <script> function axisTitleRendering(args) { </script>
|
Property: Not applicable |
| Fires on after chart resize |
Property: after-resize <ej-chart id="chart" after-resize="afterResize"> </ej-chart> <script> function afterResize(args) { </script>
|
Property: Not applicable |
| Fires on before chart resize |
Property: before-resize <ej-chart id="chart" before-resize="beforeResize"> </ej-chart> <script> function beforeResize(args) { </script>
|
Property: resized <ejs-chart id="chart" resized="beforeResize"> </ejs-chart> <script> function beforeResize(args) { </script>
|
| Fires on chart click |
Property: chart-click <ej-chart id="chart" chart-click="chartMouseClick"> </ej-chart> <script> function chartMouseClick(args) { </script>
|
Property: chartMouseClick <ejs-chart id="chart" chartMouseClick="chartMouseClick"> </ejs-chart> <script> function chartMouseClick(args) { </script>
|
| Fires on chart mouse move |
Property: chart-mouse-move <ej-chart id="chart" chart-mouse-move="chartMouseMove"> </ej-chart> <script> function chartMouseMove(args) { </script>
|
Property: chartMouseMove <ejs-chart id="chart" chartMouseMove="chartMouseMove"> </ejs-chart> <script> function chartMouseMove(args) { </script>
|
| Fires on chart mouse leave |
Property: chart-mouse-leave <ej-chart id="chart" chart-mouse-leave="chartMouseLeave"> </ej-chart> <script> function chartMouseLeave(args) { </script>
|
Property: chartMouseLeave <ejs-chart id="chart" chartMouseLeave="chartMouseLeave"> </ejs-chart> <script> function chartMouseLeave(args) { </script>
|
| Fires on before chart double click |
Property: chart-double-click <ej-chart id="chart" chart-double-click="chartDoubleClick"> </ej-chart> <script> function chartDoubleClick(args) { </script>
|
Property: Not applicable |
| Fires on chart mouse up | Property: Not Applicable |
Property: chartmouseUp <ejs-chart id="chart" chartmouseUp="chartmouseUp"> </ejs-chart> <script> function chartmouseUp(args) { </script>
|
| Fires on chart mouse down | Property: Not Applicable |
Property: chartmouseDown <ejs-chart id="chart" chartmouseDown="chartmouseDown"> </ejs-chart> <script> function chartmouseDown(args) { </script>
|
| Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area |
Property: chart-area-bounds-calculate <ej-chart id="chart" chart-area-bounds-calculate="chartAreaBoundsCalculate"> </ej-chart> <script> function chartAreaBoundsCalculate(args) { </script>
|
Property: Not applicable |
| Fires when the dragging is started |
Property: drag-start <ej-chart id="chart" drag-start="dragStart"> </ej-chart> <script> function dragStart(args) { </script>
|
Property: Not applicable |
| Fires while dragging |
Property: dragging <ej-chart id="chart" dragging="dragging"> </ej-chart> <script> function dragging(args) { </script>
|
Property: Not applicable |
| Fires when the dragging is completed |
Property: drag-end <ej-chart id="chart" drag-end="dragEnd"> </ej-chart> <script> function dragEnd(args) { </script>
|
Property: dragComplete <ejs-chart id="chart" dragComplete="dragComplete"> </ejs-chart> <script> function dragComplete(args) { </script>
|
| Fires when chart is destroyed completely |
Property: destroy <ej-chart id="chart" destroy="destroy"> </ej-chart> <script> function destroy(args) { </script>
|
Property: Not applicable |
| Fires after chart is created |
Property: create <ej-chart id="chart" create="create"> </ej-chart> <script> function create(args) { </script>
|
Property: loaded <ejs-chart id="chart" loaded="loaded"> </ejs-chart> <script> function loaded(args) { </script>
|
| Fires before rendering the data labels |
Property: display-text-rendering <ej-chart id="chart" display-text-rendering="textRender"> </ej-chart> <script> function textRender(args) { </script>
|
Property: textRender <ejs-chart id="chart" textRender="textRender"> </ejs-chart> <script> function textRender(args) { </script>
|
| Fires during the calculation of legend bounds |
Property: lengend-bounds-calculate <ej-chart id="chart" lengend-bounds-calculate="legendBoundsCalculate"> </ej-chart> <script> function legendBoundsCalculate(args) { </script>
|
Property: Not applicable |
| Fires on clicking the legend item |
Property: legend-item-click <ej-chart id="chart" legend-item-click="legendItemClick"> </ej-chart> <script> function legendItemClick(args) { </script>
|
Property: Not applicable |
| Fires when moving mouse over legend item |
Property: legend-item-mouse-move <ej-chart id="chart" legend-item-mouse-move="legendItemMouseMove"> </ej-chart> <script> function legendItemMouseMove(args) { </script>
|
Property: Not applicable |
| Fires before rendering the legend item |
Property: legend-item-rendering <ej-chart id="chart" legend-item-rendering="legendItemRendering"> </ej-chart> <script> function legendItemRendering(args) { </script>
|
Property: legendRender <ejs-chart id="chart" legendRender="legendItemRendering"> </ejs-chart> <script> function legendItemRendering(args) { </script>
|
| Fires before loading the chart |
Property: load <ej-chart id="chart" load="load"> </ej-chart> <script> function load(args) { </script>
|
Property: load <ejs-chart id="chart" load="load"> </ejs-chart> <script> function load(args) { </script>
|
| Fires, when multi level labels are rendering |
Property: multi-level-label-rendering <ej-chart id="chart" multi-level-label-rendering="MultiLabelRender"> </ej-chart> <script> function MultiLabelRender(args) { </script>
|
Property: axisMultiLabelRender <ejs-chart id="chart" axisMultiLabelRender="MultiLabelRender"> </ejs-chart> <script> function MultiLabelRender(args) { </script>
|
| Fires on clicking a point in chart |
Property: point-region-click <ej-chart id="chart" point-region-click="pointRegionClick"> </ej-chart> <script> function pointRegionClick(args) { </script>
|
Property: pointClick <ejs-chart id="chart" pointClick="pointClick"> </ejs-chart> <script> function pointClick(args) { </script>
|
| Fires when mouse is moved over a point |
Property: point-region-click <ej-chart id="chart" point-region-click="pointRegionMouseMove"> </ej-chart> <script> function pointRegionMouseMove(args) { </script>
|
Property: pointMove <ejs-chart id="chart" pointMove="pointRegionMouseMove"> </ejs-chart> <script> function pointRegionMouseMove(args) { </script>
|
| Fires before rendering chart |
Property: pre-render <ej-chart id="chart" pre-render="preRender"> </ej-chart> <script> function preRender(args) { </script>
|
Property: Not applicable |
| Fires after selected the data in chart |
Property: range-selected <ej-chart id="chart" range-selected="rangeSelected"> </ej-chart> <script> function rangeSelected(args) { </script>
|
Property: Not applicable |
| Fires after selecting a series |
Property: series-region-click <ej-chart id="chart" series-region-click="seriesRegionClick"> </ej-chart> <script> function seriesRegionClick(args) { </script>
|
Property: Not applicable |
| Fires when point render | Property: Not Applicable |
Property: pointRender <ejs-chart id="chart" pointRender="pointRender"> </ejs-chart> <script> function pointRender(args) { </script>
|
| Fires before rendering a series |
Property: series-rendering <ej-chart id="chart" series-rendering="seriesRendering"> </ej-chart> <script> function seriesRendering(args) { </script>
|
Property: seriesRender <ejs-chart id="chart" seriesRender="seriesRendering"> </ejs-chart> <script> function seriesRendering(args) { </script>
|
| Fires before rendering the marker symbols |
Property: symbol-rendering <ej-chart id="chart" symbol-rendering="symbolRendering"> </ej-chart> <script> function symbolRendering(args) { </script>
|
Property: Not applicable |
| Fires before rendering the trendline |
Property: trendline-rendering <ej-chart id="chart" trendline-rendering="trendlineRendering"> </ej-chart> <script> function trendlineRendering(args) { </script>
|
Property: Not applicable |
| Fires before rendering the Chart title |
Property: title-rendering <ej-chart id="chart" title-rendering="titleRendering"> </ej-chart> <script> function titleRendering(args) { </script>
|
Property: Not applicable |
| Fires before rendering the tooltip |
Property: tool-tip-initialize <ej-chart id="chart" tool-tip-initialize="tooltipRender"> </ej-chart> <script> function tooltipRender(args) { </script>
|
Property: tooltipRender <ejs-chart id="chart" tooltipRender="tooltipRender"> </ejs-chart> <script> function tooltipRender(args) { </script>
|
| Fires before rendering crosshair tooltip in axis |
Property: track-axis-tool-tip <ej-chart id="chart" track-axis-tool-tip="trackAxisToolTip"> </ej-chart> <script> function trackAxisToolTip(args) { </script>
|
Property: Not applicable |
| Fires before rendering trackball tooltip |
Property: track-tool-tip <ej-chart id="chart" track-tool-tip="trackToolTip"> </ej-chart> <script> function trackToolTip(args) { </script>
|
Property: Not applicable |
| Event triggered when scroll starts |
Property: scroll-start <ej-chart id="chart" scroll-start="scrollStart"> </ej-chart> <script> function scrollStart(args) { </script>
|
Property: scrollStart <ejs-chart id="chart" scrollStart="scrollStart"> </ejs-chart> <script> function scrollStart(args) { </script>
|
| Event triggered when scroll ends |
Property: scroll-end <ej-chart id="chart" scroll-end="scrollEnd"> </ej-chart> <script> function scrollEnd(args) { </script>
|
Property: scrollEnd <ejs-chart id="chart" scrollEnd="scrollEnd"> </ejs-chart> <script> function scrollEnd(args) { </script>
|
| Event triggered when scroll changes |
Property: scrollChanged <ej-chart id="chart" scrollChanged="scrollChange"> </ej-chart> <script> function scrollChange(args) { </script>
|
Property: scrollChanged <ejs-chart id="chart" scrollChanged="scrollChange"> </ejs-chart> <script> function scrollChange(args) { </script>
|
| Fires while performing rectangle zooming in chart |
Property: zoomed <ej-chart id="chart" zoomed="zoomComplete"> </ej-chart> <script> function zoomComplete(args) { </script>
|
Property: zoomComplete <ejs-chart id="chart" zoomComplete="zoomComplete"> </ejs-chart> <script> function zoomComplete(args) { </script>
|
Chart properties
| Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|---|---|---|
| selected data index |
Property: e-selected-data-point-indexes <ej-chart id="Container"> <e-selected-data-point-indexes series-index=0 point-index=1 > </e-selected-data-point-indexes> </ej-chart>
|
Property: overFlow <ejs-chart id="Container"> <e-chart-selecteddataindexes > <e-chart-selecteddataindex point="1" series="0"> </e-chart-selecteddataindex> </e-chart-selecteddataindexes> </ejs-chart>
|
| sideBySideSeriesPlacement for column based series |
Property: side-by-side-series-placement <ej-chart id="Container" side-by-side-series-placement="true"> </ej-chart>
|
Property: enableSideBySidePlacement <ejs-chart id="Container" enableSideBySidePlacement="true"> </ejs-chart>
|
| ZoomSettings |
Property: zooming <ej-chart id="Container"> <e-zooming enable="true" enable-pinching="true"> </e-zooming> </ej-chart>
|
Property: e-chart-zoomsettings <ejs-chart id="Container"> <e-chart-zoomsettings enableDeferredZooming="true" enablePinchZooming="true"> </e-chart-zoomsettings> </ejs-chart>
|
| Background color of the chart |
Property: background <ej-chart id="Container" background="transparent"> </ej-chart>
|
Property: background <ejs-chart id="Container" background="#EEFFCC"> </ejs-chart>
|
| URL of the image to be used as chart background |
Property: back-ground-image-url <ej-chart id="Container" back-ground-image-url="../images/chart/wheat.png"> </ej-chart>
|
Property: Not Applicable |
| Customizing border of the chart |
Property: background <ej-chart id="Container" > <e-border color="red"> </e-border> </ej-chart>
|
Property: background <ejs-chart id="Container"> <e-chart-border color="red" width="4"> </e-chart-border> </ejs-chart>
|
| ChartArea customization |
Property: background <ej-chart id="Container" > <e-chart-area background="transparent"> </e-chart-area> </ej-chart>
|
Property: background <ejs-chart id="Container"> <e-chart-chartarea background="transparent"> </e-chart-chartarea> </ejs-chart>
|