ejChart
3 Oct 201724 minutes to read
Essential chart can be easily configured to the DOM element, such as div. You can create a Chart with highly customizable look and feel.
Example
Requires
-
module:jQuery.js
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.chart.js
-
module:jQuery.globalize.js
Members
annotations array
Options for adding and customizing annotations in Chart.
NOTE
Annotations are not supported in 3D chart types.
annotations.angle number
Angle to rotate the annotation in degrees.
Default Value
- ‘0’
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation [angle]="270"></e-annotation>
</e-annotations>
</ej-chart>
annotations.content string
Text content or id of a HTML element to be displayed as annotation.
Default Value
- ””
Example
<div id= "watermark" style="font-size:100px; display:none">2014</div>
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation content="watermark">
</e-annotation>
</e-annotations>
</ej-chart>
annotations.coordinateUnit enum
Specifies how annotations have to be placed in Chart.
Name | Type | Description |
---|---|---|
None | string | Place the annotation to the center of the chart. |
Pixels | string | To place the annotation based on the pixel. |
Points | string | To place the annotation based on the points |
Default Value
- “none”. See CoordinateUnit
Example
<ej-chart id="chartcontainer">
<e-annotations>
<!--Change coordinateUnit type to pixels-->
<e-annotation coordinateUnit="pixels"></e-annotation>
</e-annotations>
</ej-chart>
annotations.horizontalAlignment enum
Specifies the horizontal alignment of the annotation.
Name | Type | Description |
---|---|---|
Left | string | To place the annotation on left side . |
Right | string | To place the annotation on right side. |
Middle | string | To place the annotation to the middle of the chart. |
Default Value
- “middle”. See HorizontalAlignment
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation horizontalAlignment="far"></e-annotation>
</e-annotations>
</ej-chart>
annotations.margin object
Options to customize the margin of annotation.
annotations.margin.bottom number
Annotation is placed at the specified value above its original position.
Default Value
- 0
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation margin-bottom="40"></e-annotation>
</e-annotations>
</ej-chart>
annotations.margin.left number
Annotation is placed at the specified value from left side of its original position.
Default Value
- 0
Example
<ej-chart id="chartcontainer">
<e-annotations>
<!--Change alignment of annotation template-->
<e-annotation margin-left="40"></e-annotation>
</e-annotations>
</ej-chart>
annotations.margin.right number
Annotation is placed at the specified value from the right side of its original position.
Default Value
- 0
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation margin-right="40"></e-annotation>
</e-annotations>
</ej-chart>
annotations.margin.top number
Annotation is placed at the specified value under its original position.
Default Value
- 0
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation margin-top="40"></e-annotation>
</e-annotations>
</ej-chart>
annotations.opacity number
Controls the opacity of the annotation.
Default Value
- 1
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation [opacity]=0.2></e-annotation>
</e-annotations>
</ej-chart>
annotations.region enum
Specifies whether annotation has to be placed with respect to chart or series.
Name | Type | Description |
---|---|---|
Chart | string | Place the annotation with respect to chart. |
Series | string | Place the annotation with respect to series. |
Default Value
- “chart”. See Region
Example
<div id= "watermark" style="font-size:100px; display:none">2014</div>
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation region="series"></e-annotation>
</e-annotations>
</ej-chart>
annotations.verticalAlignment enum
Specifies the vertical alignment of the annotation.
Name | Type | Description |
---|---|---|
Top | string | Place the annotation to the top of the chart. |
Bottom | string | Place the annotation to the bottom of the chart. |
Middle | string | Place the annotation to the middle of the chart. |
Default Value
- “middle”. See VerticalAlignment
Example
<ej-chart id="chartcontainer">
<e-annotations>
<!--Change alignment of annotation template-->
<e-annotation verticalAlignment="middle"></e-annotation>
</e-annotations>
</ej-chart>
annotations.visible boolean
Controls the visibility of the annotation.
Default Value
- false
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation [visible]="true"></e-annotation>
</e-annotations>
</ej-chart>
annotations.x number
Represents the horizontal offset when coordinateUnit is pixels.
when coordinateUnit is points, it represents the x-coordinate of axis bounded with xAxisName property or primary X axis when xAxisName is not provided.
This property is not applicable when coordinateUnit is none.
Default Value
- 0
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation [x]="170"></e-annotation>
</e-annotations>
</ej-chart>
annotations.xAxisName string
Name of the horizontal axis to be used for positioning the annotation. This property is applicable only when coordinateUnit is points.
Default Value
- ””
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation xAxisName="xAxis1"></e-annotation>
</e-annotations>
</ej-chart>
annotations.y number
Represents the vertical offset when coordinateUnit is pixels.
When coordinateUnit is points, it represents the y-coordinate of axis bounded with yAxisName property or primary Y axis when yAxisName is not provided.
This property is not applicable when coordinateUnit is none.
Default Value
- 0
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation [y]="350"></e-annotation>
</e-annotations>
</ej-chart>
annotations.yAxisName string
Name of the vertical axis to be used for positioning the annotation.
This property is applicable only when coordinateUnit is points.
Default Value
- ””
Example
<ej-chart id="chartcontainer">
<e-annotations>
<e-annotation xAxisName="yAxis1"></e-annotation>
</e-annotations>
</ej-chart>
background string
Sets the background color of the chart.
Default Value
- transparent
Example
<ej-chart id="chartcontainer" chartArea.background="skyblue"></ej-chart>
backGroundImageUrl string
URL of the image to be used as chart background.
Default Value
- null
Example
<ej-chart id="chartcontainer" backGroundImageUrl="wheat.png">
</ej-chart>
border object
Options for customizing the color, opacity and width of the chart border.
border.color string
Border color of the chart.
Default Value
- null
Example
<ej-chart id="chartcontainer" border.color="green">
</ej-chart>
border.opacity number
Opacity of the chart border.
Default Value
- 0.3
Example
<ej-chart id="chartcontainer" [border.opacity]= 0.5>
</ej-chart>
border.width number
Width of the Chart border.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [border.width]=2>
</ej-chart>
exportSettings object
This provides options for customizing export settings
exportSettings.filename string
Specifies the downloading filename
Default Value
- “chart”
Example
<ej-chart id="chartcontainer" exportSettings.fileName="ChartSnapshot">
</ej-chart>
exportSettings.action string
Specifies the name of the action URL
Default Value
- ””
Example
<!--Chart download link-->
<ej-chart id="chartcontainer" exportSettings.action="http://js.syncfusion.com/ExportingServices/api/JSChartExport/Export">
</ej-chart>
exportSettings.angle number
Specifies the angle for rotation
Default Value
- 0
Example
<ej-chart id="chartcontainer" [exportSettings.angle]=180>
</ej-chart>
exportSettings.type enum
Specifies the format of the file to export
Name | Type | Description |
---|---|---|
PNG | string | The chart will be exported in .png format |
JPG | string | The chart will be exported in .jpg format |
string | The chart will be exported in .pdf format | |
DOCX | string | The chart will be exported in .doc format |
XLSX | string | The chart will be exported in .xlsx format |
SVG | string | The chart will be exported in .svg format |
Default Value
- “png”
Example
<ej-chart id="chartcontainer" exportSettings.type="jpg">
</ej-chart>
exportSettings.orientation enum
Specifies the orientation of the document
Name | Type | Description |
---|---|---|
Portrait | string | The Chart is exported in portrait for .doc type |
Landscape | string | The Chart is exported in landscape for .doc type |
Default Value
- “portrait”
Example
<ej-chart id="chartcontainer" exportSettings.orientation="landscape">
</ej-chart>
exportSettings.mode enum
Specifies the mode of exporting
Name | Type | Description |
---|---|---|
Server Side | string | The Chart is exported at server side |
Client Side | string | The Chart is exported at client side |
Default Value
- “client”
Example
<ej-chart id="chartcontainer" exportSettings.mode="client">
</ej-chart>
exportSettings.multipleExport boolean
Enable/ disable the multiple excel exporting
Default Value
- false
Example
<ej-chart id="chartcontainer" [exportSettings.multipleExport]="true">
</ej-chart>
chartArea object
Options for configuring the border and background of the plot area.
chartArea.background string
Background color of the plot area.
Default Value
- transparent
Example
<ej-chart id="chartcontainer" chartArea.background ="white">
</ej-chart>
chartArea.border object
Options for customizing the border of the plot area.
chartArea.border.color string
Border color of the plot area.
Default Value
- Gray
Example
<ej-chart id="chartcontainer" chartArea.border.color ="green">
</ej-chart>
chartArea.border.opacity number
Opacity of the plot area border.
Default Value
- 0.3
Example
<ej-chart id="chartcontainer" [chartArea.border.opacity] =0.5>
</ej-chart>
chartArea.border.width number
Border width of the plot area.
Default Value
- 0.5
Example
<ej-chart id="chartcontainer" [chartArea.border.width] =2>
</ej-chart>
columnDefinitions array
Options to split Chart into multiple plotting areas vertically. Each object in the collection represents a plotting area in Chart.
columnDefinitions.unit enum
Specifies the unit to measure the width of the column in plotting area.
Name | Type | Description |
---|---|---|
Percentage | string | Specifies the width of the column in percentage. |
Pixel | string | Specifies the width of the column in pixel. |
Default Value
- ‘pixel’. See Unit
Example
COLUMNDEFINITIONS.UNIT
columnDefinitions.columnWidth number
Width of the column in plotting area. Width is measured in either pixel or percentage based on the value of unit property.
Default Value
- 50
Example
<ej-chart id="chartcontainer" [columnDefinitions] ="{columnWidth:50}">
</ej-chart>
columnDefinitions.lineColor string
Color of the line that indicates the starting point of the column in plotting area.
Default Value
- “transparent”
Example
<ej-chart id="chartcontainer" [columnDefinitions] ="{lineColor:'green'}">
</ej-chart>
columnDefinitions.lineWidth number
Width of the line that indicates the starting point of the column in plot area.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [columnDefinitions] ="{lineWidth:2}">
</ej-chart>
commonSeriesOptions object
Options for configuring the properties of all the series. You can also override the options for specific series by using series collection.
commonSeriesOptions.border object
Options to customize the border of all the series.
commonSeriesOptions.border.color string
Border color of all series.
Default Value
- “transparent”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.border.color="green">
</ej-chart>
commonSeriesOptions.border.dashArray string
DashArray for border of the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.border.dashArray='2,3'>
<e-seriescollection><e-series type="column"></e-series>
</e-seriescollection>
</ej-chart>
commonSeriesOptions.border.width number
Border width of all series.
Default Value
- 1
Example
<ej-chart id="chartcontainer" commonSeriesOptions.border.width=5>
<e-seriescollection><e-series type="column"></e-seriescollection>
</e-seriescollection>
</ej-chart>
commonSeriesOptions.columnFacet enum
To render the column and bar type series in rectangle/cylinder shape. See ColumnFacet
Name | Type | Description |
---|---|---|
Rectangle | string | Draw column and bar series in rectangle shape |
Cylinder | string | Draw column and bar series in cylinder shape |
Default Value
- “rectangle”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.columnFacet="cylinder">
</ej-chart>
commonSeriesOptions.columnWidth number
Relative width of the columns in column type series. Value ranges from 0 to 1. Width also depends upon columnSpacing property.
Default Value
- 0.7
Example
<!-- Width of columns in column type series-->
<ej-chart id="chartcontainer" [commonSeriesOptions.columnWidth]=0.7>
</ej-chart>
commonSeriesOptions.columnSpacing number
Spacing between columns of different series. Value ranges from 0 to 1
Default Value
- 0
Example
<!-- Width of columns in column type series-->
<ej-chart id="chartcontainer" [commonSeriesOptions.columnWidth]=0.7>
</ej-chart>
commonSeriesOptions.visibleOnLegend string
Enables or disables the visibility of legend item.
Default Value
- “visible”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.visibleOnLegend = "hidden">
</ej-chart>
commonSeriesOptions.stackingGroup string
Group of the stacking collection series.
Default Value
- ””
Example
<ej-chart id="container" commonSeriesOptions.stackingGroup =" ">
</ej-chart>
commonSeriesOptions.dashArray string
Pattern of dashes and gaps used to stroke all the line type series.
Default Value
- ””
Example
<ej-chart id="chartcontainer" commonSeriesOptions.dashArray='2,3'>
</ej-chart>
commonSeriesOptions.dataSource object
Set the dataSource for all series. It can be an array of JSON objects or an instance of ej.DataManager.
Default Value
- null
Example
this.chartData = [
{ month: 'Jan', sales: 35},
{ month: 'Feb', sales: 28},
{ month: 'Mar', sales: 34},
{ month: 'Apr', sales: 32},
// ...
];
<ej-chart id="chartcontainer" [commonSeriesOptions.dataSource] = "chartData"></ej-chart>
commonSeriesOptions.doughnutCoefficient number
Controls the size of the hole in doughnut series. Value ranges from 0 to 1
Default Value
- 0.4
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.doughnutCoefficient]="0.5">
</ej-chart>
commonSeriesOptions.doughnutSize number
Controls the size of the doughnut series. Value ranges from 0 to 1.
Default Value
- 0.8
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.doughnutSize] = "0.9">
</ej-chart>
commonSeriesOptions.drawType enum
Specifies the type of series to be drawn in radar or polar series.
Name | Type | Description |
---|---|---|
Line | string | Line type series will be drawn. |
Area | string | Area type series will be drawn. |
Column | string | Column type series will be drawn. |
Default Value
- “line”. See DrawType
Example
<ej-chart id="chartcontainer" commonSeriesOptions.drawType ="column">
</ej-chart>
commonSeriesOptions.enableAnimation boolean
Enable/disable the animation for all the series.
Default Value
- true
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.enableAnimation]="true">
</ej-chart>
commonSeriesOptions.enableSmartLabels boolean
To avoid overlapping of data labels smartly.
Default Value
- true
Example
this.dataMarker = {
dataLabel:{
visible: true,
shape: 'none',
connectorLine: { type: 'bezier', color: 'black' },
font: { size: '14px' }
}};
<ej-chart id="chartcontainer" [commonSeriesOptions.enableSmartLabels]="true" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.endAngle number
Start angle of pie/doughnut series.
Default Value
- null
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.endAngle]=270>
</ej-chart>
commonSeriesOptions.explode boolean
Explodes the pie/doughnut slices on mouse move.
Default Value
- false
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.explode]="true">
</ej-chart>
commonSeriesOptions.explodeAll boolean
Explodes all the slice of pie/doughnut on render.
Default Value
- false
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.explodeAll]="true">
</ej-chart>
commonSeriesOptions.explodeIndex number
Index of the point to be exploded from pie/doughnut/pyramid/funnel.
Default Value
- null
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.explodeIndex]=2>
</ej-chart>
commonSeriesOptions.explodeOffset number
Specifies the distance of the slice from the center, when it is exploded.
Default Value
- 0.4
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.explodeOffset]=20>
</ej-chart>
commonSeriesOptions.fill string
Fill color for all the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.fill="green">
</ej-chart>
commonSeriesOptions.font object
Options for customizing the font of all the series.
commonSeriesOptions.font.color string
Font color of the text in all series.
Default Value
- “#707070”
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.font]="{color:'green'}">
</ej-chart>
commonSeriesOptions.font.fontFamily string
Font Family for all the series.
Default Value
- “Segoe UI”
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.font]="{fontFamily:'Algerian'}">
</ej-chart>
commonSeriesOptions.font.fontStyle enum
Specifies the font Style for all the series.
Name | Type | Description |
---|---|---|
Normal | string | Specifies the fontStyle as normal. |
Italic | string | Specifies the fontStyle as italic. |
Default Value
- “normal”
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.font]="{fontStyle:'italic'}">
</ej-chart>
commonSeriesOptions.font.fontWeight enum
Specifies the font weight for all the series.
Name | Type | Description |
---|---|---|
Regular | string | Specifies the font weight as regular. |
Bold | string | Specifies the font weight as bold. |
Lighter | string | Specifies the font weight as lighter. |
Default Value
- “regular”
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.font]="{fontWeight:'lighter'}">
</ej-chart>
commonSeriesOptions.font.opacity number
Opacity for text in all the series.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.font]="{opacity:0.5}">
</ej-chart>
commonSeriesOptions.font.size string
Font size for text in all the series.
Default Value
- “12px”
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { size: '14px' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.funnelHeight string
Sets the height of the funnel in funnel series. Values can be either pixel or percentage.
Default Value
- “32.7%”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.funnelHeight="40%">
</ej-chart>
commonSeriesOptions.funnelWidth string
Sets the width of the funnel in funnel series. Values can be either pixel or percentage.
Default Value
- “11.6%”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.funnelWidth="40%">
</ej-chart>
commonSeriesOptions.gapRatio number
Gap between the slices in pyramid and funnel series.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.gapRatio]=0.5>
</ej-chart>
commonSeriesOptions.isClosed boolean
Specifies whether to join start and end point of a line/area series used in polar/radar chart to form a closed path.
Default Value
- true
Example
<ej-chart id="container" [commonSeriesOptions.isClosed]="false" >
</ej-chart>
commonSeriesOptions.isStacking boolean
Specifies whether to stack the column series in polar/radar charts.
Default Value
- false
Example
<ej-chart id="container" [commonSeriesOptions.isStacking]="true" >
</ej-chart>
commonSeriesOptions.isTransposed boolean
Renders the chart vertically. This is applicable only for Cartesian type series.
Default Value
- false
Example
<ej-chart id="container" [commonSeriesOptions.isTransposed]="false" >
</ej-chart>
commonSeriesOptions.showMedian boolean
Render the x mark in the center of the box and whisker series type.x represents the average value of the box and whisker series.
Default Value
- true
Example
<ej-chart id="container" commonSeriesOptions.showMedian="true" >
</ej-chart>
commonSeriesOptions.labelPosition enum
Position of the data label in pie/doughnut/pyramid/funnel series. OutsideExtended position is not applicable for pyramid/funnel.
Name | Type | Description |
---|---|---|
Inside | string | To place the datalabel inside the chart. |
Outside | string | To place the datalabel outside the chart. |
OutsideExtended | string | To place the datalabel at the extend of the chart. |
Default Value
- “inside”. See LabelPosition
Example
this.dataMarker = {
dataLabel: {
visible: true,
// ...
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" commonSeriesOptions.labelPosition="outside" >
</ej-chart>
commonSeriesOptions.splitMode enum
Specifies the mode for splitting the data points in pieOfPie series.
Name | Type | Description |
---|---|---|
Position | string | Splitting the data points based on the specified position value. |
Value | string | Splitting the data points based on the specified Y value. |
Percentage | string | Splitting the data points based on the specified percentage value. |
Indexes | string | The data points with the specified indexes are get splitted. |
Default Value
- “value”. See SplitMode
Example
<ej-chart id="container" commonSeriesOptions.splitMode="position" >
</ej-chart>
commonSeriesOptions.boxPlotMode enum
Quartile calculation has been performed in three different formulas to render the box and whisker series.
Name | Type | Description |
---|---|---|
Exclusive | string | To render the series with exclusive calculations |
Inclusive | string | To render the series with inclusive calculations |
Normal | string | To render the series with normal calculations |
Default Value
- “exclusive”
Example
<ej-chart id="chartcontainer">
<e-seriescollection>
<e-series boxPlotMode="inclusive"></e-series>
</e-seriescollection>
</ej-chart>
commonSeriesOptions.bubbleOptions object
Options for customizing the bubble options of the Bubble series
commonSeriesOptions.bubbleOptions.radiusMode enum
Used for the calculation of the bubble radius based on the mode selected
Name | Type | Description |
---|---|---|
MinMax | string | To render the bubble based on the Minimum and Maximum radius |
Auto | string | To render the bubble based on the Range and Size of the Chart |
Default Value
- “minmax”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.bubbleOptions.radiusMode="minMax">
</ej-chart>
commonSeriesOptions.bubbleOptions.minRadius number
Used for the setting the minimum radius of the bubble
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.bubbleOptions.minRadius]= 10>
</ej-chart>
commonSeriesOptions.bubbleOptions.maxRadius number
Used for setting the maximum radius of the bubble
Default Value
- 3
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.bubbleOptions.maxRadius]= 10>
</ej-chart>
commonSeriesOptions.lineCap enum
Specifies the line cap of the series.
Name | Type | Description |
---|---|---|
Butt | string | Specifies the line cap of the series to butt. |
Round | string | Specifies the line cap of the series to round. |
Square | string | Specifies the line cap of the series to square. |
Default Value
- “butt”. See LineCap
Example
<ej-chart id="container" commonSeriesOptions.lineCap="butt" >
</ej-chart>
commonSeriesOptions.lineJoin enum
Specifies the type of shape to be used where two lines meet.
Name | Type | Description |
---|---|---|
Round | string | Line join will be round. |
Bevel | string | Line join will be bevel. |
Miter | string | Line join will be miter. |
Default Value
- “round”. See LineJoin
Example
<ej-chart id="container" commonSeriesOptions.lineJoin="round" >
</ej-chart>
commonSeriesOptions.marker object
Options for displaying and customizing marker for individual point in a series. Marker contains shapes and/or data labels.
commonSeriesOptions.marker.border object
Options for customizing the border of the marker shape.
commonSeriesOptions.marker.border.color string
Border color of the marker shape.
Default Value
- “white”
Example
this.dataMarker = {
visible:true,
border:{color:'green'},
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.border.width number
Border width of the marker shape.
Default Value
- 3
Example
this.dataMarker = {
visible:true,
border:{width:2},
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.dataLabel object
Options for displaying and customizing data labels.
commonSeriesOptions.marker.dataLabel.angle number
Angle of the data label in degrees. Only the text gets rotated, whereas the background and border does not rotate.
Default Value
- null
Example
this.dataMarker = {
dataLabel:{
visible:true,
angle:90
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.maximumLabelWidth number
Maximum label width of the data label.
Default Value
- null
Example
this.dataMarker = {
dataLabel:{
visible:true,
maximumLabelWidth:90
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.enableWrap boolean
Enable the wrap option to the data label.
Default Value
- false
Example
this.dataMarker = {
dataLabel:{
visible:true,
enableWrap:true,
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.border object
Options for customizing the border of the data label.
commonSeriesOptions.marker.dataLabel.border.color string
Border color of the data label.
Default Value
- null
Example
this.dataMarker = {
dataLabel:{
visible:true,
shape:'rectangle',
border:{color:'green'}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.border.width number
Border width of the data label.
Default Value
- 0.1
Example
this.dataMarker = {
dataLabel:{
visible:true,
shape:'rectangle',
border:{width:2}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.connectorLine object
Options for displaying and customizing the line that connects point and data label.
commonSeriesOptions.marker.dataLabel.connectorLine.type enum
Specifies when the connector has to be drawn as Bezier curve or straight line. This is applicable only for Pie and Doughnut chart types.
Name | Type | Description |
---|---|---|
Line | string | ConnectorLine type is line. |
Bezier | string | ConnectorLine type is Bezier. |
Default Value
- “line”. See ConnectorLineType
Example
this.dataMarker = {
dataLabel:{
visible:true,
connectorLine: { type: 'bezier' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.connectorLine.width number
Width of the connector.
Default Value
- 0.5
Example
this.dataMarker = {
dataLabel:{
visible:true,
connectorLine: { width: 2 }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.connectorLine.color string
Color of the connector line.
Default Value
- “#565656”
Example
this.dataMarker = {
dataLabel:{
visible:true,
connectorLine: { color: 'black' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
### commonSeriesOptions.marker.dataLabel.connectorLine.height string
Height of the connector line.
Default Value
- null
Example
commonSeriesOptions.marker.dataLabel.fill string
Background color of the data label.
Default Value
- null
Example
this.dataMarker = {
dataLabel:{
visible:true,
shape:'rectangle',
fill:'green',
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.font object
Options for customizing the data label font.
commonSeriesOptions.marker.dataLabel.font.fontFamily string
Font family of the data label.
Default Value
- “Segoe UI”
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { fontFamily: 'Algerian' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.font.fontStyle enum
Font style of the data label.
Default Value
- “normal”. See FontStyle
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { fontStyle: 'italic' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.font.fontWeight enum
Font weight of the data label.
Default Value
- “regular”. See FontWeight
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { fontWeight: 'lighter' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.font.opacity number
Opacity of the text.
Default Value
- 1
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { opacity: 0.5 }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.font.color string
Font color of the data label text.
Default Value
- null
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { color: 'red' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.font.size string
Font size of the data label.
Default Value
- “12px”
Example
this.dataMarker = {
dataLabel:{
visible:true,
font: { size: '14px' }
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.horizontalTextAlignment enum
Horizontal alignment of the data label.
Name | Type | Description |
---|---|---|
Center | string | Place the series to the center of the point. |
Near | string | Place the series to the left of the point. |
Far | string | Place the annotation to the right of the point. |
Default Value
- “center”
Example
this.dataMarker = {
dataLabel:{
visible:true,
horizontalTextAlignment:"far"
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.margin object
Margin of the text to its background shape. The size of the background shape increases based on the margin applied to its text.
commonSeriesOptions.marker.dataLabel.margin.bottom number
Bottom margin of the text.
Default Value
- 5
Example
this.dataMarker = {
dataLabel:{
visible:true,
margin:{bottom:10}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.margin.left number
Left margin of the text.
Default Value
- 5
Example
this.dataMarker = {
dataLabel:{
visible:true,
margin:{left:10}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.margin.right number
Right margin of the text.
Default Value
- 5
Example
this.dataMarker = {
dataLabel:{
visible:true,
margin:{right:10}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.margin.top number
Top margin of the text.
Default Value
- 5
Example
this.dataMarker = {
dataLabel:{
visible:true,
margin:{top:10}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.opacity number
Opacity of the data label.
Default Value
- 1
Example
this.dataMarker = {
dataLabel:{
visible:true,
opacity:0.5
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.offset object|number
Options for customizing the datalabel positions
commonSeriesOptions.marker.dataLabel.offset.x number
X value or horizontal offset to position the labels in chart.
Default Value
- 0
Example
this.dataMarker = {
dataLabel:{
visible:true,
offset:{x:10}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.offset.y number
Y value or vertical offset to position the labels.
Default Value
- 0
Example
this.dataMarker = {
dataLabel:{
visible:true,
offset:{y:10}
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.shape enum
Background shape of the data label.
Name | Type | Description |
---|---|---|
None | string | No shape for the datalabel. |
LeftArrow | string | Shape of the datalabel will be leftarrow. |
RightArrow | string | Shape of the datalabel will be rightarrow. |
Circle | string | Shape of the datalabel will be circle. |
Cross | string | Shape of the datalabel will be cross. |
HorizLine | string | Shape of the datalabel will be horizline. |
VertLine | string | Shape of the datalabel will be vertline. |
Diamond | string | Shape of the datalabel will be diamond. |
Rectangle | string | Shape of the datalabel will be rectangle. |
Triangle | string | Shape of the datalabel will be triangle. |
Hexagon | string | Shape of the datalabel will be hexagon. |
Pentagon | string | Shape of the datalabel will be pentagon. |
Star | string | Shape of the datalabel will be star. |
Ellipse | string | Shape of the datalabel will be ellipse. |
Trapezoid | string | Shape of the datalabel will be trapezoid. |
UpArrow | string | Shape of the datalabel will be uparrow. |
DownArrow | string | Shape of the datalabel will be downarrow. |
Image | string | Shape of the datalabel will be image. |
SeriesType | string | Shape of the datalabel will be SeriesType. |
Default Value
- “none”. See Shape
Example
this.dataMarker = {
dataLabel:{
visible:true,
shape:'circle'
}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.dataLabel.template string
Custom template to format the data label content. Use “point.x” and “point.y” as a placeholder text to display the corresponding data point’s x and y value.
Default Value
- ””
Example
this.dataMarker = {
dataLabel:{
visible:true,
template:'LabelTemplateID'
}
};
<div id="LabelTemplateID">
<div id="left">
<img src="../images/chart/icon_investments.png"/>
</div>
<div id="right">
<div id="point">#point.y#%</div>
</div>
</div>
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.dataLabel.textMappingName string
Name of a field in data source, where datalabel text is displayed.
Default Value
- ””
Example
this.dataMarker = {
dataLabel:{
textMappingName:'TextFieldName'
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.dataLabel.textPosition enum
Specifies the position of the data label. This property can be used only for the series such as column, bar, stacked column, stacked bar, 100% stacked column, 100% stacked bar, candle and OHLC.
Name | Type | Description |
---|---|---|
Top | string | Place the datalabel to the top of the point. |
Bottom | string | Place the datalabel to the bottom of the point. |
Middle | string | Place the datalabel on the point. |
Default Value
- “top”. See TextPosition
Example
this.dataMarker = {
dataLabel:{
textPosition:'bottom'
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.dataLabel.verticalTextAlignment enum
Vertical alignment of the data label.
Name | Type | Description |
---|---|---|
Center | string | Place the datalabel on the point. |
Near | string | Place the datalabel below the point. |
Far | string | Place the datalabel away from the point. |
Default Value
- “center”
Example
this.dataMarker = {
dataLabel:{
verticalTextAlignment: 'far'
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.dataLabel.visible boolean
Controls the visibility of the data labels.
Default Value
- false
Example
this.dataMarker = {
dataLabel:{
visible: true
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.fill string
Color of the marker shape.
Default Value
- null
Example
this.dataMarker = {
fill: "green"
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.imageUrl string
The URL for the Image to be displayed as marker. In order to display image as marker, set series.marker.shape as ‘image’.
Default Value
- ””
Example
this.dataMarker = {
imageUrl: "../images/sample.png"
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.opacity number
Opacity of the marker.
Default Value
- 1
Example
this.dataMarker = {
opacity: 0.5
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.shape enum
Specifies the shape of the marker.
Default Value
- “circle”. See Shape
Example
this.dataMarker = {
shape: "rectangle"
};
<ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">
</ej-chart>
commonSeriesOptions.marker.size object
Options for customizing the size of the marker shape.
commonSeriesOptions.marker.size.height number
Height of the marker.
Default Value
- 6
Example
this.dataMarker = {
size:{height:5}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.size.width number
Width of the marker.
Default Value
- 6
Example
this.dataMarker = {
size:{width:5}
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.marker.visible boolean
Controls the visibility of the marker shape.
Default Value
- false
Example
this.dataMarker = {
visible: true
};
<ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
</ej-chart>
commonSeriesOptions.opacity number
Opacity of the series.
Default Value
- 1
Example
<ej-chart id="container" [commonSeriesOptions.opacity]=0.5 >
</ej-chart>
commonSeriesOptions.outlierSettings object
Options for customizing the outlier of the series.
commonSeriesOptions.outlierSettings.shape enum
Specifies the shape of the outlier.
Default Value
- “circle”. See Shape
Example
this.outlierSettings = {
shape:"rectangle"
};
<ej-chart id="chartcontainer" [commonSeriesOptions.outlierSettings]="outlierSettings">
</ej-chart>
commonSeriesOptions.outlierSettings.size object
Options for customizing the size of the outlier shape.
commonSeriesOptions.outlierSettings.size.height number
Height of the outlier shape.
Default Value
- 6
Example
this.outlierSettings = {
size:{
height: 5
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.outlierSettings]="outlierSettings">
</ej-chart>
commonSeriesOptions.outlierSettings.size.width number
Width of the outlier shape.
Default Value
- 6
Example
this.outlierSettings = {
size:{
width: 2
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.outlierSettings]="outlierSettings">
</ej-chart>
commonSeriesOptions.palette string
Name of a field in data source, where the fill color for all the data points is generated.
Default Value
- ””
Example
commonSeriesOptions.pieCoefficient number
Controls the size of pie series. Value ranges from 0 to 1.
Default Value
- 0.8
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.pieCoefficient]=1>
</ej-chart>
commonSeriesOptions.pieOfPieCoefficient number
Controls the size of the second pie in pieOfPie series. Value ranges from 0 to 1.
Default Value
- 0.6
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.pieofpiecoefficient]=1>
</ej-chart>
commonSeriesOptions.splitValue string
Split Value of pieofpie series.
Default Value
- null
Example
<ej-chart id="container" [commonSeriesOptions.splitvalue]="40">
</ej-chart>
commonSeriesOptions.cardinalSplineTension number
Different values for the tension parameter will produce different curves through a given set of points.Value ranges from 0 to 1.
Default Value
- 0.5
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.cardinalSplineTension]= 0.7>
</ej-chart>
commonSeriesOptions.splineType enum
To render the spline series curve in different forms.
Name | Type | Description |
---|---|---|
Natural | string | To render the series with natural curve |
Monotonic | string | To render the series with monotonic curve |
Cardinal | string | To render the series with cardinal curve |
Clamped | string | To render the series with clamped curve |
Default Value
- “natural”
Example
<ej-chart id="container" commonSeriesOptions.splineType="Natural" >
</ej-chart>
### commonSeriesOptions.gapWidth number
Distance between the two pie’s in pieOfPie series.
Default Value
- 50
Example
commonSeriesOptions.pointColorMappingName string
Name of the property in the datasource that contains fill color for the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.pointColorMappingName]="colorFieldName">
</ej-chart>
commonSeriesOptions.pyramidMode enum
Specifies the mode of the pyramid series.
Name | Type | Description |
---|---|---|
Linear | string | Specifies the pyramid mode to linear. |
Surface | string | Specifies the pyramid mode to surface. |
Default Value
- “linear”. See PyramidMode
Example
<ej-chart id="chartcontainer" commonSeriesOptions.pyramidMode="linear">
</ej-chart>
commonSeriesOptions.startAngle number
Start angle from where the pie/doughnut series renders. By default it starts from 0.
Default Value
- null
Example
<ej-chart id="container" [commonSeriesOptions.startAngle]=150>
</ej-chart>
commonSeriesOptions.cornerRadius object
Options for customizing the corner radius. cornerRadius property also takes the numeric input and applies it for all the four corners of the column.
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius]=20>
</ej-chart>
commonSeriesOptions.cornerRadius.topLeft number
Specifies the radius for the top left corner.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.topLeft]=20>
</ej-chart>
commonSeriesOptions.cornerRadius.topRight number
Specifies the radius for the top right corner.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.topRight]=20>
</ej-chart>
commonSeriesOptions.cornerRadius.bottomLeft number
Specifies the radius for the bottom left corner.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.bottomLeft]=20>
</ej-chart>
commonSeriesOptions.cornerRadius.bottomRight number
Specifies the radius for the bottom right corner.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.bottomRight]=20>
</ej-chart>
commonSeriesOptions.tooltip object
Options for customizing the tooltip of chart.
commonSeriesOptions.tooltip.border object
Options for customizing the border of the tooltip.
commonSeriesOptions.tooltip.border.color string
Border color of the tooltip.
Default Value
- null
Example
this.tooltip = {
visible:true,
border:{color:'green'}
};
<ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
</ej-chart>
commonSeriesOptions.tooltip.border.width number
Border width of the tooltip.
Default Value
- 1
Example
this.tooltip = {
visible:true,
border:{width:2}
};
<ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
</ej-chart>
commonSeriesOptions.tooltip.rx number
Customize the corner radius of the tooltip rectangle.
Default Value
0
Example
<ej-chart id="container" [commonSeriesOptions.tooltip]="{rx: 10}">
</ej-chart>
commonSeriesOptions.tooltip.ry number
Customize the corner radius of the tooltip rectangle.
Default Value
0
Example
<ej-chart id="container" [commonSeriesOptions.tooltip]="{ry: 10}">
</ej-chart>
commonSeriesOptions.tooltip.duration string
Specifies the duration, the tooltip has to be displayed.
Default Value
- “500ms”
Example
this.tooltip = {
duration:"300ms"
};
<ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
</ej-chart>
commonSeriesOptions.tooltip.enableAnimation boolean
Enables/disables the animation of the tooltip when moving from one point to other.
Default Value
- true
Example
this.tooltip = {
enableAnimation: false
};
<ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
</ej-chart>
commonSeriesOptions.tooltip.fill string
Background color of the tooltip.
Default Value
- null
Example
this.tooltip = {
fill: 'green'
};
<ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
</ej-chart>
commonSeriesOptions.tooltip.format string
Format of the tooltip content.
Default Value
- “#point.x# : #point.y#”
Example
<ej-chart id="container" [commonSeriesOptions.tooltip]="{format:'#point.x# : #point.y#%'}" >
</ej-chart>
commonSeriesOptions.tooltip.opacity number
Opacity of the tooltip.
Default Value
- 0.5
Example
<ej-chart id="container" [commonSeriesOptions.tooltip]="{opacity: 0.5}" >
</ej-chart>
commonSeriesOptions.tooltip.template string
Custom template to format the tooltip content. Use “point.x” and “point.y” as a placeholder text to display the corresponding data point’s x and y value.
Default Value
- null
Example
<body>
<!-- Create Tooltip template here -->
<div id="Tooltip" style="display: none;">
<div id="icon">
<div id="eficon"> </div>
</div>
<div id="value">
<div>
<label id="efpercentage"> #point.y#% </label>
<label id="ef">Efficiency </label>
</div>
</div>
</div>
<ej-chart id="chart" [commonSeriesOptions.tooltip]="{template:'Tooltip'}">
</ej-chart>
</body>
commonSeriesOptions.tooltip.visible boolean
Controls the visibility of the tooltip.
Default Value
- false
Example
<ej-chart id="chart" [commonSeriesOptions.tooltip.visible]="true">
</ej-chart>
commonSeriesOptions.type enum
Specifies the type of the series to render in chart.
Name | Type | Description |
---|---|---|
Area | string | Specifies the series type as area. |
Line | string | Specifies the series type as line. |
Spline | string | Specifies the series type as spline. |
Column | string | Specifies the series type as column. |
Scatter | string | Specifies the series type as scatter. |
Bubble | string | Specifies the series type as bubble. |
SplineArea | string | Specifies the series type as splinearea. |
StepArea | string | Specifies the series type as steparea. |
StepLine | string | Specifies the series type as stepline. |
Pie | string | PSpecifies the series type as pie. |
HiLo | string | Specifies the series type as HiLo. |
HiLoOpenClose | string | Specifies the series type as HiLoOpenClose. |
Candle | string | Specifies the series type as candle. |
Bar | string | Specifies the series type as bar. |
StackingArea | string | Specifies the series type as stackingarea. |
StackingArea100 | string | Specifies the series type as stackingarea100. |
RangeColumn | string | Specifies the series type as rangecolumn. |
StackingColumn | string | Specifies the series type as stackingcolumn. |
StackingColumn100 | string | Specifies the series type as stackingcolumn100. |
StackingBar | string | Specifies the series type as stackingbar. |
StackingBar100 | string | Specifies the series type as stackingbar100. |
Pyramid | string | Specifies the series type as pyramid. |
Funnel | string | Specifies the series type as funnel. |
Doughnut | string | Specifies the series type as doughnut. |
Polar | string | Specifies the series type as polar. |
Radar | string | Specifies the series type as radar. |
RangeArea | string | Specifies the series type as rangearea. |
Default Value
- “column”. See Type
Example
<ej-chart id="chartcontainer" commonSeriesOptions.type = "spline">
</ej-chart>
commonSeriesOptions.xAxisName string
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.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.xAxisName = "xAxis">
</ej-chart>
commonSeriesOptions.xName string
Name of the property in the datasource that contains x value for the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.xName = "XValue">
</ej-chart>
commonSeriesOptions.yAxisName string
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.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.yAxisName = "yAxis">
</ej-chart>
commonSeriesOptions.yName string
Name of the property in the datasource that contains y value for the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.yName = "yValue">
</ej-chart>
commonSeriesOptions.high string
Name of the property in the datasource that contains high value for the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.high="high">
</ej-chart>
commonSeriesOptions.low string
Name of the property in the datasource that contains low value for the series.
Default Value
- null
Example
<ej-chart id="container" commonSeriesOptions.low="" >
</ej-chart>
commonSeriesOptions.open string
Name of the property in the datasource that contains open value for the series.
Default Value
- null
Example
<ej-chart id="container" commonSeriesOptions.open="" >
</ej-chart>
commonSeriesOptions.close string
Name of the property in the datasource that contains close value for the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.close="close">
</ej-chart>
commonSeriesOptions.zOrder number
Z-order of the series.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.zOrder]="1">
</ej-chart>
commonSeriesOptions.size string
Name of the property in the datasource that contains the size value for the bubble series.
Default Value
- null
Example
commonSeriesOptions.emptyPointSettings object
Options for customizing the empty point in the series.
commonSeriesOptions.emptyPointSettings.visible boolean
Controls the visibility of the empty point.
Default Value
- true
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.emptyPointSettings.visible]="true">
</ej-chart>
commonSeriesOptions.emptyPointSettings.displayMode enum
Specifies the mode of empty point.
Name | Type | Description |
---|---|---|
Gap | string | Display the gap for empty point. |
Zero | string | Set zero has empty point value. |
Average | string | Set the average of the adjacent point to empty point. |
Default Value
- “gap”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.emptyPointSettings.displayMode ="average">
</ej-chart>
See Mode.
commonSeriesOptions.emptyPointSettings.style object
Options for customizing the color and border of the empty point in the series.
commonSeriesOptions.emptyPointSettings.style.color string
Color of the empty point.
Default Value
- ””
Example
this.emptyStyle = {
color: "#ffa000",
};
<ej-chart id="chartcontainer" [commonSeriesOptions.emptyPointSettings.visible]="true" [commonSeriesOptions.emptyPointSettings.style]="emptyStyle"></ej-chart>
commonSeriesOptions.emptyPointSettings.style.border object
Options for customizing border of the empty point in the series.
commonSeriesOptions.emptyPointSettings.style.border.color string
Border color of the empty point.
Default Value
- ””
Example
this.emptyStyle = {
color: "#ffa000",
border: {
color: "gray",
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.emptyPointSettings.visible]="true" [commonSeriesOptions.emptyPointSettings.style]="emptyStyle"></ej-chart>
commonSeriesOptions.emptyPointSettings.style.border.width number
Border width of the empty point.
Default Value
- 1
Example
this.emptyStyle = {
color: "#ffa000",
border: {
color: "gray",
width: 2
}
};
<ej-chart id="chartcontainer" [commonSeriesOptions.emptyPointSettings.visible]="true" [commonSeriesOptions.emptyPointSettings.style]="emptyStyle"></ej-chart>
commonSeriesOptions.positiveFill string
Fill color for the positive column of the waterfall.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.positiveFill="red">
</ej-chart>
commonSeriesOptions.connectorLine object
Options for customizing the waterfall connector line.
commonSeriesOptions.connectorLine.width number
Width of the connector line.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.connectorLine.width]="2">
</ej-chart>
commonSeriesOptions.connectorLine.color string
Color of the connector line.
Default Value
- “#565656”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.connectorLine.color="#333000">
</ej-chart>
commonSeriesOptions.connectorLine.dashArray string
DashArray of the connector line.
Default Value
- null
Example
<ej-chart id="chartcontainer" commonSeriesOptions.connectorLine.dashArray="3,2">
</ej-chart>
commonSeriesOptions.connectorLine.opacity number
DashArray of the connector line.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.connectorLine.opacity]="0.5">
</ej-chart>
commonSeriesOptions.dragSettings object
Options to customize the drag and drop in series.
commonSeriesOptions.dragSettings.enable boolean
drag/drop the series
Default Value
- “false”
Example
<ej-chart id="container" [commonSeriesOptions.dragSettings.enable]="true">
</ej-chart>
commonSeriesOptions.dragSettings.type string
Specifies the type of drag settings.
Default Value
- “xy”
Example
<ej-chart id="container" [commonSeriesOptions.dragSettings.type]="x">
</ej-chart>
commonSeriesOptions.errorBar object
Options to customize the error bar in series.
commonSeriesOptions.errorBar.visibility boolean
Show/hides the error bar
Default Value
- “visible”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.errorBar.visibility="visible">
</ej-chart>
commonSeriesOptions.errorBar.type enum
Specifies the type of error bar.
Name | Type | Description |
---|---|---|
FixedValue | string | Set the type of the error bar as FixedValue. |
Percentage | string | Set the type of the error bar as Percentage. |
StandardDeviation | string | Set the type of the error bar as StandardDeviation. |
StandardError | string | Set the type of the error bar as StandardError. |
Default Value
- “FixedValue”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.errorBar.type="Percentage">
</ej-chart>
commonSeriesOptions.errorBar.mode enum
Specifies the mode of error bar.
Name | Type | Description |
---|---|---|
Both | string | Place the annotation to the top of the chart. |
Vertical | string | Place the annotation to the bottom of the chart. |
Horizontal | string | Place the annotation to the middle of the chart. |
Default Value
- “vertical”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.errorBar.mode ="Horizontal">
</ej-chart>
commonSeriesOptions.errorBar.direction enum
Specifies the direction of error bar.
Name | Type | Description |
---|---|---|
Both | string | Set the direction to both. |
Plus | string | Set the direction to plus. |
Minus | string | Set the direction to minus. |
Default Value
- “both”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.errorBar.direction="plus">
</ej-chart>
commonSeriesOptions.errorBar.verticalErrorValue number
Value of vertical error bar.
Default Value
- 3
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.verticalErrorValue]=1>
</ej-chart>
commonSeriesOptions.errorBar.horizontalErrorValue number
Value of horizontal error bar.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.horizontalErrorValue]=1>
</ej-chart>
commonSeriesOptions.errorBar.horizontalPositiveErrorValue number
Value of positive horizontal error bar.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.horizontalPositiveErrorValue]=1>
</ej-chart>
commonSeriesOptions.errorBar.horizontalNegativeErrorValue number
Value of negative horizontal error bar.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.horizontalNegativeErrorValue]=1>
</ej-chart>
commonSeriesOptions.errorBar.verticalPositiveErrorValue number
Value of positive vertical error bar.
Default Value
- 5
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.verticalPositiveErrorValue]=1>
</ej-chart>
commonSeriesOptions.errorBar.verticalNegativeErrorValue number
Value of negative vertical error bar.
Default Value
- 5
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.verticalNegativeErrorValue]=1>
</ej-chart>
commonSeriesOptions.errorBar.fill string
Fill color of the error bar.
Default Value
- “#000000”
Example
<ej-chart id="chartcontainer" commonSeriesOptions.errorBar.fill="red">
</ej-chart>
commonSeriesOptions.errorBar.width number
Width of the error bar.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.width]=1>
</ej-chart>
commonSeriesOptions.errorBar.cap object
Options for customizing the error bar cap.
commonSeriesOptions.errorBar.cap.visible boolean
Show/Hides the error bar cap.
Default Value
- true
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.visible]="true">
</ej-chart>
commonSeriesOptions.errorBar.cap.width number
Width of the error bar cap.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.width]=1>
</ej-chart>
commonSeriesOptions.errorBar.cap.length number
Length of the error bar cap.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.length]=10>
</ej-chart>
commonSeriesOptions.errorBar.cap.fill string
Color of the error bar cap.
Default Value
- “#000000”
Example
<ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.fill]="red">
</ej-chart>
commonSeriesOptions.trendlines array
Option to add the trendlines to chart.
commonSeriesOptions.trendlines.visibility boolean
Show/hides the trendline.
Default Value
- ””
Example
this.ChartTrendlines= [{
visibility:'visible'
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.visibleOnLegend string
Show/hides the trendline legend.
Default Value
- visible
Example
this.ChartTrendlines= [{
visibleOnLegend:'hidden'
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.type string
Specifies the type of the trendline for the series.
Default Value
- “linear”. See TrendlinesType
Example
this.ChartTrendlines= [{
type:'linear'
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.name string
Name for the trendlines that is to be displayed in the legend text.
Default Value
- “trendline”
Example
this.ChartTrendlines= [{
name:'Trendline'
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.fill string
Fill color of the trendlines.
Default Value
- “#0000FF”
Example
this.ChartTrendlines= [{
fill:'#0000FF'
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.width number
Width of the trendlines.
Default Value
- 1
Example
this.ChartTrendlines= [{
width: 1
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.opacity number
Opacity of the trendline.
Default Value
- 1
Example
this.ChartTrendlines= [{
opacity: 0.5
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.dashArray string
Pattern of dashes and gaps used to stroke the trendline.
Default Value
- ””
Example
this.ChartTrendlines= [{
dashArray: '2,3'
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.forwardForecast number
Future trends of the current series.
Default Value
- 0
Example
this.ChartTrendlines= [{
forwardForeCast: 2
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.backwardForecast number
Past trends of the current series.
Default Value
- 0
Example
this.ChartTrendlines= [{
backwardForeCast: 2
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.polynomialOrder number
Specifies the order of the polynomial trendlines.
Default Value
- 0
Example
this.ChartTrendlines= [{
polynomialOrder: 2
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.period number
Specifies the moving average starting period value.
Default Value
- 2
Example
this.ChartTrendlines= [{
period: 3
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip object
Options for customizing the tooltip of the trendlines in the chart.
commonSeriesOptions.trendlines.tooltip.border object
Options for customizing the border of the trendline tooltip.
commonSeriesOptions.trendlines.tooltip.border.color string
Border color of the trendline tooltip.
Default Value
- null
Example
this.ChartTrendlines= [{
tooltip:{
border:'green'
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.border.width number
Border width of the trendline tooltip.
Default Value
- 1
Example
this.ChartTrendlines= [{
tooltip:{
width: 2
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.rx number
Customize the corner radius of the trendline tooltip rectangle.
Default Value
0
Example
this.ChartTrendlines= [{
tooltip:{
rx: 10
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.ry number
Customize the corner radius of the trendline tooltip rectangle.
Default Value
0
Example
this.ChartTrendlines= [{
tooltip:{
ry: 10
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.duration string
Specifies the duration, the tooltip has to be displayed.
Default Value
- “500ms”
Example
this.ChartTrendlines= [{
tooltip:{
duration: "300ms"
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.enableAnimation boolean
Enables/disables the animation of the trendline tooltip when moving from one point to other.
Default Value
- true
Example
this.ChartTrendlines= [{
tooltip:{
enableAnimation: true
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.fill string
Background color of the trendline tooltip.
Default Value
- null
Example
this.ChartTrendlines= [{
tooltip:{
fill: 'green'
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.format string
Format of the tooltip content displayed in the trendlines.
Default Value
- “#point.x# : #point.y#”
Example
this.ChartTrendlines= [{
tooltip:{
format: "#point.x# : #point.y#%"
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.tooltip.opacity number
Opacity of the trendline tooltip.
Default Value
- 0.5
Example
this.ChartTrendlines= [{
tooltip:{
opacity: 0.5
}
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.trendlines.intercept number
Specifies the intercept value of the trendlines.
Default Value
- null
Example
this.ChartTrendlines= [{
intercept :10
}];
<ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">
</ej-chart>
commonSeriesOptions.highlightSettings object
Options for customizing the appearance of the series or data point while highlighting.
commonSeriesOptions.highlightSettings.enable boolean
Enables/disables the ability to highlight the series or data point interactively.
Default Value
- false
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true'}" >
</ej-chart>
commonSeriesOptions.highlightSettings.mode enum
Specifies whether the series or data point has to be highlighted.
Name | Type | Description |
---|---|---|
Series | string | Highlight/Select the series of the chart. |
Point | string | Highlight/Select the point in the series. |
Cluster | string | Highlight/Select the points all series of same index. |
Range | string | Select the data points by mouse dragging in the chart area. |
Default Value
- “series”. See Mode
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', mode:'point' }" >
</ej-chart>
commonSeriesOptions.highlightSettings.color string
Color of the series/point on highlight.
Default Value
- ””
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', color:'red' }" >
</ej-chart>
commonSeriesOptions.highlightSettings.opacity number
Opacity of the series/point on highlight.
Default Value
- 0.6
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', opacity:1 }" >
</ej-chart>
commonSeriesOptions.highlightSettings.border object
Options for customizing the border of series on highlight.
commonSeriesOptions.highlightSettings.border.color string
Border color of the series/point on highlight.
Default Value
- ””
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', border:{color:'black'} }" >
</ej-chart>
commonSeriesOptions.highlightSettings.border.width string
Border width of the series/point on highlight.
Default Value
- 2
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', border:{width: 1} }" >
</ej-chart>
commonSeriesOptions.highlightSettings.pattern string
Specifies the pattern for the series/point on highlight.
Default Value
- “none”. See Pattern
Example
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', pattern:'chessboard' }" >
</ej-chart>
commonSeriesOptions.highlightSettings.customPattern string
Custom pattern for the series on highlight.
Default Value
- ””
Example
<body>
<svg>
<pattern id="dots_a" patternUnits="userSpaceOnUse" width="6" height="6">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="black" opacity="1">
</rect>
<path d='M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9'stroke-width="1" stroke="white">
</path>
</pattern>
</svg>
<ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', pattern: "custom",
customPattern: 'dots_a' }" >
</ej-chart>
</body>
commonSeriesOptions.selectionSettings object
Options for customizing the appearance of the series/data point on selection.
commonSeriesOptions.selectionSettings.enable boolean
Enables/disables the ability to select a series/data point interactively.
Default Value
- false
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true'}" >
</ej-chart>
commonSeriesOptions.selectionSettings.type enum
Specifies the type of selection.
Name | Type | Description |
---|---|---|
Single | string | It will be select the single series / point of the chart. |
Multiple | string | It will be select the multiple series / point of the chart. |
Default Value
- “single”
See. Type
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', type:'multiple' }" >
</ej-chart>
commonSeriesOptions.selectionSettings.mode enum
Specifies whether the series or data point has to be selected.
Default Value
- “series”. See Mode
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', mode:'point' }" >
</ej-chart>
commonSeriesOptions.selectionSettings.rangeType enum
Specifies the drawn rectangle type.
Name | Type | Description |
---|---|---|
XY | string | It will be draw a range rectangle in both horizontal and vertically. |
X | string | It will be draw a range rectangle in horizontally. |
Y | string | It will be draw a range rectangle in vertically. |
Default Value
- “xy”
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', rangeType:'x' }" >
</ej-chart>
commonSeriesOptions.selectionSettings.color string
Color of the series/point on selection.
Default Value
- ””
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', color:'red' }" >
</ej-chart>
commonSeriesOptions.selectionSettings.opacity number
Opacity of the series/point on selection.
Default Value
- 0.6
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', opacity:1 }" >
</ej-chart>
commonSeriesOptions.selectionSettings.border object
Options for customizing the border of the series on selection.
commonSeriesOptions.selectionSettings.border.color string
Border color of the series/point on selection.
Default Value
- ””
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', border:{color:'black'} }" >
</ej-chart>
commonSeriesOptions.selectionSettings.border.width string
Border width of the series/point on selection.
Default Value
- 2
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', border:{width: 1} }" >
</ej-chart>
commonSeriesOptions.selectionSettings.pattern string
Specifies the pattern for the series/point on selection.
Default Value
- “none”. See Pattern
Example
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', pattern:'chessboard' }" >
</ej-chart>
commonSeriesOptions.selectionSettings.customPattern string
Custom pattern for the series on selection.
Default Value
- ””
Example
<body>
<svg>
<pattern id="dots_a" patternUnits="userSpaceOnUse" width="6" height="6">
<rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="black" opacity="1">
</rect>
<path d='M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9'stroke-width="1" stroke="white">
</path>
</pattern>
</svg>
<ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', pattern: "custom",
customPattern: 'dots_a' }" >
</ej-chart>
</body>
selectedDataPointIndexes array
Options for displaying the chart along with selected points while loading
Default Value
- [ ]
Example
<ej-chart id="chartcontainer" [selectedDataPointIndexes]="[
{ seriesIndex:0 , pointIndex:2 },
{ seriesIndex:1 , pointIndex:4 }
]">
</ej-chart>
crosshair object
Options for displaying and customizing the crosshair.
crosshair.trackballTooltipSettings object
Options for customizing the trackball tooltip.
crosshair.trackballTooltipSettings.border object
Options for customizing the trackball tooltip border.
crosshair.trackballTooltipSettings.border.width number
Border width of the trackball tooltip.
Default Value
- null
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{border: {width:2}}" >
</ej-chart>
crosshair.trackballTooltipSettings.border.color string
Border color of the trackball tooltip.
Default Value
- null
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{border: {color:'green'}}" >
</ej-chart>
crosshair.trackballTooltipSettings.fill string
Background color of the trackball tooltip.
Default Value
- null
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{fill:'red'}" >
</ej-chart>
crosshair.trackballTooltipSettings.rx number
Rounded corner x value of the trackball tooltip.
Default Value
- 3
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{rx:5}" >
</ej-chart>
crosshair.trackballTooltipSettings.ry number
Rounded corner y value of the trackball tooltip.
Default Value
- 3
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{ry:5}" >
</ej-chart>
crosshair.trackballTooltipSettings.opacity number
Opacity value of the trackball tooltip.
Default Value
- 1
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{opacity:0.5}" >
</ej-chart>
crosshair.trackballTooltipSettings.mode enum
Specifies the mode of the trackball tooltip.
Name | Type | Description |
---|---|---|
Float | string | Shown the trackball tooltip as float mode. |
Grouping | string | Shown the trackball tooltip as grouping mode. |
Default Value
- “float”. See CrosshairMode
Example
<ej-chart id="chart"
[crosshair.trackballTooltipSettings]="{mode:'grouping'}" >
</ej-chart>
crosshair.marker object
Options for customizing the marker in crosshair.
crosshair.marker.border object
Options for customizing the border.
crosshair.marker.border.width number
Border width of the marker.
Default Value
- 3
Example
<ej-chart id="chart"
[crosshair.marker]="{border:{width:2}}" >
</ej-chart>
crosshair.marker.opacity boolean
Opacity of the marker.
Default Value
- true
Example
<ej-chart id="chart"
[crosshair.marker]="{opacity:0.5}" >
</ej-chart>
crosshair.marker.size object
Options for customizing the size of the marker.
crosshair.marker.size.height number
Height of the marker.
Default Value
- 10
Example
<ej-chart id="chart"
[crosshair.marker]="{size:{height:15}}" >
</ej-chart>
crosshair.marker.size.width number
Width of the marker.
Default Value
- 10
Example
<ej-chart id="chart"
[crosshair.marker]="{size:{width:15}}" >
</ej-chart>
crosshair.marker.visible boolean
Show/hides the marker.
Default Value
- true
Example
<ej-chart id="chart"
[crosshair.marker]="{visible:'true'}" >
</ej-chart>
crosshair.line object
Options for customizing the crosshair line.
crosshair.line.color string
Color of the crosshair line.
Default Value
- “transparent”
Example
<ej-chart id="chart"
crosshair.line.color="red" >
</ej-chart>
crosshair.line.width number
Width of the crosshair line.
Default Value
- 1
Example
<ej-chart id="chart"
[crosshair.line.width]=2 >
</ej-chart>
crosshair.type enum
Specifies the type of the crosshair. It can be trackball or crosshair
Name | Type | Description |
---|---|---|
Crosshair | string | View the value of an axis at mouse position. |
Trackball | string | Track a data point close to the mouse position. |
Default Value
- “crosshair”. See CrosshairType
Example
<ej-chart id="chart"
crosshair.type="trackball" >
</ej-chart>
crosshair.visible boolean
Show/hides the crosshair/trackball visibility.
Default Value
- false
Example
<ej-chart id="chart"
[crosshair.visible]="true" >
</ej-chart>
depth number
Depth of the 3D Chart from front view of series to background wall. This property is applicable only for 3D view.
Default Value
- 100
Example
<ej-chart id="chart" [depth]=100>
</ej-chart>
enable3D boolean
Controls whether 3D view has to be enabled or not. 3D view is supported only for column, bar. Stacking column, stacking bar, pie and doughnut series types.
Default Value
- false
Example
<ej-chart id="chart" [enable3D]="true">
</ej-chart>
enableCanvasRendering boolean
Controls whether Chart has to be rendered as Canvas or SVG. Canvas rendering supports all functionalities in SVG rendering except 3D Charts.
Default Value
- false
Example
<ej-chart id="chart" [enableCaanvasRendering]="true">
</ej-chart>
initSeriesRender boolean
Controls whether the series has to be rendered at initial loading of chart, this will be useful in scenarios where chart is placed at the bottom of the web page and we need to render the series only when the chart is visible while scrolling to the top.
Default Value
- true
Example
<ej-chart id="chartcontainer" [initSeriesRender]="false">
</ej-chart>
enableRotation boolean
Controls whether 3D view has to be rotated on dragging. This property is applicable only for 3D view.
Default Value
- false
Example
<ej-chart id="chart" [enableRotation]="true">
</ej-chart>
indicators array
Options to customize the technical indicators.
indicators.dPeriod number
The dPeriod value for stochastic indicator.
Default Value
- 3
Example
//Initializing Indicators
this.chartindicators = [{
dPeriod: 4
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.enableAnimation boolean
Enables/disables the animation.
Default Value
- false
Example
//Initializing Indicators
this.chartindicators = [{
enableAnimation: true
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.fill string
Color of the technical indicator.
Default Value
- “#00008B”
Example
//Initializing Indicators
this.chartindicators = [{
fill: "#ff0000"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.histogram object
Options to customize the histogram in MACD indicator.
indicators.histogram.border object
Options to customize the histogram border in MACD indicator.
indicators.histogram.border.color string
Color of the histogram border in MACD indicator.
Default Value
- “#9999ff”
Example
//Initializing Indicators
this.chartindicators = [{
histogram:{
border:{
color:"#ff0000"
}
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.histogram.border.width number
Controls the width of histogram border line in MACD indicator.
Default Value
- 1
Example
//Initializing Indicators
this.chartindicators = [{
histogram:{
border:{
width: 2
}
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.histogram.fill string
Color of histogram columns in MACD indicator.
Default Value
- “#ccccff”
Example
//Initializing Indicators
this.chartindicators = [{
histogram:{
fill:"#ff0000"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.histogram.opacity number
Opacity of histogram columns in MACD indicator.
Default Value
- 1
Example
//Initializing Indicators
this.chartindicators = [{
histogram:{
opacity: 0.5
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.kPeriod number
Specifies the k period in stochastic indicator.
Default Value
- 3
Example
//Initializing Indicators
this.chartindicators = [{
histogram:{
kPeriod: 4
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.longPeriod number
Specifies the long period in MACD indicator.
Default Value
- 26
Example
//Initializing Indicators
this.chartindicators = [{
longPeriod: 14
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.lowerLine object
Options to customize the lower line in indicators.
indicators.lowerLine.fill string
Color of lower line.
Default Value
- “#008000”
Example
//Initializing Indicators
this.chartindicators = [{
lowerLine:{
fill:"#ff0000"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.lowerLine.width number
Width of the lower line.
Default Value
- 2
Example
//Initializing Indicators
this.chartindicators = [{
lowerLine:{
width:3
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.macdLine object
Options to customize the MACD line.
indicators.macdLine.fill string
Color of MACD line.
Default Value
- “#ff9933”
Example
//Initializing Indicators
this.chartindicators = [{
macdLine:{
fill:"ff0000"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.macdLine.width number
Width of the MACD line.
Default Value
- 2
Example
//Initializing Indicators
this.chartindicators = [{
macdLine:{
width:2
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.macdType string
Specifies the type of the MACD indicator.
Default Value
- “line”. See MACDType
Example
//Initializing Indicators
this.chartindicators = [{
macdType:"both"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.period number
Specifies period value in indicator.
Default Value
- 14
Example
//Initializing Indicators
this.chartindicators = [{
period:20
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.periodLine object
Options to customize the period line in indicators.
indicators.periodLine.fill string
Color of period line in indicator.
Default Value
- “blue”
Example
//Initializing Indicators
this.chartindicators = [{
periodLine:{
fill:"ff0000"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.periodLine.width number
Width of the period line in indicators.
Default Value
- 2
Example
//Initializing Indicators
this.chartindicators = [{
periodLine:{
width:2
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.seriesName string
Name of the series for which indicator has to be drawn.
Default Value
- ””
Example
//Initializing Indicators
this.chartindicators = [{
seriesName :"rsi"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.shortPeriod number
Specifies the short period in MACD indicator.
Default Value
- 13
Example
//Initializing Indicators
this.chartindicators = [{
shortPeriod : 14
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.standardDeviations number
Specifies the standard deviation value for Bollinger band indicator.
Default Value
- 2
Example
//Initializing Indicators
this.chartindicators = [{
standardDeviations : 3
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip object
Options to customize the tooltip.
indicators.tooltip.border object
Option to customize the border of indicator tooltip.
indicators.tooltip.border.color string
Border color of indicator tooltip.
Default Value
- null
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
border:{
color:"0000ff"
}
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.border.width number
Border width of indicator tooltip.
Default Value
- 1
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
border:{
width: 2
}
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.duration string
Specifies the animation duration of indicator tooltip.
Default Value
- “500ms”
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
duration:"300ms"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.enableAnimation boolean
Enables/disables the tooltip animation.
Default Value
- true
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
enableAnimation : true
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.format string
Format of indicator tooltip. Use “point.x” and “point.y” as a placeholder text to display the corresponding data point’s x and y value.
Default Value
- “#point.x# : #point.y#”
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
format : "#point.x#"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.fill string
Background color of indicator tooltip.
Default Value
- null
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
fill : "#FFF000"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.opacity number
Opacity of indicator tooltip.
Default Value
- 0.95
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
opacity : 0.5
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.tooltip.visible boolean
Controls the visibility of indicator tooltip.
Default Value
- false
Example
//Initializing Indicators
this.chartindicators = [{
tooltip :{
visible : true
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.trigger number
Trigger value of MACD indicator.
Default Value
- 9
Example
//Initializing Indicators
this.chartindicators = [{
trigger : 14
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.visibility string
Specifies the visibility of indicator.
Default Value
- “visible”
Example
//Initializing Indicators
this.chartindicators = [{
visibility :"visible"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.type string
Specifies the type of indicator that has to be rendered.
Default Value
- “sma”. See IndicatorsType
Example
//Initializing Indicators
this.chartindicators = [{
type : "momentum"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.upperLine object
Options to customize the upper line in indicators
indicators.upperLine.fill string
Fill color of the upper line in indicators
Default Value
- “#ff9933”
Example
//Initializing Indicators
this.chartindicators = [{
upperLine : {
fill:"#ff0000"
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.upperLine.width number
Width of the upper line in indicators.
Default Value
- 2
Example
//Initializing Indicators
this.chartindicators = [{
upperLine : {
width: 3
}
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.width number
Width of the indicator line.
Default Value
- 2
Example
//Initializing Indicators
this.chartindicators = [{
width : 3
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.xAxisName string
Name of the horizontal axis used for indicator. Primary X axis is used when x axis name is not specified.
Default Value
- ””
Example
//Initializing Indicators
this.chartindicators = [{
xAxisName : "xAxis"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
indicators.yAxisName string
Name of the vertical axis used for indicator. Primary Y axis is used when y axis name is not specified
Default Value
- ””
Example
//Initializing Indicators
this.chartindicators = [{
yAxisName : "yAxis"
// ...
}];
<ej-chart id="chartcontainer" [indicators]="chartindicators">
</ej-chart>
isResponsive boolean
Controls whether Chart has to be responsive while resizing.
Default Value
- false
Example
<ej-chart id="chartcontainer" [isResponsive]="true">
</ej-chart>
legend object
Options to customize the legend items and legend title.
legend.alignment enum
Horizontal alignment of the legend.
Name | Type | Description |
---|---|---|
Center | string | Align the legend as center to the chart |
Near | string | Align the legend as near to the chart |
Far | string | Align the legend as far to the chart |
Default Value
- “Center”. See Alignment
Example
<ej-chart id="chartcontainer" [legend.alignment]="far">
</ej-chart>
legend.background string
Background for the legend. Use this property to add a background image or background color for the legend.
Default Value
- ””
Example
<ej-chart id="chartcontainer" [legend.background]="green url('flower.png')">
</ej-chart>
legend.border object
Options for customizing the legend border.
legend.border.color string
Border color of the legend.
Default Value
- “transparent”
Example
<ej-chart id="chartcontainer" legend.border.color="green">
</ej-chart>
legend.border.width number
Border width of the legend.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [legend.border.width]= 2>
</ej-chart>
legend.columnCount number
Number of columns to arrange the legend items.
Default Value
- null
Example
<ej-chart id="chartcontainer" [legend.columnCount]=2>
</ej-chart>
legend.enableScrollbar boolean
Controls whether legend has to use scrollbar or not. When enabled, scroll bar appears depending upon size and position properties of legend.
Default Value
- true
Example
<ej-chart id="chartcontainer" [legend.enableScrollbar]="true">
</ej-chart>
legend.fill string
Fill color for the legend items. By using this property, it displays all legend item shapes in same color.
Legend items representing invisible series is displayed in gray color.
Default Value
- null
Example
<ej-chart id="chartcontainer" legend.fill="green">
</ej-chart>
legend.font object
Options to customize the font used for legend item text.
legend.font.fontFamily string
Font family for legend item text.
Default Value
- “Segoe UI”
Example
this.legendFont= {
fontFamily: 'Segoe UI'
};
<ej-chart id="chartcontainer" [legend.font]="legendFont">
</ej-chart>
legend.font.fontStyle enum
Font style for legend item text.
Default Value
- “Normal”. See FontStyle
Example
this.legendFont= {
fontStyle: 'Normal'
};
<ej-chart id="chartcontainer" [legend.font]="legendFont">
</ej-chart>
legend.font.fontWeight enum
Font weight for legend item text.
Default Value
- “Regular”. See FontWeight
Example
this.legendFont= {
fontWeight: 'lighter'
};
<ej-chart id="chartcontainer" [legend.font]="legendFont">
</ej-chart>
legend.font.size string
Font size for legend item text.
Default Value
- “12px”
Example
this.legendFont= {
size: "14px"
};
<ej-chart id="chartcontainer" [legend.font]="legendFont">
</ej-chart>
legend.itemPadding number
Gap or padding between the legend items.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [legend.itemPadding]=15>
</ej-chart>
legend.itemStyle object
Options to customize the style of legend items.
legend.itemStyle.border object
Options for customizing the border of legend items.
legend.itemStyle.border.color string
Border color of the legend items.
Default Value
- “transparent”
Example
<ej-chart id="chartcontainer" [legend.itemStyle]="{border: { color: 'green' } }">
</ej-chart>
legend.itemStyle.border.width number
Border width of the legend items.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [legend.itemStyle]="{border: { width: 2 } }">
</ej-chart>
legend.itemStyle.height number
Height of the shape in legend items.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [legend.itemStyle]="{height:20}">
</ej-chart>
legend.itemStyle.width number
Width of the shape in legend items.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [legend.itemStyle]="{width:15}">
</ej-chart>
legend.location object
Options to customize the location of chart legend. Legend is placed in provided location only when value of position property is custom
legend.location.x number
X value or horizontal offset to position the legend in chart.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [legend.location]="{x:20}">
</ej-chart>
legend.location.y number
Y value or vertical offset to position the legend.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [legend.location]="{y:100}">
</ej-chart>
legend.opacity number
Opacity of the legend.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [legend.opacity]=0.5>
</ej-chart>
legend.position enum
Places the legend at specified position. Legend can be placed at left, right, top or bottom of the chart area.
To manually specify the location of legend, set custom as value to this property.
Name | Type | Description |
---|---|---|
Left | string | Legend will be placed left side of the chart area |
Right | string | Legend will be placed right side of the chart area |
Top | string | Legend will be placed top of the chart area |
Bottom | string | Legend will be placed bottom of the chart area |
Default Value
- “Bottom”. See Position
Example
<ej-chart id="chartcontainer" legend.position="top">
</ej-chart>
legend.rowCount number
Number of rows to arrange the legend items.
Default Value
- null
Example
<ej-chart id="chartcontainer" [legend.rowCount]=4>
</ej-chart>
legend.shape enum
Shape of the legend items. Default shape for pie and doughnut series is circle and all other series uses rectangle.
Default Value
- “None”. See Shape
Example
<ej-chart id="chartcontainer" legend.shape="seriesType">
</ej-chart>
legend.size object
Options to customize the size of the legend.
legend.size.height string
Height of the legend. Height can be specified in either pixel or percentage.
Default Value
- null
Example
<ej-chart id="chartcontainer" legend.size.height="20%" >
</ej-chart>
legend.size.width string
Width of the legend. Width can be specified in either pixel or percentage.
Default Value
- null
Example
<ej-chart id="chartcontainer" legend.size.width="20%" >
</ej-chart>
legend.title object
Options to customize the legend title.
legend.title.font object
Options to customize the font used for legend title
legend.title.font.fontFamily string
Font family for the text in legend title.
Default Value
- “Segoe UI”
Example
this.titleFont= {
fontFamily: 'Segoe UI'
};
<ej-chart id="chartcontainer" [legend.title.font]="titleFont">
</ej-chart>
legend.title.font.fontStyle enum
Font style for legend title.
Default Value
- “normal”. See FontStyle
Example
this.titleFont= {
fontStyle: 'Italic',
};
<ej-chart id="chartcontainer" [legend.title.font]="titleFont">
</ej-chart>
legend.title.font.fontWeight enum
Font weight for legend title.
Default Value
- “normal”. See FontWeight
Example
this.titleFont= {
fontWeight: 'Bold'
};
<ej-chart id="chartcontainer" [legend.title.font]="titleFont">
</ej-chart>
legend.title.font.size string
Font size for legend title.
Default Value
- “12px”
Example
this.titleFont= {
size: '12px'
};
<ej-chart id="chartcontainer" [legend.title.font]="titleFont">
</ej-chart>
legend.title.text string
Text to be displayed in legend title.
Default Value
- ””
Example
<ej-chart id="chartcontainer" legend.title.text="Countries">
</ej-chart>
legend.title.textAlignment enum
Alignment of the legend title.
Name | Type | Description |
---|---|---|
Center | string | Legend Title will be aligned as center of the legends |
Near | string | Legend Title will be aligned as near |
Far | string | Legend Title will be aligned as far |
Default Value
- “center”. See Alignment
Example
<ej-chart id="chartcontainer" legend.title.textAlignment="center" >
</ej-chart>
legend.textOverflow enum
Specifies the action taken when the legend width is more than the textWidth.
Name | Type | Description |
---|---|---|
None | string | No action will be performed |
Trim | string | Legend text will be Trimmed |
Wrap | string | Legend text will be Wrap by word |
WrapAndTrim | string | Legend text will be wrap with trim action |
Default Value
- “none”. See textOverflow
Example
<ej-chart id="chartcontainer" legend.textOverflow="trim">
</ej-chart>
legend.textWidth number
Text width for legend item.
Default Value
- 34
Example
<ej-chart id="chartcontainer" [legend.textWidth]=34>
</ej-chart>
legend.visible boolean
Controls the visibility of the legend.
Default Value
- true
Example
<ej-chart id="chartcontainer" [legend.visible]="true">
</ej-chart>
legend.toggleSeriesVisibility boolean
Controls the selection through the legend.
Default Value
- true
Example
<ej-chart id="chartcontainer" [legend.toggleSeriesVisibility]="false">
</ej-chart>
locale string
Name of the culture based on which chart should be localized. Number and date time values are localized with respect to the culture name.
String type properties like title text are not localized automatically. Provide localized text as value to string type properties.
Default Value
- “en-US”
Example
<ej-chart id="chartcontainer" locale='fr-FR'>
</ej-chart>
palette array
Palette is used to store the series fill color in array and apply the color to series collection in the order of series index.
Default value
- null
Example
<ej-chart id="chartcontainer" [palette]="['red','blue']">
</ej-chart>
Margin object
Options to customize the left, right, top and bottom margins of chart area.
margin.left number
Spacing for the left margin of chart area. Setting positive value decreases the width of the chart area from left side.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [margin.left]=10>
</ej-chart>
margin.right number
Spacing for the right margin of chart area. Setting positive value decreases the width of the chart area from right side.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [margin.right]=10>
</ej-chart>
margin.top number
Spacing for the top margin of chart area. Setting positive value decreases the height of the chart area from the top.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [margin.top]=10>
</ej-chart>
margin.bottom number
Spacing for the bottom margin of the chart area. Setting positive value decreases the height of the chart area from the bottom.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [margin.bottom]=10>
</ej-chart>
perspectiveAngle number
Perspective angle of the 3D view. Chart appears closer when perspective angle is decreased, and distant when perspective angle is increased.
This property is applicable only when 3D view is enabled
Default Value
- 90
Example
<ej-chart id="chartcontainer" [perspectiveAngle]=60>
</ej-chart>
primaryXAxis object
This is a horizontal axis that contains options to configure axis and it is the primary x axis for all the series in series array. To override x axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s xAxisName property to link both axis and series.
primaryXAxis.alternateGridBand object
Options for customizing horizontal axis alternate grid band.
primaryXAxis.alternateGridBand.even object
Options for customizing even grid band.
primaryXAxis.alternateGridBand.even.fill string
Fill color for the even grid bands.
Default Value
- transparent
Example
<ej-chart id="chartcontainer" [primaryXAxis.alternateGridBand]="{even: {fill: '#A7A9AB'}}">
</ej-chart>
primaryXAxis.alternateGridBand.even.opacity number
Opacity of the even grid band.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.alternateGridBand]="{opacity: 0.1}">
</ej-chart>
primaryXAxis.alternateGridBand.odd object
Options for customizing odd grid band.
primaryXAxis.alternateGridBand.odd.fill string
Fill color of the odd grid bands
Default Value
- transparent
Example
<ej-chart id="chartcontainer" [primaryXAxis.alternateGridBand]="{odd: {fill: '#A7A9AB'}}">
</ej-chart>
primaryXAxis.alternateGridBand.odd.opacity number
Opacity of odd grid band
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryxAxis.alternateGridBand]="{opacity: 0.1}">
</ej-chart>
primaryXAxis.crossesAt number
Specifies where horizontal axis should intersect the vertical axis or vice versa. Value should be provided in axis co-ordinates. If provided value is greater than the maximum value of crossing axis, then axis will be placed at the opposite side.
Default Value
- null
Example
<!--Crosses primary Y axis at 0 -->
<ej-chart id="chartcontainer" [primaryXAxis.crossesAt]=0>
<!-- Write series code here -->
</ej-chart>
primaryXAxis.crossesInAxis string
Name of the axis used for crossing. Vertical axis name should be provided for horizontal axis and vice versa. If the provided name does not belongs to a valid axis, then primary X axis or primary Y axis will be used for crossing
Default Value
- null
Example
// Creating a secondary axis
this.chartAxes = [{name:"secondaryYAxis"}];
<ej-chart id="chartcontainer"
primaryXAxis.crossesInAxis="secondaryYAxis" [axes]="chartAxes">
</ej-chart>
primaryXAxis.isIndexed boolean
Category axis can also plot points based on index value of data points. Index based plotting can be enabled by setting ‘isIndexed’ property to true.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryXAxis.isIndexed]="true">
</ej-chart>
primaryXAxis.enableAutoIntervalOnZoomingboolean
Specifies the interval of the axis according to the zoomed data of the chart.
Default Value
- true
Example
primaryXAxis.axisLine object
Options for customizing the axis line.
primaryXAxis.axisLine.dashArray string
Pattern of dashes and gaps to be applied to the axis line.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.axisLine]="{dashArray: '2,3'}">
</ej-chart>
primaryXAxis.axisLine.offset number
Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.axisLine]="{offset: 5}">
</ej-chart>
primaryXAxis.axisLine.visible boolean
Show/hides the axis line.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryXAxis.axisLine]="{visible: true}">
</ej-chart>
primaryXAxis.axisLine.color string
Default Value
- ””
Example
<ej-chart id="chartcontainer" [primaryXAxis.axisLine]="{color: 'red'}">
</ej-chart>
primaryXAxis.axisLine.width number
Width of axis line.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.axisLine]="{width: 2}">
</ej-chart>
primaryXAxis.columnIndex number
Specifies the index of the column where the axis is associated, when the chart area is divided into multiple plot areas by using columnDefinitions.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.columnIndex]="2">
</ej-chart>
primaryXAxis.columnSpan number
Specifies the number of columns or plot areas an axis has to span horizontally.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.columnSpan]=2>
</ej-chart>
primaryXAxis.crosshairLabel object
Options to customize the crosshair label.
primaryXAxis.crosshairLabel.visible boolean
Show/hides the crosshair label associated with this axis.
Default Value
- false
Example
<ej-chart id="chart" [crosshair.visible]="true"
[primaryXAxis.crosshairLabel.visible]="true">
</ej-chart>
primaryXAxis.desiredIntervals number
With this setting, you can request axis to calculate intervals approximately equal to your desired interval.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.desireIntervals]=5>
</ej-chart>
primaryXAxis.labelPlacement enum
Specifies the placement of labels.
Name | Type | Description |
---|---|---|
OnTicks | string | Labels will be placed on tick |
BetweenTicks | string | Labels will be placed between ticks |
Default Value
- ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement
Example
<ej-chart id="chartcontainer" primaryXAxis.labelPlacement="onticks">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.edgeLabelPlacement enum
Specifies the position of labels at the edge of the axis.
Name | Type | Description |
---|---|---|
None | string | no action will be perform |
Shift | string | Perform shift action to the edge labels |
Hide | string | The edge label will be hidden |
Default Value
- ej.datavisualization.Chart.EdgeLabelPlacement.None. See EdgeLabelPlacement
Example
<ej-chart id="chartcontainer" primaryXAxis.edgeLabelPlacement="shift">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.enableTrim boolean
Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryXAxis.enableTrim]="true">
</ej-chart>
primaryXAxis.font object
Options for customizing the font of the axis Labels.
primaryXAxis.font.fontFamily string
Font family of labels.
Default Value
- “Segoe UI”
Example
<ej-chart id="chartcontainer"
primaryXAxis.font.fontFamily="Segoe UI">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.font.fontStyle enum
Font style of labels.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal. See FontStyle
Example
<ej-chart id="chartcontainer" primaryXAxis.font.fontStyle="Bold" >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.font.fontWeight enum
Font weight of the label.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
<ej-chart id="chartcontainer" primaryXAxis.font.fontWeight="bold">
</ej-chart>
primaryXAxis.font.opacity number
Opacity of the axis labels.
Default Value
- 1
Example
<ej-chart id="chartcontainer"
[primaryXAxis.font.opacity]="0.8">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.font.size string
Font size of the axis labels.
Default Value
- “13px”
Example
<ej-chart id="chartcontainer" primaryXAxis.font.size="16px" >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.intervalType enum
Specifies the type of interval in date time axis.
Name | Type | Description |
---|---|---|
Days | string | Specify the interval type as days |
Hours | string | Specify the interval type as hours |
Seconds | string | Specify the interval type as seconds |
Milliseconds | string | Specify the interval type as milliseconds |
Minutes | string | Specify the interval type as minutes |
Months | string | Specify the interval type as months |
Years | string | Specify the interval type as years |
Default Value
- null. See IntervalType
Example
<ej-chart id="chartcontainer" primaryXAxis.intervalType="years">
</ej-chart>
primaryXAxis.isInversed boolean
Specifies whether to inverse the axis.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryXAxis.isInversed]="true" >
</ej-chart>
primaryXAxis.labelFormat string
Custom formatting for axis label and supports all standard formatting type of numerical and date time values.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.labelFormat="c">
</ej-chart>
primaryXAxis.labelIntersectAction enum
Specifies the action to take when the axis labels are overlapping with each other.
Name | Type | Description |
---|---|---|
None | string | no action will be perform in axis labels |
Rotate90 | string | Displays axis labels with 90 degree |
Rotate45 | string | Displays axis labels with 45 degree |
Wrap | string | Axis labels will be Wrap |
WrapByword | string | Axis labels will be Wrap by word |
Trim | string | Axis labels will be trimmed |
Hide | string | Axis labels will be hide when overlap to others |
MultipleRows | string | Axis labels will display the next line when overlap to others |
Default Value
- ej.datavisualization.Chart.LabelIntersectAction.None. See LabelIntersectAction
Example
<ej-chart id="chartcontainer" primaryXAxis.labelIntersectAction="multipleRows">
</ej-chart>
primaryXAxis.labelPosition enum
Specifies the position of the axis labels.
Name | Type | Description |
---|---|---|
Inside | string | The axis labels area visible inside the axis line |
OutSide | string | The axis labels area visible outside the axis line |
Default Value
- “outside”. See LabelPosition
Example
<ej-chart id="chartcontainer" primaryXAxis.labelPosition="inside">
</ej-chart>
primaryXAxis.alignment enum
Specifies the position of the axis labels.
Name | Type | Description |
---|---|---|
Near | string | The axis labels placed as near |
Far | string | The axis labels placed as far |
Center | string | The axis labels placed as center |
Default Value
- “center”. See Alignment
Example
<ej-chart id="chartcontainer" primaryXAxis.alignment="far">
</ej-chart>
primaryXAxis.labelRotation number
Angle in degrees to rotate the axis labels.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.labelRotation="90">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.logBase number
Logarithmic base value. This is applicable only for logarithmic axis.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [primaryXAxis.logBase]=2>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorGridLines object
Options for customizing major gird lines.
primaryXAxis.majorGridLines.dashArray string
Pattern of dashes and gaps used to stroke the major grid lines.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.majorGridLines.dashArray='2,3'>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorGridLines.color string
Color of the major grid line.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.majorGridLines.color="blue">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorGridLines.opacity number
Opacity of major grid lines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.majorGridLines.opacity]="0.5">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorGridLines.visible boolean
Show/hides the major grid lines.
Default Value
- true
Example
<ej-chart id="chartcontainer"
[primaryXAxis.majorGridLines.visible]="true">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorGridLines.width number
Width of the major grid lines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.majorGridLines.width]=1>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorTickLines object
Options for customizing the major tick lines.
primaryXAxis.majorTickLines.size number
Length of the major tick lines.
Default Value
- 5
Example
<ej-chart id="chartcontainer" [primaryXAxis.majorTickLines.size]=10>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorTickLines.visible boolean
Show/hides the major tick lines.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryXAxis.majorTickLines.visible]="false">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.majorTickLines.width number
Width of the major tick lines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.majorTickLines.width]=1 >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.maximumLabels number
Maximum number of labels to be displayed in every 100 pixels.
Default Value
- 3
Example
primaryXAxis.maximumLabelWidth number
Maximum width of the axis label. When the label exceeds the width, the label gets trimmed when the enableTrim is set to true.
Default Value
- 34
Example
<ej-chart id="chartcontainer" [primaryXAxis.maximumLabelWidth]="34.5" >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorGridLines object
Options for customizing the minor grid lines.
primaryXAxis.minorGridLines.dashArray string
Patterns of dashes and gaps used to stroke the minor grid lines.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.minorGridLines.dashArray='2,3'>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorGridLines.visible boolean
Show/hides the minor grid lines.
Default Value
- true
Example
<ej-chart id="chartcontainer"
[primaryXAxis.minorGridLines.visible]="true">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorGridLines.width number
Width of the minorGridLines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.minorGridLines.width]=1>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorTickLines object
Options for customizing the minor tick lines.
primaryXAxis.minorTickLines.size number
Length of the minor tick lines.
Default Value
- 5
Example
<ej-chart id="chartcontainer" [primaryXAxis.minorTickLines.size]=10>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorTickLines.visible boolean
Show/hides the minor tick lines.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryXAxis.minorTickLines.visible]="false">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorTickLines.width number
Width of the minor tick line.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.minorTickLines.width]=1 >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.minorTicksPerInterval number
Specifies the number of minor ticks per interval.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.minorTicksPerInterval]=0>
<!-- Write series code here-->
</ej-chart>
primaryXAxis.name string
Unique name of the axis. To associate an axis with the series, you have to set this name to the xAxisName/yAxisName property of the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.name="">
</ej-chart>
primaryXAxis.opposedPosition boolean
Specifies whether to render the axis at the opposite side of its default position.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryXAxis.opposedPosition]="true" >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.orientation enum
Specifies the orientation of the axis line
Name | Type | Description |
---|---|---|
Horizontal | string | The axis line is displayed in horizontal direction |
Vertical | string | The axis line is displayed in vertical direction |
Default Value
- Horizontal
Example
// Creating a secondary axis
this.chartAxes = [{name:"secondaryYAxis", orientation: "vertical"}];
<ej-chart id="chartcontainer" [axes]="chartAxes"></ej-chart>
primaryXAxis.plotOffset number
Specifies the padding for the plot area.
Default Value
- 10
Example
primaryXAxis.range object
Options to customize the range of the axis.
primaryXAxis.range.min number
Minimum value of the axis range.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.range.min]=0></ej-chart>
primaryXAxis.range.max number
Maximum value of the axis range.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.range.max]=60></ej-chart>
primaryXAxis.range.interval number
Interval of the axis range.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.range.interval]=5></ej-chart>
primaryXAxis.rangePadding enum
Specifies the padding for the axis range.
Name | Type | Description |
---|---|---|
Additional | string | Interval of the axis is added as padding to the minimum and maximum values of the range |
Normal | string | Padding is applied to the axis based on the range calculation |
None | string | Padding cannot be applied to the axis |
Round | string | Axis range is rounded to the nearest possible value divided by the interval |
Default Value
- “None”. See RangePadding
Example
<ej-chart id="chartcontainer" primaryXAxis.rangePadding="normal"></ej-chart>
primaryXAxis.roundingPlaces number
Rounds the number to the given number of decimals.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryXAxis.roundingPlaces]="3"></ej-chart>
primaryXAxis.multiLevelLabels array
Options for customizing the multi level labels.
Default Value
- [ ]
primaryXAxis.multiLevelLabels.visible boolean
Visibility of the multi level labels.
Default Value
- false
Example
this.multiLabels = [{
visible: true
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.text string
Text of the multi level labels.
Default Value
- ””
Example
this.multiLabels = [{
text: "Quater1",
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.start number
Starting value of the multi level labels.
Default Value
- null
Example
this.multiLabels = [{
start: 1,
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.end number
Ending value of the multi level labels.
Default Value
- null
Example
this.multiLabels = [{
end: 4,
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.level number
Specifies the level of multi level labels.
Default Value
- 0
Example
this.multiLabels = [{
level: 2,
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.maximumTextWidth number
Specifies the maximum width of the text in multi level labels.
Default Value
- null
Example
this.multiLabels = [{
visible: true,
start: -0.5,
end: 2.5,
text: "Quater1",
maximumtextWidth: 40
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.textAlignment enum
Specifies the alignment of the text in multi level labels.
Default Value
- “center”. See TextAlignment
Example
this.multiLabels = [{
// customizing the text alignment
textAlignment: "near",
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.textOverflow enum
Specifies the handling of text over flow in multi level labels.
Default Value
- “center”. See TextOverflow
Example
this.multiLabels = [{
// customizing the text overflow
textOverflow: “trim",
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.font object
Options for customizing the font of the text.
primaryXAxis.multiLevelLabels.font.color string
Font color of the multi level labels text.
Default Value
- null
Example
this.multiLabels = [{
font:{
color: "green"
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.font.fontFamily string
Font family of the multi level labels text.
Default Value
- “Segoe UI”
Example
this.multiLabels = [{
font:{
fontFamily: "Algerian",
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.font.fontStyle enum
Font style of the multi level labels text.
Default Value
- “Normal”
Example
this.multiLabels = [{
font:{
fontStyle: "Bold",
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.font.fontWeight string
Font weight of the multi level label text.
Default Value
- “regular”
Example
this.multiLabels = [{
font:{
fontWeight:"lighter",
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.font.opacity number
Opacity of the multi level label text.
Default Value
- 1
Example
this.multiLabels = [{
font:{
opacity: 0.5,
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.font.size string
Font size of the multi level label text.
Default Value
- “12px”
Example
this.multiLabels = [{
font:{
size: "12px",
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.border object
Options for customizing the border of the series.
primaryXAxis.multiLevelLabels.border.color string
Border color of the multi level labels.
Default Value
- null
Example
this.multiLabels = [{
border:{
color: "green"
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.border.width number
Border width of the multi level labels.
Default Value
- 1
Example
this.multiLabels = [{
border:{
width: 2,
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.multiLevelLabels.border.type enum
Border type of the multi level labels.
Name | Type | Description |
---|---|---|
Rectangle | string | To render rectangle border. |
None | string | No border will be rendered. |
WithoutTopAndBottom | string | Border will be rendered only on left and right side of the labels. |
Brace | string | To render brace border style. |
CurlyBrace | string | To render curly brace border style. |
Default Value
- “rectangle”. See Type
Example
this.multiLabels = [{
border:{
type: "brace",
}
}];
<ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
<!-- Write series code here-->
</ej-chart>
primaryXAxis.showNextToAxisLine boolean
Specifies whether the axis elements need to be placed nearby the axis line, while crossing.
Default Value
- true
Example
<!--Crosses horizontal axis at category value "zero" -->
<ej-chart id="chartcontainer" primaryXAxis.showNextToAxisLine="false"></ej-chart>
primaryXAxis.stripLine array
Options for customizing the strip lines.
Default Value
- [ ]
primaryXAxis.stripLine.borderColor string
Border color of the strip line.
Default Value
- “gray”
Example
this.Strip = [{
borderColor: 'gray',
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.color string
Background color of the strip line.
Default Value
- “gray”
Example
this.Strip = [{
color: 'green',
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.end number
End value of the strip line.
Default Value
- null
Example
this.Strip = [{
end: 5,
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.font object
Options for customizing the font of the text.
primaryXAxis.stripLine.font.color string
Font color of the strip line text.
Default Value
- “black”
Example
//Customize title font style
this.Strip = [{
font: { color: 'green' },
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.font.fontFamily string
Font family of the strip line text.
Default Value
- “Segoe UI”
Example
//Customize title font style
this.Strip = [{
font: {
fontFamily:"Algerian"
},
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.font.fontStyle enum
Font style of the strip line text.
Default Value
- “Normal”
Example
//Customize title font style
this.Strip = [{
font: {fontStyle:'Italic'},
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.font.fontWeight string
Font weight of the strip line text.
Default Value
- “regular”
Example
//Customize title font style
this.Strip = [{
font: {
fontWeight: "lighter"
},
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.font.opacity number
Opacity of the strip line text.
Default Value
- 1
Example
//Customize title font style
this.Strip = [{
font: {opacity:0.5},
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.font.size string
Font size of the strip line text.
Default Value
- “12px”
Example
//Customize title font style
this.Strip = [{
font: {size: "16px"},
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.start number
Start value of the strip line.
Default Value
- null
Example
this.Strip = [{
start: 2,
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.startFromAxis boolean
Indicates whether to render the strip line from the minimum/start value of the axis. This property does not work when start property is set.
Default Value
- false
Example
this.Strip = [{
startFromAxis:true
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.text string
Specifies text to be displayed inside the strip line.
Default Value
- “stripLine”
Example
this.Strip = [{
text: 'High Temperature',
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.textAlignment enum
Specifies the alignment of the text inside the strip line.
Name | Type | Description |
---|---|---|
MiddleTop | string | The text has been aligned top of the stripline |
MiddleCenter | string | The text has been aligned in center of the stripline |
MiddleBottom | string | The text has been aligned bottom of the stripline |
Default Value
- “middlecenter”. See TextAlignment
Example
this.Strip = [{
textAlignment: 'middletop',
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.visible boolean
Show/hides the strip line.
Default Value
- false
Example
this.Strip = [{
visible: true
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.width number
Width of the strip line.
Default Value
- 0
Example
this.Strip = [{
width:0
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.stripLine.zIndex enum
Specifies the order where the strip line and the series have to be rendered. When Z-order is “behind”, strip line is rendered under the series and when it is “over”, it is rendered above the series.
Name | Type | Description |
---|---|---|
Inside | string | Displays the stripline inside the series |
Over | string | Displays the stripline over the series |
Default Value
- “over”. See ZIndex
Example
this.Strip = [{
zIndex: 'behind',
}]
<ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>
primaryXAxis.tickLinesPosition enum
Specifies the position of the axis tick lines.
Name | Type | Description |
---|---|---|
Inside | string | The tick lines are placed inside of the axis line |
Outside | string | The tick lines are placed outside of the axis line |
Default Value
- “outside”. See TickLinesPosition
Example
<ej-chart id="chartcontainer" primaryXAxis.tickLinesPosition="inside"></ej-chart>
primaryXAxis.labelBorder object
Options for customizing the border of the labels.
primaryXAxis.labelBorder.color string
Specifies the color of the label border.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryXAxis.labelBorder.color="green" >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.labelBorder.width number
Specifies the width of the label border.
Default Value
- 1
Example
<ej-chart id="chartcontainer" primaryXAxis.labelBorder.width="2" >
<!-- Write series code here-->
</ej-chart>
primaryXAxis.title object
Options for customizing the axis title.
primaryXAxis.title.enableTrim boolean
Specifies whether to trim the axis title when it exceeds the chart area or the maximum width of the title.
Default Value
- false
Example
<ej-chart id="chartcontainer"[primaryXAxis.enableTrim]="true">
</ej-chart>
primaryXAxis.title.font object
Options for customizing the title font.
primaryXAxis.title.font.fontFamily string
Font family of the title text.
Default Value
- “Segoe UI”
Example
//Customize title font style
this.titleFont={
fontFamily:"Segoe UI",
};
<ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont">
</ej-chart>
primaryXAxis.title.font.fontStyle enum
Font style of the title text.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal
Example
//Customize title font style
this.titleFont={
fontStyle:'Italic'
};
<ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>
primaryXAxis.title.font.fontWeight enum
Font weight of the title text.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
//Customize title font style
this.titleFont={
fontWeight: "bold"
};
<ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>
primaryXAxis.title.font.opacity number
Opacity of the axis title text.
Default Value
- 1
Example
//Customize title font style
this.titleFont={
opacity:0.8
};
<ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>
primaryXAxis.title.font.size string
Font size of the axis title.
Default Value
- “16px”
Example
//Customize title font style
this.titleFont={
size: "16px"
};
<ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>
primaryXAxis.title.maximumTitleWidth number
Maximum width of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.
Default Value
- 34
Example
<ej-chart id="chartcontainer" primaryXAxis.title.maximumTitleWidth=null></ej-chart>
primaryXAxis.title.text string
Title for the axis.
Default Value
- ””
Example
<ej-chart id="chartcontainer" primaryXAxis.title.text="Month"></ej-chart>
primaryXAxis.title.visible boolean
Controls the visibility of axis title.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryXAxis.title.visible]="false"></ej-chart>
primaryXAxis.title.offset number
offset value for axis title.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [primaryXAxis.title.offset]=10></ej-chart>
primaryXAxis.title.position enum
Specifies the position of the axis title.
Default Value
- “outside”. See Position
Example
<ej-chart id="chartcontainer" primaryXAxis.title.position="inside"></ej-chart>
primaryXAxis.title.alignment enum
Specifies the position of the axis title.
Default Value
- “center”. See Alignment
Example
<ej-chart id="chartcontainer" primaryXAxis.title.alignment="near"></ej-chart>
primaryXAxis.valueType enum
Specifies the type of data the axis is handling.
Name | Type | Description |
---|---|---|
Double | string | Specify the numeric axis |
Category | string | Specify the category axis |
DateTime | string | Specify the datetime axis |
Logarithmic | string | Specify the logarithmic axis |
Default Value
- null. See ValueType
Example
<ej-chart id="chartcontainer" primaryXAxis.valueType="category"></ej-chart>
primaryXAxis.visible boolean
Show/hides the axis.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryXAxis.visible]="false" ></ej-chart>
primaryXAxis.zoomFactor number
The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryXAxis.zoomFactor]=0.5>
</ej-chart>
primaryXAxis.zoomPosition number
Position of the zoomed axis. Value ranges from 0 to 1.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [primaryXAxis.zoomPosition]=0.5>
</ej-chart>
primaryXAxis.scrollbarSettings object
Options for customizing the axis scrollbar
primaryXAxis.scrollbarSettings.visible boolean
Specifies to enables or disables the scroll bar.
Default Value
- false
Example
this.axis = {
scrollbarSettings: {
visible: true,
}
};
<ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>
primaryXAxis.scrollbarSettings.canResize boolean
Controls whether scrollbar has to be responsive in the chart.
Default Value
- false
Example
this.axis = {
scrollbarSettings: {
// enable the resize option
canResize: true,
}
};
<ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>
primaryXAxis.scrollbarSettings.range object
Options to customize the range for the scrollbar in the axis.
primaryXAxis.scrollbarSettings.range.min number
Minimum value of the scrollbar range.
Default Value
- null
Example
this.axis = {
scrollbarSettings: {
range: {
min: 10
}
}
};
<ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>
primaryXAxis.scrollbarSettings.range.max number
Maximum value for the scrollbar range .
Default Value
- null
Example
this.axis = {
scrollbarSettings: {
range: {
max: 100
}
}
};
<ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>
primaryXAxis.scrollbarSettings.pointsLength number
The maximum number of points to be displayed in the scrollbar.
Default Value
- null
Example
this.axis = {
scrollbarSettings: {
pointsLength: 50
}
};
<ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>
axes array
To override x axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s xAxisName property to link both axis and series.
axes.alternateGridBand object
Options for customizing axis alternate grid band.
axes.alternateGridBand.even object
Options for customizing even grid band.
axes.alternateGridBand.even.fill string
Fill color for the even grid bands.
Default Value
- transparent
Example
this.axes = [{
alternateGridBand:{
even:{
fill:'green'
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.alternateGridBand.even.opacity number
Opacity of the even grid band.
Default Value
- 1
Example
this.axes = [{
alternateGridBand:{
even:{
opacity:0.5
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.alternateGridBand.odd object
Options for customizing odd grid band.
axes.alternateGridBand.odd.fill string
Fill color of the odd grid bands
Default Value
- transparent
Example
this.axes = [{
alternateGridBand:{
odd:{
fill:'green'
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.alternateGridBand.odd.opacity number
Opacity of odd grid band
Default Value
- 1
Example
this.axes = [{
alternateGridBand:{
odd:{
opacity:0.5
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.crossesAt number
Specifies where axis should intersect the vertical axis or vice versa. Value should be provided in axis co-ordinates. If provided value is greater than the maximum value of crossing axis, then axis will be placed at the opposite side.
Default Value
- null
Example
this.axes = [{
crossesAt: 0
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
Name of the axis used for crossing. Vertical axis name should be provided for horizontal axis and vice versa. If the provided name does not belongs to a valid axis, then primary X axis or primary Y axis will be used for crossing
Default Value
- null
Example
axes.isIndexed boolean
Category axis can also plot points based on index value of data points. Index based plotting can be enabled by setting ‘isIndexed’ property to true.
Default Value
- false
Example
this.axes = [{
isIndexed: true
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.axisLine object
Options for customizing the axis line.
axes.axisLine.dashArray string
Pattern of dashes and gaps to be applied to the axis line.
Default Value
- null
Example
this.axes = [{
axisLine:{
dashArray:'2,3'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.axisLine.offset number
Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.
Default Value
- null
Example
this.axes = [{
axisLine:{
offset: 5
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.axisLine.visible boolean
Show/hides the axis line.
Default Value
- true
Example
this.axes = [{
axisLine:{
visible: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.axisLine.color string
Color of axis line.
Default Value
- ””
Example
this.axes = [{
axisLine:{
color:'red'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.axisLine.width number
Width of axis line.
Default Value
- 1
Example
this.axes = [{
axisLine:{
width: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.columnIndex number
Specifies the index of the column where the axis is associated, when the chart area is divided into multiple plot areas by using columnDefinitions.
Default Value
- null
Example
this.axes = [{
columnIndex:2
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.columnSpan number
Specifies the number of columns or plot areas an axis has to span horizontally.
Default Value
- null
Example
this.axes = [{
columnSpan:2
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.crosshairLabel object
Options to customize the crosshair label.
axes.crosshairLabel.visible boolean
Show/hides the crosshair label associated with this axis.
Default Value
- false
Example
this.axes = [{
crosshairLabel: {
visible:true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.desiredIntervals number
With this setting, you can request axis to calculate intervals approximately equal to your desired interval.
Default Value
- null
Example
this.axes = [{
desiredIntervals: 5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.labelPlacement enum
Specifies the placement of labels.
Default Value
- ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement
Example
this.axes = [{
labelPlacement :"onTicks"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.edgeLabelPlacement enum
Specifies the position of labels at the edge of the axis.
Default Value
- ej.datavisualization.Chart.EdgeLabelPlacement.None. See EdgeLabelPlacement
Example
this.axes = [{
edgeLabelPlacement : 'shift'
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.enableTrim boolean
Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.
Default Value
- false
Example
this.axes = [{
enableTrim : true
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.enableAutoIntervalOnZooming boolean
Specifies the interval of the axis according to the zoomed data of the chart.
Default Value
- true
Example
this.axes = [{
enableAutoIntervalOnZooming : true
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.font object
Options for customizing the font of the axis Labels.
axes.font.fontFamily string
Font family of labels.
Default Value
- “Segoe UI”
Example
this.axes = [{
font : {
fontFamily:'Algerian'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.font.fontStyle enum
Font style of labels.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal. See FontStyle
Example
this.axes = [{
font : {
fontStyle:'Italic'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.font.fontWeight enum
Font weight of the label.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
this.axes = [{
font : {
fontWeight:'lighter'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.font.opacity number
Opacity of the axis labels.
Default Value
- 1
Example
this.axes = [{
font : {
opacity: 0.5
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.font.size string
Font size of the axis labels.
Default Value
- “13px”
Example
this.axes = [{
font : {
size: "12px"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.intervalType enum
Specifies the type of interval in date time axis.
Default Value
- null. See IntervalType
Example
this.axes = [{
intervalType:"days"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.isInversed boolean
Specifies whether to inverse the axis.
Default Value
- false
Example
this.axes = [{
isInversed: true
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.labelFormat string
Custom formatting for axis label and supports all standard formatting type of numerical and date time values.
Default Value
- null
Example
this.axes = [{
labelFormat:"{value}%"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.labelIntersectAction enum
Specifies the action to take when the axis labels are overlapping with each other.
Default Value
- ej.datavisualization.Chart.LabelIntersectAction.None. See LabelIntersectAction
Example
this.axes = [{
labelIntersectAction :"multipleRows"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.labelPosition enum
Specifies the position of the axis labels.
Default Value
- “outside”. See LabelPosition
Example
this.axes = [{
labelPosition :"inside"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.alignment enum
Specifies the position of the axis labels.
Default Value
- “center”. See Alignment
Example
this.axes = [{
alignment: "far"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.labelRotation number
Angle in degrees to rotate the axis labels.
Default Value
- null
Example
this.axes = [{
labelRotation : 90
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.logBase number
Logarithmic base value. This is applicable only for logarithmic axis.
Default Value
- 10
Example
this.axes = [{
logBase : 5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorGridLines object
Options for customizing major gird lines.
axes.majorGridLines.dashArray string
Pattern of dashes and gaps used to stroke the major grid lines.
Default Value
- null
Example
this.axes = [{
majorGridLines : {
dashArray:'2,3'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorGridLines.color string
Color of the major grid line.
Default Value
- null
Example
this.axes = [{
majorGridLines : {
color:"red"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorGridLines.opacity number
Opacity of major grid lines.
Default Value
- 1
Example
this.axes = [{
majorGridLines : {
opacity:0.5
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorGridLines.visible boolean
Show/hides the major grid lines.
Default Value
- true
Example
this.axes = [{
majorGridLines : {
visible:true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorGridLines.width number
Width of the major grid lines.
Default Value
- 1
Example
this.axes = [{
majorGridLines : {
width:2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorTickLines object
Options for customizing the major tick lines.
axes.majorTickLines.size number
Length of the major tick lines.
Default Value
- 5
Example
this.axes = [{
majorTickLines : {
size:2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorTickLines.visible boolean
Show/hides the major tick lines.
Default Value
- true
Example
this.axes = [{
majorTickLines : {
visible: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.majorTickLines.width number
Width of the major tick lines.
Default Value
- 1
Example
this.axes = [{
majorTickLines : {
width: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.maximumLabels number
Maximum number of labels to be displayed in every 100 pixels.
Default Value
- 3
Example
this.axes = [{
maximumLabels: 5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.maximumLabelWidth number
Maximum width of the axis label. When the label exceeds the width, the label gets trimmed when the enableTrim is set to true.
Default Value
- 34
Example
this.axes = [{
maximumLabelWidth : 34.5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorGridLines object
Options for customizing the minor grid lines.
axes.minorGridLines.dashArray string
Patterns of dashes and gaps used to stroke the minor grid lines.
Default Value
- null
Example
this.axes = [{
minorGridLines:{
dashArray:'2,3'
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorGridLines.visible boolean
Show/hides the minor grid lines.
Default Value
- true
Example
this.axes = [{
minorGridLines:{
visible:true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorGridLines.width number
Width of the minorGridLines.
Default Value
- 1
Example
this.axes = [{
minorGridLines:{
width: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorTickLines object
Options for customizing the minor tick lines.
axes.minorTickLines.size number
Length of the minor tick lines.
Default Value
- 5
Example
this.axes = [{
minorTickLines:{
size: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorTickLines.visible boolean
Show/hides the minor tick lines.
Default Value
- true
Example
this.axes = [{
minorTickLines:{
visible: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorTickLines.width number
Width of the minor tick line.
Default Value
- 1
Example
this.axes = [{
minorTickLines:{
width: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.minorTicksPerInterval number
Specifies the number of minor ticks per interval.
Default Value
- null
Example
this.axes = [{
minorTicksPerInterval: 5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.name string
Unique name of the axis. To associate an axis with the series, you have to set this name to the xAxisName/yAxisName property of the series.
Default Value
- null
Example
this.axes = [{
name:"xAxis"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.opposedPosition boolean
Specifies whether to render the axis at the opposite side of its default position.
Default Value
- false
Example
this.axes = [{
opposedPosition: true
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.orientation enum
Specifies the orientation of the axis line in the chart.
Default Value
- ‘horizontal’
Example
this.axes = [{
orientation: "vertical"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.plotOffset number
Specifies the padding for the plot area.
Default Value
- 10
Example
this.axes = [{
plotOffset: 10
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.range object
Options to customize the range of the axis.
axes.range.min number
Minimum value of the axis range.
Default Value
- null
Example
this.axes = [{
range:{
min: 10
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.range.max number
Maximum value of the axis range.
Default Value
- null
Example
this.axes = [{
range:{
max: 100
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.range.interval number
Interval of the axis range.
Default Value
- null
Example
this.axes = [{
range:{
interval: 10
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.rangePadding enum
Specifies the padding for the axis range.
Default Value
- “None”. See RangePadding
Example
this.axes = [{
rangePadding :"normal"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.roundingPlaces number
Rounds the number to the given number of decimals.
Default Value
- null
Example
this.axes = [{
roundingPlaces : 3
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels array
Options for customizing the multi level labels.
Default Value
- [ ]
axes.multiLevelLabels.visible boolean
Visibility of the multi level labels.
Default Value
- false
Example
this.axes = [{
multiLevelLabels: {
visible: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.text string
Text of the multi level labels.
Default Value
- ””
Example
this.axes = [{
multiLevelLabels: {
text: "2016"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.start number
Starting value of the multi level labels.
Default Value
- null
Example
this.axes = [{
multiLevelLabels: {
start: 1
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.end number
Ending value of the multi level labels.
Default Value
- null
Example
this.axes = [{
multiLevelLabels: {
end: 4
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.level number
Specifies the level of multi level labels.
Default Value
- 0
Example
this.axes = [{
multiLevelLabels: {
level: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.maximumTextWidth number
Specifies the maximum width of the text in multi level labels.
Default Value
- null
Example
this.axes = [{
multiLevelLabels: {
maximumTextWidth: 30
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.textAlignment enum
Specifies the alignment of the text in multi level labels.
Default Value
- “center”. See TextAlignment
Example
this.axes = [{
multiLevelLabels: {
textAlignment: "near"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.textOverflow enum
Specifies the handling of text over flow in multi level labels.
Default Value
- “center”. See TextOverflow
Example
this.axes = [{
multiLevelLabels: {
textOverflow: "trim"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.font object
Options for customizing the font of the text.
axes.multiLevelLabels.font.color string
Font color of the multi level labels text.
Default Value
- null
Example
this.axes = [{
multiLevelLabels: {
font: {
color:"green"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.font.fontFamily string
Font family of the multi level labels text.
Default Value
- “Segoe UI”
Example
this.axes = [{
multiLevelLabels: {
font: {
fontFamily:"Algerian"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.font.fontStyle enum
Font style of the multi level labels text.
Default Value
- “Normal”
Example
this.axes = [{
multiLevelLabels: {
font: {
fontStyle:"Bold"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.font.fontWeight string
Font weight of the multi level label text.
Default Value
- “regular”
Example
this.axes = [{
multiLevelLabels: {
font: {
fontWeight:"lighter"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.font.opacity number
Opacity of the multi level label text.
Default Value
- 1
Example
this.axes = [{
multiLevelLabels: {
font: {
opacity:0.5
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.font.size string
Font size of the multi level label text.
Default Value
- “12px”
Example
this.axes = [{
multiLevelLabels: {
font: {
opacity:"15px"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.border object
Options for customizing the border of the series.
axes.multiLevelLabels.border.color string
Border color of the multi level labels.
Default Value
- null
Example
this.axes = [{
multiLevelLabels: {
border:{
color:"green"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.border.width number
Border width of the multi level labels.
Default Value
- 1
Example
this.axes = [{
multiLevelLabels: {
border:{
width: 2
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.multiLevelLabels.border.type enum
Border type of the multi level labels.
Default Value
- “rectangle”. See Type
Example
this.axes = [{
multiLevelLabels: {
border:{
type:"brace"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.showNextToAxisLine boolean
Specifies whether the axis elements need to be placed nearby the axis line, while crossing.
Default Value
- true
Example
this.axes = [{
showNextToAxisLine : false
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine array
Options for customizing the strip lines.
Default Value
- [ ]
axes.stripLine.borderColor string
Border color of the strip line.
Default Value
- “gray”
Example
this.axes = [{
stripLine : {
borderColor:"green"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.color string
Background color of the strip line.
Default Value
- “gray”
Example
this.axes = [{
stripLine : {
color:"green"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.end number
End value of the strip line.
Default Value
- null
Example
this.axes = [{
stripLine : {
end: 5
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.font object
Options for customizing the font of the text.
axes.stripLine.font.color string
Font color of the strip line text.
Default Value
- “black”
Example
this.axes = [{
stripLine : {
font: {
color:"green"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.font.fontFamily string
Font family of the strip line text.
Default Value
- “Segoe UI”
Example
this.axes = [{
stripLine : {
font: {
fontFamily:"Algerian"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.font.fontStyle enum
Font style of the strip line text.
Default Value
- “Normal”
Example
this.axes = [{
stripLine : {
font: {
fontStyle:"Bold"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.font.fontWeight string
Font weight of the strip line text.
Default Value
- “regular”
Example
this.axes = [{
stripLine : {
font: {
fontWeight:"lighter"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.font.opacity number
Opacity of the strip line text.
Default Value
- 1
Example
this.axes = [{
stripLine : {
font: {
opacity: 0.5
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.font.size string
Font size of the strip line text.
Default Value
- “12px”
Example
this.axes = [{
stripLine : {
font: {
size: "15px"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.start number
Start value of the strip line.
Default Value
- null
Example
this.axes = [{
stripLine : {
start: 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.startFromAxis boolean
Indicates whether to render the strip line from the minimum/start value of the axis. This property does not work when start property is set.
Default Value
- false
Example
this.axes = [{
stripLine : {
startFromAxis : true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.text string
Specifies text to be displayed inside the strip line.
Default Value
- “stripLine”
Example
this.axes = [{
stripLine : {
text : "Empty Point"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.textAlignment enum
Specifies the alignment of the text inside the strip line.
Default Value
- “middlecenter”. See TextAlignment
Example
this.axes = [{
stripLine : {
textAlignment : "middletop"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.visible boolean
Show/hides the strip line.
Default Value
- false
Example
this.axes = [{
stripLine : {
visible : true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.width number
Width of the strip line.
Default Value
- 0
Example
this.axes = [{
stripLine : {
width : 2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.stripLine.zIndex enum
Specifies the order where the strip line and the series have to be rendered. When Z-order is “behind”, strip line is rendered under the series and when it is “over”, it is rendered above the series.
Default Value
- “over”. See ZIndex
Example
this.axes = [{
stripLine : {
zIndex : "behind"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.tickLinesPosition enum
Specifies the position of the axis tick lines.
Default Value
- “outside”. See TickLinesPosition
Example
axes.labelBorder object
Options for customizing the border of the labels.
axes.labelBorder.color string
Specifies the color of the label border.
Default Value
- null
Example
this.axes = [{
labelBorder: {
color:"green"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.labelBorder.width number
Specifies the width of the label border.
Default Value
- 1
Example
this.axes = [{
labelBorder: {
width:2
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title object
Options for customizing the axis title.
axes.title.enableTrim boolean
Specifies whether to trim the axis title when it exceeds the chart area or the maximum width of the title.
Default Value
- false
Example
this.axes = [{
title : {
enableTrim : true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.font object
Options for customizing the title font.
axes.title.font.fontFamily string
Font family of the title text.
Default Value
- “Segoe UI”
Example
this.axes = [{
title : {
font : {
fontFamily:"Algerain"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.font.fontStyle enum
Font style of the title text.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal
Example
this.axes = [{
title : {
font : {
fontStyle:"Italic"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.font.fontWeight enum
Font weight of the title text.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
this.axes = [{
title : {
font : {
fontWeight:"lighter"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.font.opacity number
Opacity of the axis title text.
Default Value
- 1
Example
this.axes = [{
title : {
font : {
opacity:0.5
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.font.size string
Font size of the axis title.
Default Value
- “16px”
Example
this.axes = [{
title : {
font : {
size:"14px"
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.maximumTitleWidth number
Maximum width of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.
Default Value
- 34
Example
this.axes = [{
title : {
maximumTitleWidth: null
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.text string
Title for the axis.
Default Value
- ””
Example
this.axes = [{
title : {
text: "Year"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.visible boolean
Controls the visibility of axis title.
Default Value
- true
Example
this.axes = [{
title : {
visible: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.offset number
offset value for axis title.
Default Value
- 0
Example
this.axes = [{
title : {
offset: 0
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.position enum
Specifies the position of the axis title.
Default Value
- “outside”. See Position
Example
this.axes = [{
title : {
position: "inside"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.title.alignment enum
Specifies the position of the axis title.
Default Value
- “center”. See Alignment
Example
this.axes = [{
title : {
alignment : "near"
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.valueType enum
Specifies the type of data the axis is handling.
Default Value
- null. See ValueType
Example
this.axes = [{
valueType: "double"
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.visible boolean
Show/hides the axis.
Default Value
- true
Example
this.axes = [{
visible: true
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.zoomFactor number
The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.
Default Value
- 1
Example
this.axes = [{
zoomFactor: 0.5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.zoomPosition number
Position of the zoomed axis. Value ranges from 0 to 1.
Default Value
- 0
Example
this.axes = [{
zoomPosition: 0.5
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.scrollbarSettings object
Options for customizing the axis scrollbar.
axes.scrollbarSettings.visible boolean
Specifies to enable or disable the scrollbar.
Default Value
- false
Example
this.axes = [{
scrollbarSettings : {
visible: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.scrollbarSettings.canResize boolean
Controls whether scrollbar has to be responsive in the chart.
Default Value
- false
Example
this.axes = [{
scrollbarSettings : {
canResize: true
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.scrollbarSettings.range object
Options to customize the range for the scrollbar in the axis.
axes.scrollbarSettings.range.min number
Minimum value of the scrollbar range.
Default Value
- null
Example
this.axes = [{
scrollbarSettings : {
range : {
min: 10
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.scrollbarSettings.range.max number
Maximum value for the scrollbar range .
Default Value
- null
Example
this.axes = [{
scrollbarSettings : {
range : {
max: 100
}
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
axes.scrollbarSettings.pointsLength number
The maximum number of points to be displayed in the scrollbar.
Default Value
- null
Example
this.axes = [{
scrollbarSettings : {
pointsLength : 50
}
}];
<ej-chart id="chartcontainer" [axes]="axes">
</ej-chart>
primaryYAxis object
This is a vertical axis that contains options to configure axis. This is the primary y axis for all the series in series array. To override y axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s yAxisName property to link both axis and series.
primaryYAxis.alternateGridBand object
Options for customizing vertical axis alternate grid band.
primaryYAxis.alternateGridBand.even object
Options for customizing even grid band.
primaryYAxis.alternateGridBand.even.fill string
Fill color for the even grid bands.
Default Value
- transparent
Example
<ej-chart id="chartcontainer" [primaryYAxis.alternateGridBand]="{even: {fill: '#A7A9AB'}}">
</ej-chart>
primaryYAxis.alternateGridBand.even.opacity number
Opacity of the even grid band.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.alternateGridBand]="{even: {fill: '#A7A9AB',opacity: 0.1}}">
</ej-chart>
primaryYAxis.alternateGridBand.odd object
Options for customizing odd grid band.
primaryYAxis.alternateGridBand.odd.fill string
Fill color of the odd grid bands.
Default Value
- “transparent”
Example
<ej-chart id="chartcontainer" [primaryYAxis.alternateGridBand]="{odd: {fill: '#A7A9AB'}}">
</ej-chart>
primaryYAxis.alternateGridBand.odd.opacity number
Opacity of odd grid band.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.alternateGridBand]="{odd: {fill: '#A7A9AB',opacity: 0.1}}">
</ej-chart>
primaryYAxis.enableAutoIntervalOnZoomingboolean
Specifies the interval of the axis according to the zoomed data of the chart.
Default Value
- true
Example
primaryYAxis.axisLine object
Options for customizing the axis line.
primaryYAxis.axisLine.dashArray string
Pattern of dashes and gaps to be applied to the axis line.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.axisLine]="{dashArray: '2,3'}">
</ej-chart>
primaryYAxis.axisLine.offset number
Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.axisLine]="{offset: 5}">
</ej-chart>
primaryYAxis.axisLine.visible boolean
Show/hides the axis line.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryYAxis.axisLine]="{visible: true}">
</ej-chart>
primaryYAxis.axisLine.color string
Color of axis line.
Default Value
- ””
Example
<ej-chart id="chartcontainer" [primaryYAxis.axisLine]="{color: 'red'}">
</ej-chart>
primaryYAxis.axisLine.width number
Width of axis line.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.axisLine]="{width: 2}">
</ej-chart>
primaryYAxis.crossesAt number
Specifies where horizontal axis should intersect the vertical axis or vice versa. Value should be provided in axis co-ordinates. If provided value is greater than the maximum value of crossing axis, then axis will be placed at the opposite side.
Default Value
- null
Example
<!--Crosses primary x axis at 0 -->
<ej-chart id="chartcontainer" [primaryYAxis.crossesAt]=0>
<!-- Write series code here -->
</ej-chart>
primaryYAxis.crossesInAxis string
Name of the axis used for crossing. Vertical axis name should be provided for horizontal axis and vice versa. If the provided name does not belongs to a valid axis, then primary X axis or primary Y axis will be used for crossing
Default Value
- null
Example
// Creating a secondary axis
this.chartAxes = [{name:"secondaryXAxis"}];
<ej-chart id="chartcontainer"
primaryYAxis.crossesInAxis="secondaryXAxis" [axes]="chartAxes">
</ej-chart>
primaryYAxis.crosshairLabel object
Options to customize the crosshair label.
primaryYAxis.crosshairLabel.visible boolean
Show/hides the crosshair label associated with this axis.
Default Value
- false
Example
<ej-chart id="chart" [crosshair.visible]="true"
[primaryYAxis.crosshairLabel.visible]="true">
</ej-chart>
primaryYAxis.desiredIntervals number
With this setting, you can request axis to calculate intervals approximately equal to your desired interval.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.desiredIntervals]=2>
</ej-chart>
primaryYAxis.labelPlacement enum
Specifies the placement of labels.
Default Value
- ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement
Example
<ej-chart id="chartcontainer" primaryYAxis.labelPlacement="onticks">
</ej-chart>
primaryYAxis.edgeLabelPlacement enum
Specifies the position of labels at the edge of the axis.
Default Value
- ej.datavisualization.Chart.EdgeLabelPlacement.None. See EdgeLabelPlacement
Example
<ej-chart id="chartcontainer" primaryYAxis.edgeLabelPlacement="shift">
</ej-chart>
primaryYAxis.enableTrim boolean
Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryYAxis.enableTrim]="true">
</ej-chart>
primaryYAxis.font object
Options for customizing the font of the axis Labels.
primaryYAxis.font.fontFamily string
Font family of labels.
Default Value
- “Segoe UI”
Example
<ej-chart id="chartcontainer"
primaryYAxis.font.fontFamily="Segoe UI">
</ej-chart>
primaryYAxis.font.fontStyle enum
Font style of labels.
Default Value
ej.datavisualization.Chart.FontStyle.Normal. See FontStyle
Example
<ej-chart id="chartcontainer" primaryYAxis.font.fontStyle="Bold" >
</ej-chart>
primaryYAxis.font.fontWeight enum
Font weight of the label.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
<ej-chart id="chartcontainer" primaryYAxis.font.fontWeight="bold">
</ej-chart>
primaryYAxis.font.opacity number
Opacity of the axis labels.
Default Value
- 1
Example
<ej-chart id="chartcontainer"
[primaryYAxis.font.opacity]="0.8">
</ej-chart>
primaryYAxis.font.size string
Font size of the axis labels.
Default Value
- “13px”
Example
<ej-chart id="chartcontainer" [primaryYAxis.font.size]="16px" >
</ej-chart>
primaryYAxis.intervalType enum
Specifies the type of interval in date time axis.
Default Value
- null. See IntervalType
Example
<ej-chart id="chartcontainer" primaryYAxis.intervalType="years">
</ej-chart>
primaryYAxis.isInversed boolean
Specifies whether to inverse the axis.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryYAxis.isInversed]="true" >
</ej-chart>
primaryYAxis.labelFormat string
Custom formatting for axis label and supports all standard formatting type of numerical and date time values.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryYAxis.labelFormat="c">
</ej-chart>
primaryYAxis.labelIntersectAction enum
Specifies the action to take when the axis labels are overlapping with each other.
Default Value
- ej.datavisualization.Chart.LabelIntersectAction.None
Example
<ej-chart id="chartcontainer" primaryYAxis.labelIntersectAction="multipleRows">
</ej-chart>
primaryYAxis.labelPosition enum
Specifies the position of the axis labels.
Default Value
- “outside”. See LabelPosition
Example
<ej-chart id="chartcontainer" primaryYAxis.labelPosition="inside">
</ej-chart>
primaryYAxis.alignment enum
Specifies the position of the axis labels.
Default Value
- “center”. See Alignment
Example
<ej-chart id="chartcontainer" primaryYAxis.alignment="far">
</ej-chart>
primaryYAxis.logBase number
Logarithmic base value. This is applicable only for logarithmic axis.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [primaryYAxis.logBase]=2>
</ej-chart>
primaryYAxis.majorGridLines object
Options for customizing major gird lines.
primaryYAxis.majorGridLines.dashArray string
Pattern of dashes and gaps used to stroke the major grid lines.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryYAxis.majorGridLines.dashArray='2,3'>
</ej-chart>
primaryYAxis.majorGridLines.color string
Color of the major grid lines.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryYAxis.majorGridLines.color="blue">
</ej-chart>
primaryYAxis.majorGridLines.opacity number
Opacity of major grid lines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.majorGridLines.opacity]="0.5">
</ej-chart>
primaryYAxis.majorGridLines.visible boolean
Show/hides the major grid lines.
Default Value
- true
Example
<ej-chart id="chartcontainer"
[primaryYAxis.majorGridLines.visible]="true">
</ej-chart>
primaryYAxis.majorGridLines.width number
Width of the major grid lines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.majorGridLines.width]=1>
</ej-chart>
primaryYAxis.majorTickLines object
Options for customizing the major tick lines.
primaryYAxis.majorTickLines.size number
Length of the major tick lines.
Default Value
- 5
Example
<ej-chart id="chartcontainer" [primaryYAxis.majorTickLines.size]=10>
</ej-chart>
primaryYAxis.majorTickLines.visible boolean
Show/hides the major tick lines.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryYAxis.majorTickLines.visible]="false">
</ej-chart>
primaryYAxis.majorTickLines.width number
Width of the major tick lines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.majorTickLines.width]=1 >
</ej-chart>
primaryYAxis.maximumLabels number
Maximum number of labels to be displayed in every 100 pixels.
Default Value
- 3
Example
primaryYAxis.maximumLabelWidth number
Maximum width of the axis label. When the label exceeds the width, the label gets trimmed when the enableTrim is set to true.
Default Value
- ej.datavisualization.Chart.maximumLabelWidth type {int}
Example
<ej-chart id="chartcontainer" [primaryYAxis.maximumLabelWidth]="34.5" >
</ej-chart>
primaryYAxis.minorGridLines object
Options for customizing the minor grid lines.
primaryYAxis.minorGridLines.dashArray string
Patterns of dashes and gaps used to stroke the minor grid lines.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryYAxis.minorGridLines.dashArray='2,3'>
</ej-chart>
primaryYAxis.minorGridLines.visible boolean
Show/hides the minor grid lines.
Default Value
- true
Example
<ej-chart id="chartcontainer"
[primaryYAxis.minorGridLines.visible]="true">
</ej-chart>
primaryYAxis.minorGridLines.width number
Width of the minorGridLines.
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.minorGridLines.width]=1>
</ej-chart>
primaryYAxis.minorTickLines object
Options for customizing the minor tick lines.
primaryYAxis.minorTickLines.size number
Length of the minor tick lines.
Default Value
- 5
Example
<ej-chart id="chartcontainer" [primaryYAxis.minorTickLines.size]=10>
</ej-chart>
primaryYAxis.minorTickLines.visible boolean
Show/hides the minor tick lines.
Default Value
- true
Example
<ej-chart id="chartcontainer" [primaryYAxis.minorTickLines.visible]="false">
</ej-chart>
primaryYAxis.minorTickLines.width number
Width of the minor tick line
Default Value
- 1
Example
<ej-chart id="chartcontainer" [primaryYAxis.minorTickLines.width]=1 >
</ej-chart>
primaryYAxis.minorTicksPerInterval number
Specifies the number of minor ticks per interval.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.minorTicksPerInterval]=0>
</ej-chart>
primaryYAxis.name string
Unique name of the axis. To associate an axis with the series, you have to set this name to the xAxisName/yAxisName property of the series.
Default Value
- null
Example
<ej-chart id="chartcontainer" primaryYAxis.name="" >
</ej-chart>
primaryYAxis.opposedPosition boolean
Specifies whether to render the axis at the opposite side of its default position.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryYAxis.opposedPosition]="true" >
</ej-chart>
primaryYAxis.orientation enum
Specifies the orientation of the axis line in the chart.
Default Value
- Vertical
Example
// Creating a secondary axis
this.chartAxes = [{name:"secondaryXAxis", orientation: "horizontal"}];
<ej-chart id="chartcontainer" [axes]="chartAxes"></ej-chart>
primaryYAxis.plotOffset number
Specifies the padding for the plot area.
Default Value
- 10
Example
<ej-chart id="chartcontainer" [primaryYAxis.plotOffset]=10>
</ej-chart>
primaryYAxis.range object
Options to customize the range of the axis.
primaryYAxis.range.min number
Minimum value of the axis range.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.range.min]=0></ej-chart>
primaryYAxis.range.max number
Maximum value of the axis range.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.range.max]=60></ej-chart>
primaryYAxis.range.interval number
Interval for the range.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.range.interval]=5></ej-chart>
primaryYAxis.rangePadding enum
Specifies the padding for the axis range.
Default Value
- ej.datavisualization.Chart.RangePadding.None. See RangePadding
Example
<ej-chart id="chartcontainer" primaryYAxis.rangePadding="normal"></ej-chart>
primaryYAxis.roundingPlaces number
Rounds the number to the given number of decimals.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.roundingPlaces]="3"></ej-chart>
primaryYAxis.rowIndex number
Specifies the index of the row to which the axis is associated, when the chart area is divided into multiple plot areas by using rowDefinitions.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.rowIndex]=2>
</ej-chart>
primaryYAxis.rowSpan number
Specifies the number of row or plot areas an axis has to span vertically.
Default Value
- null
Example
<ej-chart id="chartcontainer" [primaryYAxis.rowSpan]=2>
</ej-chart>
primaryYAxis.multiLevelLabels array
Options for customizing the multi level labels.
Default Value
- [ ]
primaryYAxis.multiLevelLabels.visible boolean
Visibility of the multi level labels.
Default Value
- false
Example
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels.visible]="true">
</ej-chart>
primaryYAxis.multiLevelLabels.text string
Text of the multi level labels.
Default Value
- ””
Example
this.multiLabels = [{
text: "Quater1",
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.start number
Starting value of the multi level labels.
Default Value
- null
Example
this.multiLabels = [{
start: 1,
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.end number
Ending value of the multi level labels.
Default Value
- null
Example
this.multiLabels = [{
end: 4,
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.level number
Specifies the level of multi level labels.
Default Value
- 0
Example
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels.level]=2>
</ej-chart>
primaryYAxis.multiLevelLabels.maximumTextWidth number
Specifies the maximum width of the text in multi level labels.
Default Value
- null
Example
this.multiLabels = [{
maximumtextWidth: 40
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.textAlignment enum
Specifies the alignment of the text in multi level labels.
Default Value
- “center”. See TextAlignment
Example
this.multiLabels = [{
// customizing the text alignment
textAlignment: "near",
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.textOverflow enum
Specifies the handling of text over flow in multi level labels.
Default Value
- “center”. See TextOverflow
Example
this.multiLabels = [{
// customizing the text overflow
textOverflow: “trim",
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.font object
Options for customizing the font of the text.
primaryYAxis.multiLevelLabels.font.color string
Font color of the multi level labels text.
Default Value
- null
Example
this.multiLabels = [{
font:{
color: "green"
}
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.font.fontFamily string
Font family of the multi level labels text.
Default Value
- “Segoe UI”
Example
this.multiLabels = [{
font:{
fontFamily: "Algerian",
}
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.font.fontStyle enum
Font style of the multi level labels text.
Default Value
- “Normal”
Example
this.multiLabels = [{
font:{
fontStyle: "Bold",
}
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.font.fontWeight string
Font weight of the multi level label text.
Default Value
- “regular”
Example
this.multiLabels = [{
font:{
fontWeight:"lighter",
}
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.font.opacity number
Opacity of the multi level label text.
Default Value
- 1
Example
this.multiLabels = [{
font:{
opacity: 0.5,
}
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.font.size string
Font size of the multi level label text.
Default Value
- “12px”
Example
this.multiLabels = [{
font:{
size: "12px",
}
}];
<ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
</ej-chart>
primaryYAxis.multiLevelLabels.border object
Options for customizing the border of the series.
primaryYAxis.multiLevelLabels.border.color string
Border color of the multi level labels.
Default Value
- null
Example
this.multiLabels = [{
border:{