ejChart
11 Jul 201824 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.
Syntax
$(element).ejChart();
Example
<div id="container"></div>
<script>
// Create Chart
$('#container').ejChart();
</script>
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
$("#container").ejChart({
annotations :[{ angle : 45}]
});
Try it: Annotation angle
annotations.content string
Text content or id of a HTML element to be displayed as annotation.
Default Value
- ””
Example
$("#container").ejChart({
annotations :[{ content :"Template"}]
});
Try it: Annotation Content
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
$("#container").ejChart({
annotations :[{ coordinateUnit :"pixels"}]
});
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
$("#container").ejChart({
annotations :[{ horizontalAlignment :"left"}]
});
Try it: Horizontal Alignment
annotations.margin object
Options to customize the margin of annotation.
Try it: Margin
annotations.margin.bottom number
Annotation is placed at the specified value above its original position.
Default Value
- 0
Example
$("#container").ejChart({
annotations :[{ margin :{ bottom:10}}]
});
annotations.margin.left number
Annotation is placed at the specified value from left side of its original position.
Default Value
- 0
Example
$("#container").ejChart({
annotations :[{ margin :{ left:10}}]
});
annotations.margin.right number
Annotation is placed at the specified value from the right side of its original position.
Default Value
- 0
Example
$("#container").ejChart({
annotations :[{ margin :{ right:10}}]
});
annotations.margin.top number
Annotation is placed at the specified value under its original position.
Default Value
- 0
Example
$("#container").ejChart({
annotations :[{ margin :{ top:10}}]
});
annotations.opacity number
Controls the opacity of the annotation.
Default Value
- 1
Example
$("#container").ejChart({
annotations :[{ opacity : 0.5}]
});
Try it: Annotation Opacity
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
$("#container").ejChart({
annotations :[{ region :"series"}]
});
Try it: Annotation Region
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
$("#container").ejChart({
annotations :[{ verticalAlignment :"top"}]
});
Try it: Vertical Alignment
annotations.visible boolean
Controls the visibility of the annotation.
Default Value
- false
Example
$("#container").ejChart({
annotations :[{ visible :true}]
});
Try it: Annotation Visibility
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
$("#container").ejChart({
annotations :[{ x : 100}]
});
Try it: Annotation Positioning
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
$("#container").ejChart({
annotations :[{ xAxisName : "xAxis1"}]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
annotations :[{ y : 100}]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
annotations :[{ yAxisName : "yAxis1"}]
});
Try it: JS Playground Sample
background string
Sets the background color of the chart.
Default Value
- transparent
Example
$("#container").ejChart({
background: "skyblue"
});
Try it: JS playground Sample
backGroundImageUrl string
URL of the image to be used as chart background.
Default Value
- null
Example
$("#container").ejChart({
backGroundImageUrl: "../images/chart/wheat.png"
});
Try it: JS playground Sample
border object
Options for customizing the color, opacity and width of the chart border.
Try it: JS Playground Sample
border.color string
Border color of the chart.
Default Value
- null
Example
$("#container").ejChart({
border: { color: "green" }
});
border.opacity number
Opacity of the chart border.
Default Value
- 0.3
Example
$("#container").ejChart({
border: { opacity: 0.5 }
});
border.width number
Width of the Chart border.
Default Value
- 0
Example
$("#container").ejChart({
border: { width: 2 }
});
exportSettings object
This provides options for customizing export settings
exportSettings.filename string
Specifies the downloading filename
Default Value
- “chart”
Example
$("#container").ejChart({
exportSettings: { filename : "myChart" }
});
exportSettings.action string
Specifies the name of the action URL
Default Value
- ””
Example
$("#container").ejChart({
exportSettings: { action : "http://js.syncfusion.com/ExportingServices/api/JSChartExport/Export" }
});
exportSettings.angle number
Specifies the angle for rotation
Default Value
- 0
Example
$("#container").ejChart({
exportSettings: { angle : 90}
});
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
$("#container").ejChart({
exportSettings: { type : "jpg"}
});
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
$("#container").ejChart({
exportSettings: { orientation : "landscape"}
});
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
$("#container").ejChart({
exportSettings: { mode : "server"}
});
exportSettings.multipleExport boolean
Enable/ disable the multiple excel exporting
Default Value
- false
Example
$("#container").ejChart({
exportSettings: { multipleExport : true }
});
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
$("#container").ejChart({
chartArea: { background : "white" }
});
Try it: JS Playground Sample
chartArea.border object
Options for customizing the border of the plot area.
Try it: JS Playground Sample
chartArea.border.color string
Border color of the plot area.
Default Value
- Gray
Example
$("#container").ejChart({
chartArea: { border: { color :"green"} }
});
chartArea.border.opacity number
Opacity of the plot area border.
Default Value
- 0.3
Example
$("#container").ejChart({
chartArea: { border: { opacity : 0.5} }
});
chartArea.border.width number
Border width of the plot area.
Default Value
- 0.5
Example
$("#container").ejChart({
chartArea: { border: { width : 0.2} }
});
columnDefinitions array
Options to split Chart into multiple plotting areas vertically. Each object in the collection represents a plotting area in Chart.
Try it: JS Playground Sample
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
$("#container").ejChart({
columnDefinitions :[{unit : "percentage"}]
});
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
$("#container").ejChart({
columnDefinitions :[{ columnWidth : 50 }]
});
columnDefinitions.lineColor string
Color of the line that indicates the starting point of the column in plotting area.
Default Value
- “transparent”
Example
$("#container").ejChart({
columnDefinitions :[{ lineColor : "green" }]
});
columnDefinitions.lineWidth number
Width of the line that indicates the starting point of the column in plot area.
Default Value
- 1
Example
$("#container").ejChart({
columnDefinitions :[{ lineWidth : 2 }]
});
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.animationDuration string
Specifies animation duration for series rendering
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : [{
animationDuration : 2000
}]
});
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
$("#container").ejChart({
commonSeriesOptions :{border :{ color : "green" } }
});
commonSeriesOptions.border.dashArray string
DashArray for border of the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {
border: {
dashArray: "5,3"
}
}
});
commonSeriesOptions.border.width number
Border width of all series.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{border :{ width : 2 } }
});
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
$('#container').ejChart({
commonSeriesOptions: {
//change to cylinder chart
columnFacet: "cylinder"
},
//...
});
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
$('#container').ejChart({
commonSeriesOptions: {
//Width of columns in column type series
columnWidth: 0.8
//...
},
//...
});
commonSeriesOptions.columnSpacing number
Spacing between columns of different series. Value ranges from 0 to 1
Default Value
- 0
Example
$('#container').ejChart({
commonSeriesOptions: {
//20% Spacing between columns
columnWidth: 0.2
},
//...
});
commonSeriesOptions.visibleOnLegend string
Enables or disables the visibility of legend item.
Default Value
- “visible”
Example
$("#container").ejChart({
commonSeriesOptions : {visibleOnLegend: "hidden" }
});
commonSeriesOptions.stackingGroup string
Group of the stacking collection series.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{stackingGroup : " "}
});
commonSeriesOptions.dashArray string
Pattern of dashes and gaps used to stroke all the line type series.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{dashArray : "2,3"}
});
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
$("#container").ejChart({
commonSeriesOptions : {dataSource: data }
});
Try it: JS Playground Sample
commonSeriesOptions.cardinalSplineTension number
Specifies spline tension value for cardinal spline type. Value ranges from 0 to 1.
Default Value
- 0.5
Example
$("#container").ejChart({
commonSeriesOptions :{ cardinalSplineTension : 0.5}
});
commonSeriesOptions.doughnutCoefficient number
Controls the size of the hole in doughnut series. Value ranges from 0 to 1
Default Value
- 0.4
Example
$("#container").ejChart({
commonSeriesOptions :{ doughnutCoefficient : 0.5}
});
Try it: JS Playground Sample
commonSeriesOptions.doughnutSize number
Controls the size of the doughnut series. Value ranges from 0 to 1.
Default Value
- 0.8
Example
$("#container").ejChart({
commonSeriesOptions :{ doughnutSize : 0.9}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{ drawType : "area"}
});
Try it: JS Playground Sample
commonSeriesOptions.enableAnimation boolean
Enable/disable the animation for all the series.
Default Value
- true
Example
$("#container").ejChart({
commonSeriesOptions :{ enableAnimation : false}
});
commonSeriesOptions.enableSmartLabels boolean
To avoid overlapping of data labels smartly.
Default Value
- true
Example
$("#container").ejChart({
commonSeriesOptions :{ enableSmartLabels : false}
});
Try it: JS Playground Sample
commonSeriesOptions.endAngle number
Start angle of pie/doughnut series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{ endAngle : 270}
});
Try it: JS Playground Sample
commonSeriesOptions.explode boolean
Explodes the pie/doughnut slices on mouse move.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{ explode : true}
});
Try it: JS Playground Sample
commonSeriesOptions.explodeAll boolean
Explodes all the slice of pie/doughnut on render.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{ explodeAll : true}
});
Try it: JS Playground Sample
commonSeriesOptions.explodeIndex number
Index of the point to be exploded from pie/doughnut/pyramid/funnel.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{ explodeIndex : 2}
});
Try it: JS Playground Sample
commonSeriesOptions.explodeOffset number
Specifies the distance of the slice from the center, when it is exploded.
Default Value
- 0.4
Example
$("#container").ejChart({
commonSeriesOptions :{ explodeOffset : 20}
});
Try it: JS Playground Sample
commonSeriesOptions.fill string
Fill color for all the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{fill : "green"}
});
Try it: JS Playground
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
$("#container").ejChart({
commonSeriesOptions :{font :{color : "green"}}
});
commonSeriesOptions.font.fontFamily string
Font Family for all the series.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
commonSeriesOptions :{ font : { fontFamily : "Algerian"}}
});
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
$("#container").ejChart({
commonSeriesOptions : {font :{fontStyle : "italic"}}
});
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
$("#container").ejChart({
commonSeriesOptions :{font :{fontWeight : "lighter"}}
});
commonSeriesOptions.font.opacity number
Opacity for text in all the series.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{font :{opacity : 0.5}}
});
commonSeriesOptions.font.size string
Font size for text in all the series.
Default Value
- “12px”
Example
$("#container").ejChart({
commonSeriesOptions :{font :{size : "14px"}}
});
Try it: JS Playground Sample
commonSeriesOptions.funnelHeight string
Sets the height of the funnel in funnel series. Values can be either pixel or percentage.
Default Value
- “32.7%”
Example
<div id="container"></div>
<script>
$("#container").ejChart({
commonSeriesOptions : {funnelHeight : '40%' }
});
</script>
Try it: JS Playground Sample
commonSeriesOptions.funnelWidth string
Sets the width of the funnel in funnel series. Values can be either pixel or percentage.
Default Value
- “11.6%”
Example
$("#container").ejChart({
commonSeriesOptions : {funnelWidth : '40%' }
});
Try it: JS Playground Sample
commonSeriesOptions.gapRatio number
Gap between the slices in pyramid and funnel series.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions :{ gapRatio : 0.5}
});
Try it: JS Playground
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
$("#container").ejChart({
commonSeriesOptions :{ isClosed : false}
});
Try it: JS Playground Sample
commonSeriesOptions.isStacking boolean
Specifies whether to stack the column series in polar/radar charts.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{ isStacking : "true"}
});
Try it: JS Playground Sample
commonSeriesOptions.isTransposed boolean
Renders the chart vertically. This is applicable only for Cartesian type series.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions : {isTransposed : false }
});
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
$("#container").ejChart({
commonSeriesOptions : {showMedian : true }
});
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
$("#container").ejChart({
commonSeriesOptions :{ labelPosition : "outside"}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{ splitMode : "position"}
});
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
$("#container").ejChart({
commonSeriesOptions :{ boxPlotMode : "inclusive"}
});
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
$("#container").ejChart({
commonSeriesOptions :{ bubbleOptions: { radiusMode: "minMax" }}
});
commonSeriesOptions.bubbleOptions.minRadius number
Used for the setting the minimum radius of the bubble
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{ bubbleOptions: { minRadius: 3 }}
});
commonSeriesOptions.bubbleOptions.maxRadius number
Used for setting the maximum radius of the bubble
Default Value
- 3
Example
$("#container").ejChart({
commonSeriesOptions :{ bubbleOptions: { maxRadius: 7 }}
});
Try it: JS Playground Sample
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”. See SplineType
Example
$("#container").ejChart({
commonSeriesOptions :{ splineType : "cardinal"}
});
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
$("#container").ejChart({
commonSeriesOptions :{lineCap : "butt"}
});
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
$("#container").ejChart({
commonSeriesOptions :{lineCap : "round"}
});
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
$("#container").ejChart({
commonSeriesOptions :{color : "green"}
});
commonSeriesOptions.marker.border.width number
Border width of the marker shape.
Default Value
- 3
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{border :{width : 2}}}
});
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{angle : 90}}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.maximumLabelWidth number
Maximum label width of the data label.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{maximumLabelWidth : 90}}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.enableWrap boolean
Enable the wrap option to the data label.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{enableWrap : false}}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.enableContrastColor boolean
Enables saturation to the data label.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{enableContrastColor : false}}}
});
commonSeriesOptions.marker.dataLabel.showEdgeLabels boolean
Displays the partially visible labels inside the chart Area
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{showEdgeLabels : false}}}
});
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{border : {color : "green"}}}}
});
commonSeriesOptions.marker.dataLabel.border.width number
Border width of the data label.
Default Value
- 0.1
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{border :{ width :2 }}}}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ type : "bezier" }}}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.connectorLine.width number
Width of the connector.
Default Value
- 0.5
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ width : 2 }}}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.connectorLine.color string
Color of the connector line.
Default Value
- “#565656”
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ color : "red" }}}}
});
### commonSeriesOptions.marker.dataLabel.connectorLine.height string
Height of the connector line.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ height : 20 }}}}
});
commonSeriesOptions.marker.dataLabel.fill string
Background color of the data label.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{fill : "green"}}}
});
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{ font :{fontFamily : "Algerian"}}}}
});
commonSeriesOptions.marker.dataLabel.font.fontStyle enum
Font style of the data label.
Default Value
- “normal”. See FontStyle
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{font :{ fontStyle : "italic" }}}}
});
commonSeriesOptions.marker.dataLabel.font.fontWeight enum
Font weight of the data label.
Default Value
- “regular”. See FontWeight
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{font : { fontWeight : "lighter" }}}}
});
commonSeriesOptions.marker.dataLabel.font.opacity number
Opacity of the text.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{font :{ opacity : 0.5 }}}}
});
commonSeriesOptions.marker.dataLabel.font.color string
Font color of the data label text.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{font :{ color : "red" }}}}
});
commonSeriesOptions.marker.dataLabel.font.size string
Font size of the data label.
Default Value
- “12px”
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{font : { size : "14px" }}}}
});
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{horizontalTextAlignment : "far"}}}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ bottom :10 }}}}
});
commonSeriesOptions.marker.dataLabel.margin.left number
Left margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ left : 10}}}}
});
commonSeriesOptions.marker.dataLabel.margin.right number
Right margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ right :10 }}}}
});
commonSeriesOptions.marker.dataLabel.margin.top number
Top margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ top :10 } }}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.opacity number
Opacity of the data label.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{opacity : 0.5}}}
});
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
$("#container").ejChart({
commonSeriesOptions :[{ marker :{dataLabel :{offset : { x:10 }}} }]
});
commonSeriesOptions.marker.dataLabel.offset.y number
Y value or vertical offset to position the labels.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions :[{ marker :{dataLabel :{offset : { y:10 }}} }]
});
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{shape : "circle"}}}
});
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
$("#container").ejChart({
commonSeriesOptions : { marker : { dataLabel : { template : "LabelTemplateID" }}}
});
commonSeriesOptions.marker.dataLabel.textMappingName string
Name of a field in data source, where datalabel text is displayed.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions : { marker : { dataLabel : { textMappingName : "TextFieldName" }}}
});
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{textPosition : "bottom"}}}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{verticalTextAlignment : "far"}}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.dataLabel.visible boolean
Controls the visibility of the data labels.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{visible : true}}
});
commonSeriesOptions.marker.fill string
Color of the marker shape.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{marker : { fill : "green" } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{marker :{ imageUrl: "../images/sample.png"}}
});
Try it: JS Playground Sample
commonSeriesOptions.marker.opacity number
Opacity of the marker.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{ opacity : 0.5 }}
});
commonSeriesOptions.marker.shape enum
Specifies the shape of the marker.
Default Value
- “circle”. See Shape
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{ shape: "rectangle"}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{marker :{size :{height : 5}}}
});
commonSeriesOptions.marker.size.width number
Width of the marker.
Default Value
- 6
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{ size :{ width : 2 } } }
});
Try it: JS Playground Sample
commonSeriesOptions.marker.visible boolean
Controls the visibility of the marker shape.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{marker :{ visible : true}}
});
Try it: JS Playground Sample
commonSeriesOptions.opacity number
Opacity of the series.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{opacity : 0.5}
});
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
$("#container").ejChart({
commonSeriesOptions :{outlier :{ shape: "rectangle"}
});
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
$("#container").ejChart({
commonSeriesOptions :{outlierSettings :{size :{height : 5}}}
});
commonSeriesOptions.outlierSettings.size.width number
Width of the outlier shape.
Default Value
- 6
Example
$("#container").ejChart({
commonSeriesOptions :{outlierSettings :{ size :{ width : 2 } } }
});
commonSeriesOptions.palette string
Name of a field in data source, where the fill color for all the data points is generated.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions : { palette : "ColorFieldName" }
});
commonSeriesOptions.pieCoefficient number
Controls the size of pie series. Value ranges from 0 to 1.
Default Value
- 0.8
Example
$("#container").ejChart({
commonSeriesOptions :{ pieCoefficient : 1}
});
Try it: JS Playground Sample
commonSeriesOptions.pieOfPieCoefficient number
Controls the size of the second pie in pieOfPie series. Value ranges from 0 to 1.
Default Value
- 0.6
Example
$("#container").ejChart({
commonSeriesOptions :{ pieOfPieCoefficient : 1}
});
commonSeriesOptions.splitValue string
Split Value of pieOfPie series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : [{splitValue: "40" }]
});
commonSeriesOptions.gapWidth number
Distance between the two pie’s in pieOfPie series.
Default Value
- 50
Example
$("#container").ejChart({
commonSeriesOptions :{ gapWidth : 300}
});
commonSeriesOptions.pointColorMappingName string
Name of the property in the datasource that contains fill color for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {pointColorMappingName: "color" }
});
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
$("#container").ejChart({
commonSeriesOptions :{ pyramidMode : "linear"}
});
Try it: JS Playground Sample
commonSeriesOptions.startAngle number
Start angle from where the pie/doughnut series renders. By default it starts from 0.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{ startAngle : 150}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions : {
cornerRadius: 10
}
});
commonSeriesOptions.cornerRadius.topLeft number
Specifies the radius for the top left corner.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions : {
cornerRadius: {topLeft : 10 }
}
});
commonSeriesOptions.cornerRadius.topRight number
Specifies the radius for the top right corner.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions : {
cornerRadius: {topRight : 10 }
}
});
commonSeriesOptions.cornerRadius.bottomLeft number
Specifies the radius for the bottom left corner.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions : {
cornerRadius: {bottomLeft : 10 }
}
});
commonSeriesOptions.cornerRadius.bottomRight number
Specifies the radius for the bottom right corner.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions : {
cornerRadius: {bottomRight : 10 }
}
});
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
$("#container").ejChart({
commonSeriesOptions :{tooltip :{border:{ color : "green" }}}
});
commonSeriesOptions.tooltip.border.width number
Border width of the tooltip.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{border :{ width : 2}}}
});
Try it: JS Playground Sample
commonSeriesOptions.tooltip.rx number
Customize the corner radius of the tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{rx: 10}}
});
Try it: JS Playground Sample
commonSeriesOptions.tooltip.ry number
Customize the corner radius of the tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{ry: 10}}
});
Try it: JS Playground Sample
commonSeriesOptions.tooltip.duration string
Specifies the duration, the tooltip has to be displayed.
Default Value
- “500ms”
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{duration : "300ms"}}
});
commonSeriesOptions.tooltip.enableAnimation boolean
Enables/disables the animation of the tooltip when moving from one point to other.
Default Value
- true
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{enableAnimation : false}}
});
commonSeriesOptions.tooltip.fill string
Background color of the tooltip.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{fill : "green"}}
});
commonSeriesOptions.tooltip.format string
Format of the tooltip content.
Default Value
- “#point.x# : #point.y#”
Example
$("#container").ejChart({
commonSeriesOptions :{ tooltip : { format : "#point.x# : #point.y#%" } }
});
Try it: JS Playground Sample
commonSeriesOptions.tooltip.opacity number
Opacity of the tooltip.
Default Value
- 0.5
Example
$("#container").ejChart({
commonSeriesOptions :{tooltip :{opacity : 0.5}}
});
Try it: JS Playground Sample
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
<div id="item" style="display: none;">
<div>
<div>#point.x#</div>
<div>#point.y#</div>
</div>
</div>
$("#container").ejChart({
commonSeriesOptions :{ tooltip: { template : "item" }}
});
Try it: JS Playground Sample
commonSeriesOptions.tooltip.visible boolean
Controls the visibility of the tooltip.
Default Value
- false
Example
$("#container").ejChart({
commonSeriesOptions :{ tooltip :{visible : true} }
});
Try it: JS Playground Sample
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. |
StackingSplineArea | string | sets the seriesType of chart to stackingSplineArea |
StackingSplineArea100 | string | sets the seriesType of chart to stackingsplinearea100 |
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
$("#container").ejChart({
commonSeriesOptions :{ type : "spline"}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{ xAxisName : "xAxis"}
});
Try it: JS Playground Sample
commonSeriesOptions.xName string
Name of the property in the datasource that contains x value for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {xName: "XValue" }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{ yAxisName : "yAxis"}
});
Try it: JS Playground Sample
commonSeriesOptions.yName string
Name of the property in the datasource that contains y value for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{yName: "yValue" }
});
Try it: JS Playground Sample
commonSeriesOptions.high string
Name of the property in the datasource that contains high value for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {high: "high" }
});
commonSeriesOptions.low string
Name of the property in the datasource that contains low value for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {low: "low" }
});
Try it: JS Playground Sample
commonSeriesOptions.open string
Name of the property in the datasource that contains open value for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {open: "open" }
});
commonSeriesOptions.close string
Name of the property in the datasource that contains close value for the series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {close: "close" }
});
Try it: JS Playground Sample
commonSeriesOptions.zOrder number
Z-order of the series.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions :{zOrder : 1}
});
commonSeriesOptions.size string
Name of the property in the datasource that contains the size value for the bubble series.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : [{size: "size" }]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions : {
emptyPointSettings: {
visible : false,
}
}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions : {
emptyPointSettings: {
displayMode : "gap",
}
}
});
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
$("#container").ejChart({
commonSeriesOptions : {
emptyPointSettings: {
style: { color : "red" }
}
}
});
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
$("#container").ejChart({
commonSeriesOptions : {
emptyPointSettings: {
style: { border: { color : "red" } }
}
}
});
commonSeriesOptions.emptyPointSettings.style.border.width number
Border width of the empty point.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
emptyPointSettings: {
style: { border: { width : 1.2 } }
}
}
});
commonSeriesOptions.positiveFill string
Fill color for the positive column of the waterfall.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {
positiveFill : “Red”
}
});
Try it: JS Playground Sample
commonSeriesOptions.connectorLine object
Options for customizing the waterfall connector line.
Try it: JS Playground Sample
commonSeriesOptions.connectorLine.width number
Width of the connector line.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
connectorLine: {width : 1 }
}
});
commonSeriesOptions.connectorLine.color string
Color of the connector line.
Default Value
- “#565656”
Example
$("#container").ejChart({
commonSeriesOptions : {
connectorLine: {color : "grey" }
}
});
commonSeriesOptions.connectorLine.dashArray string
DashArray of the connector line.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions : {
connectorLine: {dashArray : "2,3" }
}
});
commonSeriesOptions.connectorLine.opacity number
DashArray of the connector line.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
connectorLine: {opacity : 0.5 }
}
});
commonSeriesOptions.dragSettings object
Options to customize the drag and drop in series.
commonSeriesOptions.dragSettings.enable boolean
drag/drop the series
Default Value
- “false”
Example
$("#container").ejChart({
commonSeriesOptions : {
dragSettings:{enable: true}
}
});
commonSeriesOptions.dragSettings.type string
Specifies the type of drag settings.
Default Value
- “xy”
Example
$("#container").ejChart({
commonSeriesOptions : {
dragSettings:{type: "x"}
}
});
commonSeriesOptions.errorBar object
Options to customize the error bar in series.
commonSeriesOptions.errorBar.visibility boolean
Show/hides the error bar
Default Value
- “visible”
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{visibility: "hidden"}
}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{type: "Percentage"}
}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{mode: "Horizontal"}
}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{direction: "plus"}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.verticalErrorValue number
Value of vertical error bar.
Default Value
- 3
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{verticalErrorValue: 1}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.horizontalErrorValue number
Value of horizontal error bar.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{horizontalErrorValue: 1}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.horizontalPositiveErrorValue number
Value of positive horizontal error bar.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{horizontalPositiveErrorValue: 1}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.horizontalNegativeErrorValue number
Value of negative horizontal error bar.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{horizontalNegativeErrorValue: 1}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.verticalPositiveErrorValue number
Value of positive vertical error bar.
Default Value
- 5
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{verticalPositiveErrorValue: 1}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.verticalNegativeErrorValue number
Value of negative vertical error bar.
Default Value
- 5
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{verticalNegativeErrorValue: 1}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.fill string
Fill color of the error bar.
Default Value
- “#000000”
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{
fill:”red”
}
}
});
Try it: JS Playground Sample
commonSeriesOptions.errorBar.width number
Width of the error bar.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{
width: 1
}
}
});
commonSeriesOptions.errorBar.cap object
Options for customizing the error bar cap.
Try it: JS Playground Sample
commonSeriesOptions.errorBar.cap.visible boolean
Show/Hides the error bar cap.
Default Value
- true
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{
cap:{visible:false}
}
}s
});
commonSeriesOptions.errorBar.cap.width number
Width of the error bar cap.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{
cap:{width:1}
}
}
});
commonSeriesOptions.errorBar.cap.length number
Length of the error bar cap.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions : {
errorBar:{
cap:{length: 10}
}
}
});
commonSeriesOptions.errorBar.cap.fill string
Color of the error bar cap.
Default Value
- “#000000”
Example
$("#container").ejChart({
commonSeriesOptions :{
errorBar:{
cap:{fill: “red”}
}
}
});
commonSeriesOptions.trendlines array
Option to add the trendlines to chart.
commonSeriesOptions.trendlines.visibility boolean
Show/hides the trendline.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ visibility:'visible' }]}
});
commonSeriesOptions.trendlines.visibleOnLegend string
Show/hides the trendline legend.
Default Value
- visible
Example
$("#container").ejChart({
commonSeriesOptions :[{trendlines:[{ visibleOnLegend:'hidden' }]}]
});
commonSeriesOptions.trendlines.type enum
Specifies the type of the trendline for the series.
Name | Type | Description |
---|---|---|
Linear | string | Specifies the trendline type as linear. |
Exponential | string | Specifies the trendline type as exponential. |
Logarithmic | string | Specifies the trendline type as logarithmic. |
Power | string | Specifies the trendline type as power. |
Polynomial | string | Specifies the trendline type as polynomial. |
Default Value
- “linear”. See TrendlinesType
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ type:'linear' }]}
});
commonSeriesOptions.trendlines.name string
Name for the trendlines that is to be displayed in the legend text.
Default Value
- “trendline”
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ name:'Trendline' }]}
});
commonSeriesOptions.trendlines.fill string
Fill color of the trendlines.
Default Value
- “#0000FF”
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ fill:'#0000FF' }]}
});
commonSeriesOptions.trendlines.width number
Width of the trendlines.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ width:1 }]}
});
commonSeriesOptions.trendlines.opacity number
Opacity of the trendline.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ opacity:1 }]}
});
commonSeriesOptions.trendlines.dashArray string
Pattern of dashes and gaps used to stroke the trendline.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ dashArray:"" }]}
});
commonSeriesOptions.trendlines.forwardForecast number
Future trends of the current series.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ forwardForeCast:2 }]}
});
commonSeriesOptions.trendlines.backwardForecast number
Past trends of the current series.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ backwardForeCast:2 }]}
});
Try it: JS Playground Sample
commonSeriesOptions.trendlines.polynomialOrder number
Specifies the order of the polynomial trendlines.
Default Value
- 0
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ polynomialOrder:2 }]}
});
Try it: JS Playground Sample
commonSeriesOptions.trendlines.period number
Specifies the moving average starting period value.
Default Value
- 2
Example
$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ period: 3 }]}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{border:{ color : "green" }} }]}]
});
commonSeriesOptions.trendlines.tooltip.border.width number
Border width of the trendline tooltip.
Default Value
- 1
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{border:{ width : 2 }} }]}]
});
Try it: JS Playground Sample
commonSeriesOptions.trendlines.tooltip.rx number
Customize the corner radius of the trendline tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{rx: 10} }]}]
});
Try it: JS Playground Sample
commonSeriesOptions.trendlines.tooltip.ry number
Customize the corner radius of the trendline tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{ry: 10} }]}]
});
Try it: JS Playground Sample
commonSeriesOptions.trendlines.tooltip.duration string
Specifies the duration, the tooltip has to be displayed.
Default Value
- “500ms”
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{duration : "300ms"} }]}]
});
commonSeriesOptions.trendlines.tooltip.enableAnimation boolean
Enables/disables the animation of the trendline tooltip when moving from one point to other.
Default Value
- true
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{enableAnimation : false} }]}]
});
commonSeriesOptions.trendlines.tooltip.fill string
Background color of the trendline tooltip.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{fill : "green"} }]}]
});
commonSeriesOptions.trendlines.tooltip.format string
Format of the tooltip content displayed in the trendlines.
Default Value
- “#point.x# : #point.y#”
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{format : "#point.x# : #point.y#%"} }]}]
});
Try it: JS Playground Sample
commonSeriesOptions.trendlines.tooltip.opacity number
Opacity of the trendline tooltip.
Default Value
- 0.5
Example
$("#container").ejChart({
commonSeriesOptions :[{ trendlines:[{ tooltip :{opacity : 0.5} }]}]
});
commonSeriesOptions.trendlines.intercept number
Specifies the intercept value of the trendlines.
Default Value
- null
Example
$("#container").ejChart({
commonSeriesOptions :{ trendlines:[{ intercept : 10 }]}
});
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
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{enable:true}}
});
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
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{mode:"point"}}
});
commonSeriesOptions.highlightSettings.color string
Color of the series/point on highlight.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{color:"red"}}
});
commonSeriesOptions.highlightSettings.opacity number
Opacity of the series/point on highlight.
Default Value
- 0.6
Example
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{opacity:1}}
});
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
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{border:{color:"black"}}}
});
commonSeriesOptions.highlightSettings.border.width string
Border width of the series/point on highlight.
Default Value
- 2
Example
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{border:{width:1}}}
});
Try it: JS Playground Sample
commonSeriesOptions.highlightSettings.pattern string
Specifies the pattern for the series/point on highlight.
Default Value
- “none”. See Pattern
Example
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{pattern:"chessboard"}}
});
Try it: JS Playground Sample
commonSeriesOptions.highlightSettings.customPattern string
Custom pattern for the series on highlight.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{highlightSettings:{customPattern:""}}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{enable:true}}
});
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
$("#container").ejChart({
commonSeriesOptions:{
selectionSettings:{
type : 'multiple'
}
}
});
commonSeriesOptions.selectionSettings.mode enum
Specifies whether the series or data point has to be selected.
Default Value
- “series”. See Mode
Example
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{mode:"point"}}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
commonSeriesOptions: [{
selectionSettings:{
rangeType : 'x'
}
}]
});
commonSeriesOptions.selectionSettings.color string
Color of the series/point on selection.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{color:"red"}}
});
commonSeriesOptions.selectionSettings.opacity number
Opacity of the series/point on selection.
Default Value
- 0.6
Example
$("#container").ejChart({
commonSeriesOptions:{selectionSettings:{opacity:1}}
});
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
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{border:{color:"black"}}}
});
commonSeriesOptions.selectionSettings.border.width string
Border width of the series/point on selection.
Default Value
- 2
Example
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{border:{width:1}}}
});
commonSeriesOptions.selectionSettings.pattern string
Specifies the pattern for the series/point on selection.
Default Value
- “none”. See Pattern
Example
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{pattern:"chessboard"}}
});
Try it: JS Playground Sample
commonSeriesOptions.selectionSettings.customPattern string
Custom pattern for the series on selection.
Default Value
- ””
Example
$("#container").ejChart({
commonSeriesOptions :{selectionSettings:{customPattern:""}}
});
Try it: JS Playground Sample
selectedDataPointIndexes array
Options for displaying the chart along with selected points while loading
Default Value
- [ ]
Example
$("#container").ejChart({
selectedDataPointIndexes: [
{ seriesIndex:0 , pointIndex:2 },
{ seriesIndex:1 , pointIndex:4 }
],
});
Try it: JS Playground Sample
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
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { border : { width :2 } } }
});
crosshair.trackballTooltipSettings.border.color string
Border color of the trackball tooltip.
Default Value
- null
Example
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { border : { color :"red" } } }
});
crosshair.trackballTooltipSettings.fill string
Background color of the trackball tooltip.
Default Value
- null
Example
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { fill :"red" } }
});
crosshair.trackballTooltipSettings.rx number
Rounded corner x value of the trackball tooltip.
Default Value
- 3
Example
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { rx : 5 } }
});
crosshair.trackballTooltipSettings.ry number
Rounded corner y value of the trackball tooltip.
Default Value
- 3
Example
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { ry : 5 } }
});
crosshair.trackballTooltipSettings.opacity number
Opacity value of the trackball tooltip.
Default Value
- 1
Example
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { opacity : 0.5 } }
});
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
$("#container").ejChart({
crosshair : { trackballTooltipSettings : { mode : 'grouping' } }
});
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
$("#container").ejChart({
crosshair : { marker : { border : { width :2 } } }
});
crosshair.marker.opacity boolean
Opacity of the marker.
Default Value
- true
Example
$("#container").ejChart({
crosshair :{marker :{opacity :2}}
});
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
$("#container").ejChart({
crosshair :{marker :{size :{ height :15 }}}
});
crosshair.marker.size.width number
Width of the marker.
Default Value
- 10
Example
$("#container").ejChart({
crosshair :{marker :{size : {width :15}}}
});
crosshair.marker.visible boolean
Show/hides the marker.
Default Value
- true
Example
$("#container").ejChart({
crosshair :{marker :{visible :false}}
});
Try it: JS Playground Sample
crosshair.line object
Options for customizing the crosshair line.
crosshair.line.color string
Color of the crosshair line.
Default Value
- “transparent”
Example
$("#container").ejChart({
crosshair : { line : { color "red" } }
});
crosshair.line.width number
Width of the crosshair line.
Default Value
- 1
Example
$("#container").ejChart({
crosshair : { line : { width: 2 } }
});
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
$("#container").ejChart({
crosshair :{type : "trackball"}
});
crosshair.visible boolean
Show/hides the crosshair/trackball visibility.
Default Value
- false
Example
$("#container").ejChart({
crosshair :{visible :true}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
depth : 100
});
Try it: JS Playground Sample
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
$("#container").ejChart({
enable3D : true
});
Try it: JS Playground Sample
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
$("#container").ejChart({
enableCanvasRendering : true
});
Try it: JS Playground Sample
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
$("#container").ejChart({
initSeriesRender : false
});
enableRotation boolean
Controls whether 3D view has to be rotated on dragging. This property is applicable only for 3D view.
Default Value
- false
Example
$("#container").ejChart({
enableRotation : true
});
Try it: JS Playground Sample
indicators array
Options to customize the technical indicators.
indicators.dPeriod number
The dPeriod value for stochastic indicator.
Default Value
- 3
Example
$("#container").ejChart({
indicators :[{ dPeriod : 4}]
});
Try it: JS Playground Sample
indicators.enableAnimation boolean
Enables/disables the animation.
Default Value
- false
Example
$("#container").ejChart({
indicators :[{ enableAnimation : true}]
});
Try it: JS Playground Sample
indicators.animationDuration boolean
Specifies animation duration for indicator rendering.
Default Value
- null
Example
$("#container").ejChart({
indicators :[{ animationDuration:2000}]
});
indicators.fill string
Color of the technical indicator.
Default Value
- “#00008B”
Example
$("#container").ejChart({
indicators :[{ fill : "#ff0000"}]
});
Try it: JS Playground Sample
indicators.histogram object
Options to customize the histogram in MACD indicator.
indicators.histogram.border object
Options to customize the histogram border in MACD indicator.
Try it: JS Playground Sample
indicators.histogram.border.color string
Color of the histogram border in MACD indicator.
Default Value
- “#9999ff”
Example
$("#container").ejChart({
indicators :[{ histogram : {border: {color: "#ff0000"}}}]
});
indicators.histogram.border.width number
Controls the width of histogram border line in MACD indicator.
Default Value
- 1
Example
$("#container").ejChart({
indicators :[{ histogram : {border: {width: 2}}}]
});
indicators.histogram.fill string
Color of histogram columns in MACD indicator.
Default Value
- “#ccccff”
Example
$("#container").ejChart({
indicators :[{ histogram : {fill: "#ff0000"}}]
});
Try it: JS Playground Sample
indicators.histogram.opacity number
Opacity of histogram columns in MACD indicator.
Default Value
- 1
Example
$("#container").ejChart({
indicators :[{ histogram : {opacity: 0.5}}]
});
indicators.kPeriod number
Specifies the k period in stochastic indicator.
Default Value
- 3
Example
$("#container").ejChart({
indicators :[{ kPeriod : 4}]
});
indicators.longPeriod number
Specifies the long period in MACD indicator.
Default Value
- 26
Example
$("#container").ejChart({
indicators :[{ longPeriod : 14"}]
});
indicators.lowerLine object
Options to customize the lower line in indicators.
indicators.lowerLine.fill string
Color of lower line.
Default Value
- “#008000”
Example
$("#container").ejChart({
indicators :[{ lowerLine : {fill: "#ff0000"}}]
});
indicators.lowerLine.width number
Width of the lower line.
Default Value
- 2
Example
$("#container").ejChart({
indicators :[{ lowerLine : {width: 3}}]
});
indicators.macdLine object
Options to customize the MACD line.
Try it: JS Playground Sample
indicators.macdLine.fill string
Color of MACD line.
Default Value
- “#ff9933”
Example
$("#container").ejChart({
indicators :[{ macdLine : {fill: "#ff0000"}}]
});
indicators.macdLine.width number
Width of the MACD line.
Default Value
- 2
Example
$("#container").ejChart({
indicators :[{ macdLine : {width: 3}}]
});
indicators.macdType string
Specifies the type of the MACD indicator.
Default Value
- “line”. See MACDType
Example
$("#container").ejChart({
indicators :[{ macdType : "both"}]
});
indicators.period number
Specifies period value in indicator.
Default Value
- 14
Example
$("#container").ejChart({
indicators :[{ period : 20}]
});
Try it: JS Playground Sample
indicators.periodLine object
Options to customize the period line in indicators.
Try it: JS Playground Sample
indicators.periodLine.fill string
Color of period line in indicator.
Default Value
- “blue”
Example
$("#container").ejChart({
indicators :[{ periodLine : {fill: "#ff0000"}}]
});
indicators.periodLine.width number
Width of the period line in indicators.
Default Value
- 2
Example
$("#container").ejChart({
indicators :[{ periodLine : {width: 3}}]
});
indicators.seriesName string
Name of the series for which indicator has to be drawn.
Default Value
- ””
Example
$("#container").ejChart({
indicators :[{ seriesName : "rsi"}]
});
Try it: JS Playground Sample
indicators.shortPeriod number
Specifies the short period in MACD indicator.
Default Value
- 13
Example
$("#container").ejChart({
indicators :[{ shortPeriod : 14"}]
});
Try it: JS Playground Sample
indicators.standardDeviations number
Specifies the standard deviation value for Bollinger band indicator.
Default Value
- 2
Example
$("#container").ejChart({
indicators :[{ standardDeviations : 3}]
});
Try it: JS Playground Sample
indicators.tooltip object
Options to customize the tooltip.
Try it: JS Playground Sample
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
$("#container").ejChart({
indicators :[{ tooltip :{border : { color :"#0000ff"}} }]
});
indicators.tooltip.border.width number
Border width of indicator tooltip.
Default Value
- 1
Example
$("#container").ejChart({
indicators :[{ tooltip :{border : { width :2}} }]
});
indicators.tooltip.duration string
Specifies the animation duration of indicator tooltip.
Default Value
- “500ms”
Example
$("#container").ejChart({
indicators :[{ tooltip :{duration : "300ms"}}]
});
indicators.tooltip.enableAnimation boolean
Enables/disables the tooltip animation.
Default Value
- true
Example
$("#container").ejChart({
indicators :[{ tooltip :{enableAnimation : false}}]
});
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
$("#container").ejChart({
indicators :[{ tooltip :{format : "#point.x#"}}]
});
indicators.tooltip.fill string
Background color of indicator tooltip.
Default Value
- null
Example
$("#container").ejChart({
indicators :[{ tooltip :{fill : "#FFF000"}}]
});
indicators.tooltip.opacity number
Opacity of indicator tooltip.
Default Value
- 0.95
Example
$("#container").ejChart({
indicators :[{ tooltip :{opacity : 0.5}}]
});
indicators.tooltip.visible boolean
Controls the visibility of indicator tooltip.
Default Value
- false
Example
$("#container").ejChart({
indicators :[{ tooltip :{visible : true}}]
});
indicators.trigger number
Trigger value of MACD indicator.
Default Value
- 9
Example
$("#container").ejChart({
indicators :[{ trigger : 14}]
});
Try it: JS Playground Sample
indicators.visibility string
Specifies the visibility of indicator.
Default Value
- “visible”
Example
$("#container").ejChart({
indicators :[{ visibility : "visible"}]
});
Try it: JS Playground Sample
indicators.type string
Specifies the type of indicator that has to be rendered.
Default Value
- “sma”. See IndicatorsType
Example
$("#container").ejChart({
indicators :[{ type : "momentum"}]
});
Try it: JS Playground Sample
indicators.upperLine object
Options to customize the upper line in indicators
Try it: JS Playground Sample
indicators.upperLine.fill string
Fill color of the upper line in indicators
Default Value
- “#ff9933”
Example
$("#container").ejChart({
indicators :[{ upperLine : {fill: "#ff0000"}}]
});
indicators.upperLine.width number
Width of the upper line in indicators.
Default Value
- 2
Example
$("#container").ejChart({
indicators :[{ upperLine : {width: 3}}]
});
indicators.width number
Width of the indicator line.
Default Value
- 2
Example
$("#container").ejChart({
indicators :[{ width : 3}]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
indicators :[{ xAxisName : "xAxis"}]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
indicators :[{ yAxisName : "yAxis"}]
});
isResponsive boolean
Controls whether Chart has to be responsive while resizing.
Default Value
- false
Example
$("#container").ejChart({
isResponsive : true
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend :{alignment : "far"}
});
Try it: JS Playground Sample
legend.background string
Background for the legend. Use this property to add a background image or background color for the legend.
Default Value
- ””
Example
$("#container").ejChart({
legend :{ background : "green url('flower.png')"}
});
Try it: JS Playground Sample
legend.border object
Options for customizing the legend border.
Try it: JS Playground Sample
legend.border.color string
Border color of the legend.
Default Value
- “transparent”
Example
$("#container").ejChart({
legend : {border :{ color :"green"}}
});
legend.border.width number
Border width of the legend.
Default Value
- 1
Example
$("#container").ejChart({
legend :{ border :{width :2}}
});
legend.columnCount number
Number of columns to arrange the legend items.
Default Value
- null
Example
$("#container").ejChart({
legend :{ columnCount : 2}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend :{ enableScrollbar : false}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend :{ fill : "green"}
});
Try it: JS Playground Sample
legend.font object
Options to customize the font used for legend item text.
Try it: JS Playground Sample
legend.font.fontFamily string
Font family for legend item text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
legend :{ font :{fontFamily : "Algerian"}}
});
legend.font.fontStyle enum
Font style for legend item text.
Default Value
- “Normal”. See FontStyle
Example
$("#container").ejChart({
legend :{ font :{fontStyle : "italic"}}
});
legend.font.fontWeight enum
Font weight for legend item text.
Default Value
- “Regular”. See FontWeight
Example
$("#container").ejChart({
legend :{ font :{fontWeight : "lighter"}}
});
legend.font.size string
Font size for legend item text.
Default Value
- “12px”
Example
$("#container").ejChart({
legend :{ font :{size : "14px"}}
});
legend.itemPadding number
Gap or padding between the legend items.
Default Value
- 10
Example
$("#container").ejChart({
legend :{itemPadding : 5}
});
Try it: JS Playground Sample
legend.itemStyle object
Options to customize the style of legend items.
legend.itemStyle.border object
Options for customizing the border of legend items.
Try it: JS Playground Sample
legend.itemStyle.border.color string
Border color of the legend items.
Default Value
- “transparent”
Example
$("#container").ejChart({
legend :{ itemStyle :{border : { color : "green' }}}
});
legend.itemStyle.border.width number
Border width of the legend items.
Default Value
- 1
Example
$("#container").ejChart({
legend :{ itemStyle :{border :{ width : 2 }}}
});
legend.itemStyle.height number
Height of the shape in legend items.
Default Value
- 10
Example
$("#container").ejChart({
legend :{ itemStyle :{height : 20}}
});
legend.itemStyle.width number
Width of the shape in legend items.
Default Value
- 10
Example
$("#container").ejChart({
legend :{ itemStyle :{width : 15}}
});
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
Try it: JS Playground Sample
legend.location.x number
X value or horizontal offset to position the legend in chart.
Default Value
- 0
Example
$("#container").ejChart({
legend :{location :{x :20}}
});
legend.location.y number
Y value or vertical offset to position the legend.
Default Value
- 0
Example
$("#container").ejChart({
legend :{location : {y : 100}}
});
legend.opacity number
Opacity of the legend.
Default Value
- 1
Example
$("#container").ejChart({
legend :{ opacity : 0.5}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend :{ position : "top"}
});
Try it: JS Playground Sample
legend.rowCount number
Number of rows to arrange the legend items.
Default Value
- null
Example
$("#container").ejChart({
legend :{ rowCount :2}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend :{ shape : "circle" }
});
Try it: JS Playground Sample
legend.size object
Options to customize the size of the legend.
Try it: JS Playground Sample
legend.size.height string
Height of the legend. Height can be specified in either pixel or percentage.
Default Value
- null
Example
$("#container").ejChart({
legend :{ size :{height : "20%"}}
});
legend.size.width string
Width of the legend. Width can be specified in either pixel or percentage.
Default Value
- null
Example
$("#container").ejChart({
legend :{ size :{width : "20%"}}
});
legend.title object
Options to customize the legend title.
legend.title.font object
Options to customize the font used for legend title
Try it: JS Playground Sample
legend.title.font.fontFamily string
Font family for the text in legend title.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
legend: { title: { font :{fontFamily: "Algerian" } } }
});
legend.title.font.fontStyle enum
Font style for legend title.
Default Value
- “normal”. See FontStyle
Example
$("#container").ejChart({
legend: { title: { font :{fontStyle: "normal" } } }
});
legend.title.font.fontWeight enum
Font weight for legend title.
Default Value
- “normal”. See FontWeight
Example
$("#container").ejChart({
legend: { title: { font :{fontWeight: "normal" } } }
});
legend.title.font.size string
Font size for legend title.
Default Value
- “12px”
Example
$("#container").ejChart({
legend: { title: { font :{size: "14px" } } }
});
legend.title.text string
Text to be displayed in legend title.
Default Value
- ””
Example
$("#container").ejChart({
legend: { title: { text : "Countries" } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend: { title: { textAlignment : "near" } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
legend :{
textOverflow : "trim"
}
});
Try it: JS Playground Sample
legend.textWidth number
Text width for legend item.
Default Value
- 34
Example
$("#container").ejChart({
legend :{
textWidth : 50
}
});
Try it: JS Playground Sample
legend.visible boolean
Controls the visibility of the legend.
Default Value
- true
Example
$("#container").ejChart({
legend : {visible : false}
});
Try it: JS Playground Sample
legend.toggleSeriesVisibility boolean
Controls the selection through the legend.
Default Value
- true
Example
$("#container").ejChart({
legend : {toggleSeriesVisibility : false}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
locale : "en-US"
});
Try it: JS Playground Sample
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
$("#container").ejChart({
palette: ["#34e2d3", "#36fe3a", "#dede3d"]
});
Try it: JS Playground Sample
margin object
Options to customize the left, right, top and bottom margins of chart area.
Try it: JS Playground Sample
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
$("#container").ejChart({
margin : { left: 15 }
});
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
$("#container").ejChart({
margin : { right: 10 }
});
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
$("#container").ejChart({
margin : { top: 10 }
});
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
$("#container").ejChart({
margin : { bottom: 10 }
});
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
$("#container").ejChart({
perspectiveAngle : 60
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { alternateGridBand: { even :{ fill : "green" } } }
});
primaryXAxis.alternateGridBand.even.opacity number
Opacity of the even grid band.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { alternateGridBand: { even :{ opacity : 0.5 } } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { alternateGridBand: { odd :{ fill : "red" } } }
});
primaryXAxis.alternateGridBand.odd.opacity number
Opacity of odd grid band
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { alternateGridBand: { odd :{ opacity : 0.5 } } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis:
{
//Crosses primary Y axis at 0
crossesAt: 0,
//...
},
});
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
$("#container").ejChart({
primaryXAxis:
{
//Crosses vertical axis at -0.2
crossesAt: -0.2,
//Crosses in secondary Y axis
crossesInAxis: 'secondaryYAxis',
//...
},
});
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
$("#container").ejChart({
primaryXAxis: { isIndexed: true }
});
primaryXAxis.enableAutoIntervalOnZoomingboolean
Specifies the interval of the axis according to the zoomed data of the chart.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { enableAutoIntervalOnZooming: true }
});
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
$("#container").ejChart({
primaryXAxis: { axisLine : { dashArray : "2,3" } }
});
Try it: JS Playground Sample
primaryXAxis.axisLine.offset number
Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { axisLine : { offset : 5 } }
});
Try it: JS Playground Sample
primaryXAxis.axisLine.visible boolean
Show/hides the axis line.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { axisLine : { visible : false } }
});
primaryXAxis.axisLine.color string
Default Value
- ””
Example
$("#container").ejChart({
primaryXAxis: { axisLine : { color : "red" } }
});
primaryXAxis.axisLine.width number
Width of axis line.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { axisLine : { width : 2 } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { columnIndex: 2 }
});
primaryXAxis.columnSpan number
Specifies the number of columns or plot areas an axis has to span horizontally.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { columnSpan: 2 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { crosshairLabel : { visible : true} }
});
primaryXAxis.desiredIntervals number
With this setting, you can request axis to calculate intervals approximately equal to your desired interval.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { desiredIntervals: 5 }
});
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
$("#container").ejChart({
primaryXAxis: { labelPlacement : "onTicks" }
});
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
$("#container").ejChart({
primaryXAxis: { edgeLabelPlacement : "shift" }
});
Try it: JS Playground Sample
primaryXAxis.enableTrim boolean
Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.
Default Value
- false
Example
$("#container").ejChart({
primaryXAxis: { enableTrim : true }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { font : { fontFamily : "Algerian"} }
});
primaryXAxis.font.fontStyle enum
Font style of labels.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal. See FontStyle
Example
$("#container").ejChart({
primaryXAxis: { font : { fontStyle : "Italic"} }
});
primaryXAxis.font.fontWeight enum
Font weight of the label.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
$("#container").ejChart({
primaryXAxis: { font : { fontWeight : "lighter"} }
});
primaryXAxis.font.opacity number
Opacity of the axis labels.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { font : { opacity : 0.5} }
});
primaryXAxis.font.size string
Font size of the axis labels.
Default Value
- “13px”
Example
$("#container").ejChart({
primaryXAxis: { font : { size : "12px"} }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { intervalType: "days" }
});
Try it: JS Playground Sample
primaryXAxis.isInversed boolean
Specifies whether to inverse the axis.
Default Value
- false
Example
$("#container").ejChart({
primaryXAxis: { isInversed : true}
});
Try it: JS Playground Sample
primaryXAxis.labelFormat string
Custom formatting for axis label and supports all standard formatting type of numerical and date time values.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { labelFormat: "{value}%" }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { labelIntersectAction : "multipleRows" }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { labelPosition : "inside" }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { alignment : "far" }
});
Try it: JS Playground Sample
primaryXAxis.labelRotation number
Angle in degrees to rotate the axis labels.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { labelRotation: 90 }
});
Try it: JS Playground Sample
primaryXAxis.logBase number
Logarithmic base value. This is applicable only for logarithmic axis.
Default Value
- 10
Example
$("#container").ejChart({
primaryXAxis: { logBase: 5 }
});
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
$("#container").ejChart({
primaryXAxis: { majorGridLines: { dashArray : "2,3"} }
});
primaryXAxis.majorGridLines.color string
Color of the major grid line.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { majorGridLines: { color : "red"} }
});
primaryXAxis.majorGridLines.opacity number
Opacity of major grid lines.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { majorGridLines: { opacity: 0.5 } }
});
primaryXAxis.majorGridLines.visible boolean
Show/hides the major grid lines.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { majorGridLines: { visible: false } }
});
primaryXAxis.majorGridLines.width number
Width of the major grid lines.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { majorGridLines: { width : 0.5} }
});
Try it: JS Playground Sample
primaryXAxis.majorTickLines object
Options for customizing the major tick lines.
primaryXAxis.majorTickLines.size number
Length of the major tick lines.
Default Value
- 5
Example
$("#container").ejChart({
primaryXAxis: { majorTickLines: { size: 2 } }
});
primaryXAxis.majorTickLines.visible boolean
Show/hides the major tick lines.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { majorTickLines: { visible: false } }
});
primaryXAxis.majorTickLines.width number
Width of the major tick lines.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { majorTickLines: { width: 2 } }
});
Try it: JS Playground Sample
primaryXAxis.maximumLabels number
Maximum number of labels to be displayed in every 100 pixels.
Default Value
- 3
Example
$("#container").ejChart({
primaryXAxis: { maximumLabels : 5 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { maximumLabelWidth :34.5 }
});
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
$("#container").ejChart({
primaryXAxis: { minorGridLines: { dashArray: "2,3" } }
});
primaryXAxis.minorGridLines.visible boolean
Show/hides the minor grid lines.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { minorGridLines: { visible: true } }
});
primaryXAxis.minorGridLines.width number
Width of the minorGridLines.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { minorGridLines: { width: 2 } }
});
Try it: JS Playground Sample
primaryXAxis.minorTickLines object
Options for customizing the minor tick lines.
primaryXAxis.minorTickLines.size number
Length of the minor tick lines.
Default Value
- 5
Example
$("#container").ejChart({
primaryXAxis: { minorTickLines: { size: 2 } }
});
primaryXAxis.minorTickLines.visible boolean
Show/hides the minor tick lines.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { minorTickLines: { visible: true } }
});
Width of the minor tick line.
primaryXAxis.minorTickLines.width number
Width of the minor tick line.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { minorTickLines: { width: 2 } }
});
primaryXAxis.minorTicksPerInterval number
Specifies the number of minor ticks per interval.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { minorTicksPerInterval: 5 }
});
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
$("#container").ejChart({
primaryXAxis: { name: "xAxis" }
});
primaryXAxis.opposedPosition boolean
Specifies whether to render the axis at the opposite side of its default position.
Default Value
- false
Example
$("#container").ejChart({
primaryXAxis: { opposedPosition : true }
});
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
$("#container").ejChart({
primaryXAxis: { orientation : 'Vertical' }
});
primaryXAxis.plotOffset number
Specifies the padding for the plot area.
Default Value
- 10
Example
$("#container").ejChart({
primaryXAxis: { plotOffset: 0 }
});
Try it: JS Playground Sample
primaryXAxis.range object
Options to customize the range of the axis.
Try it: JS Playground Sample
primaryXAxis.range.min number
Minimum value of the axis range.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { range : { min: 10 } }
});
primaryXAxis.range.max number
Maximum value of the axis range.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { range : { max: 100 } }
});
primaryXAxis.range.interval number
Interval of the axis range.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { range : { interval: 10 } }
});
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
$("#container").ejChart({
primaryXAxis: { rangePadding : "normal" }
});
primaryXAxis.roundingPlaces number
Rounds the number to the given number of decimals.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { roundingPlaces: 3 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ visible: true }]}
});
primaryXAxis.multiLevelLabels.text string
Text of the multi level labels.
Default Value
- ””
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ text: "2016" }]}
});
primaryXAxis.multiLevelLabels.start object
Starting value of the multi level labels.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ start: 1 }]}
});
primaryXAxis.multiLevelLabels.end object
Ending value of the multi level labels.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ end: 4 }]}
});
primaryXAxis.multiLevelLabels.level number
Specifies the level of multi level labels.
Default Value
- 0
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ level: 2 }]}
});
primaryXAxis.multiLevelLabels.maximumTextWidth number
Specifies the maximum width of the text in multi level labels.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ maximumTextWidth: 30 }]}
});
primaryXAxis.multiLevelLabels.textAlignment enum
Specifies the alignment of the text in multi level labels.
Default Value
- “center”. See TextAlignment
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ textAlignment: "near" }]}
});
primaryXAxis.multiLevelLabels.textOverflow enum
Specifies the handling of text over flow in multi level labels.
Default Value
- “center”. See TextOverflow
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ textOverflow: "trim" }]}
});
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
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ font : { color: "green"} }]}
});
primaryXAxis.multiLevelLabels.font.fontFamily string
Font family of the multi level labels text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ font : { fontFamily : "Algerian"} }]}
});
primaryXAxis.multiLevelLabels.font.fontStyle enum
Font style of the multi level labels text.
Default Value
- “Normal”
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ font : { fontStyle: "Bold"} }]}
});
primaryXAxis.multiLevelLabels.font.fontWeight string
Font weight of the multi level label text.
Default Value
- “regular”
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ font : { fontWeight: "lighter"} }]}
});
primaryXAxis.multiLevelLabels.font.opacity number
Opacity of the multi level label text.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ font : { opacity: 0.5} }]}
});
primaryXAxis.multiLevelLabels.font.size string
Font size of the multi level label text.
Default Value
- “12px”
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{ font : { size: "15px"} }]}
});
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
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{border :{ color : "green" } }]}
});
primaryXAxis.multiLevelLabels.border.width number
Border width of the multi level labels.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{border :{ width : 2 } }]}
});
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
$("#container").ejChart({
primaryXAxis: { multiLevelLabels:[{border :{ type : "brace" } }]}
});
primaryXAxis.showNextToAxisLine boolean
Specifies whether the axis elements need to be placed nearby the axis line, while crossing.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { showNextToAxisLine : false }
});
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
$("#container").ejChart({
primaryXAxis: { stripLine:[{ borderColor: "green" }]}
});
primaryXAxis.stripLine.color string
Background color of the strip line.
Default Value
- “gray”
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ color: "green" }]}
});
primaryXAxis.stripLine.end number
End value of the strip line.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ end: 5 }]}
});
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
$("#container").ejChart({
primaryXAxis: { stripLine:[{ font : { color: "green"} }]}
});
primaryXAxis.stripLine.font.fontFamily string
Font family of the strip line text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ font : { fontFamily : "Algerian"} }]}
});
primaryXAxis.stripLine.font.fontStyle enum
Font style of the strip line text.
Default Value
- “Normal”
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ font : { fontStyle: "Bold"} }]}
});
primaryXAxis.stripLine.font.fontWeight string
Font weight of the strip line text.
Default Value
- “regular”
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ font : { fontWeight: "lighter"} }]}
});
primaryXAxis.stripLine.font.opacity number
Opacity of the strip line text.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ font : { opacity: 0.5} }]}
});
primaryXAxis.stripLine.font.size string
Font size of the strip line text.
Default Value
- “12px”
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ font : { size: "15px"} }]}
});
primaryXAxis.stripLine.start number
Start value of the strip line.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ start: 2 }]}
});
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
$("#container").ejChart({
primaryXAxis: { stripLine:[{ startFromAxis : true }]}
});
primaryXAxis.stripLine.text string
Specifies text to be displayed inside the strip line.
Default Value
- “stripLine”
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ text : "Empty Point" }]}
});
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
$("#container").ejChart({
primaryXAxis: { stripLine:[{ textAlignment : "middletop" }]}
});
primaryXAxis.stripLine.visible boolean
Show/hides the strip line.
Default Value
- false
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ visible : true }]}
});
primaryXAxis.stripLine.width number
Width of the strip line.
Default Value
- 0
Example
$("#container").ejChart({
primaryXAxis: { stripLine:[{ width : 0 }]}
});
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
$("#container").ejChart({
primaryXAxis: { stripLine:[{ zIndex: "behind" }]}
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryXAxis: { tickLinesPosition : "inside" }
});
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
$("#container").ejChart({
primaryXAxis: { labelBorder:{color: "green"} }
});
primaryXAxis.labelBorder.width number
Specifies the width of the label border.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { labelBorder:{width: 2} }
});
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
$("#container").ejChart({
primaryXAxis: { title:{enableTrim:true} }
});
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
$("#container").ejChart({
primaryXAxis: { title: { font : { fontFamily : "Algerian"} } }
});
primaryXAxis.title.font.fontStyle enum
Font style of the title text.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal
Example
$("#container").ejChart({
primaryXAxis: { title: { font : { fontStyle : "Italic"} } }
});
primaryXAxis.title.font.fontWeight enum
Font weight of the title text.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
$("#container").ejChart({
primaryXAxis: { title: { font : { fontWeight : "lighter"} } }
});
primaryXAxis.title.font.opacity number
Opacity of the axis title text.
Default Value
- 1
Example
$("#container").ejChart({
primaryXAxis: { title: { font : { opacity : 0.8} } }
});
primaryXAxis.title.font.size string
Font size of the axis title.
Default Value
- “16px”
Example
$("#container").ejChart({
primaryXAxis: { title: { font : { size : "14px"} } }
});
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
$("#container").ejChart({
primaryYAxis: { title:{maximumTitleWidth: null} }
});
primaryXAxis.title.text string
Title for the axis.
Default Value
- ””
Example
$("#container").ejChart({
primaryXAxis: { title: { text: "Year" } }
});
primaryXAxis.title.visible boolean
Controls the visibility of axis title.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { title: { visible: false } }
});
primaryXAxis.title.offset number
offset value for axis title.
Default Value
- 0
Example
$("#container").ejChart({
primaryXAxis: { title: { offset: 0 } }
});
primaryXAxis.title.position enum
Specifies the position of the axis title.
Default Value
- “outside”. See Position
Example
$("#container").ejChart({
primaryXAxis: { title: { position : "inside" }}
});
primaryXAxis.title.alignment enum
Specifies the position of the axis title.
Default Value
- “center”. See Alignment
Example
$("#container").ejChart({
primaryXAxis: { title: { alignment : "near" }}
});
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
$("#container").ejChart({
primaryXAxis: { valueType: "double" }
});
primaryXAxis.visible boolean
Show/hides the axis.
Default Value
- true
Example
$("#container").ejChart({
primaryXAxis: { visible: false }
});
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
$("#container").ejChart({
primaryXAxis: { zoomFactor : 0.5 }
});
primaryXAxis.zoomPosition number
Position of the zoomed axis. Value ranges from 0 to 1.
Default Value
- 0
Example
$("#container").ejChart({
primaryXAxis: { zoomPosition :0.5 }
});
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
$("#container").ejChart({
primaryXAxis: { scrollbarSettings:{visible:true} }
});
primaryXAxis.scrollbarSettings.canResize boolean
Controls whether scrollbar has to be responsive in the chart.
Default Value
- false
Example
$("#container").ejChart({
primaryXAxis: { scrollbarSettings:{canResize:true} }
});
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
$("#container").ejChart({
primaryXAxis: { scrollbarSettings : { range : { min: 10 } } }
});
primaryXAxis.scrollbarSettings.range.max number
Maximum value for the scrollbar range .
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { scrollbarSettings : { range : { max: 100 } } }
});
primaryXAxis.scrollbarSettings.pointsLength number
The maximum number of points to be displayed in the scrollbar.
Default Value
- null
Example
$("#container").ejChart({
primaryXAxis: { scrollbarSettings : { pointsLength : 50 } }
});
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
$("#container").ejChart({
axes: [{ alternateGridBand: { even :{ fill : "green" } } }]
});
axes.alternateGridBand.even.opacity number
Opacity of the even grid band.
Default Value
- 1
Example
$("#container").ejChart({
axes: [ { alternateGridBand: { even :{ opacity : 0.5 } } } ]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
axes: [ { alternateGridBand: { odd :{ fill : "red" } } } ]
});
axes.alternateGridBand.odd.opacity number
Opacity of odd grid band
Default Value
- 1
Example
$("#container").ejChart({
axes: [ { alternateGridBand: { odd :{ opacity : 0.5 } } } ]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
axes:
[{
//Crosses axis at 0
crossesAt: 0,
//...
}],
});
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
$("#container").ejChart({
axes:
[ {
//Crosses axis at -0.2
crossesAt: -0.2,
//Crosses in an axis
crossesInAxis: 'secondaryYAxis',
//...
}],
});
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
$("#container").ejChart({
axes: [ { isIndexed: true }]
});
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
$("#container").ejChart({
axes:[ { axisLine : { dashArray : "2,3" } } ]
});
Try it: JS Playground Sample
axes.axisLine.offset number
Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.
Default Value
- null
Example
$("#container").ejChart({
axes: [ { axisLine : { offset : 5 } } ]
});
Try it: JS Playground Sample
axes.axisLine.visible boolean
Show/hides the axis line.
Default Value
- true
Example
$("#container").ejChart({
axes: [ { axisLine : { visible : false } } ]
});
axes.axisLine.color string
Color of axis line.
Default Value
- ””
Example
$("#container").ejChart({
axes: [ { axisLine : { color : "red" } } ]
});
axes.axisLine.width number
Width of axis line.
Default Value
- 1
Example
$("#container").ejChart({
axes: [ { axisLine : { width : 2 } } ]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
axes: [ { columnIndex: 2 } ]
});
axes.columnSpan number
Specifies the number of columns or plot areas an axis has to span horizontally.
Default Value
- null
Example
$("#container").ejChart({
axes: [ { columnSpan: 2 } ]
});
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
$("#container").ejChart({
axes: [ { crosshairLabel : { visible : true} } ]
});
axes.desiredIntervals number
With this setting, you can request axis to calculate intervals approximately equal to your desired interval.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ desiredIntervals: 5 }]
});
axes.labelPlacement enum
Specifies the placement of labels.
Default Value
- ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement
Example
$("#container").ejChart({
axes:[ { labelPlacement : "onTicks" } ]
});
axes.edgeLabelPlacement enum
Specifies the position of labels at the edge of the axis.
Default Value
- ej.datavisualization.Chart.EdgeLabelPlacement.None. See EdgeLabelPlacement
Example
$("#container").ejChart({
axes: [ { edgeLabelPlacement : "shift" } ]
});
Try it: JS Playground Sample
axes.enableTrim boolean
Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.
Default Value
- false
Example
$("#container").ejChart({
axes:[ { enableTrim : true } ]
});
axes.enableAutoIntervalOnZooming boolean
Specifies the interval of the axis according to the zoomed data of the chart.
Default Value
- true
Example
$("#container").ejChart({
axes:[ { enableAutoIntervalOnZooming : true } ]
});
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
$("#container").ejChart({
axes: [ { font : { fontFamily : "Algerian"} } ]
});
axes.font.fontStyle enum
Font style of labels.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal. See FontStyle
Example
$("#container").ejChart({
axes:[ { font : { fontStyle : "Italic"} } ]
});
axes.font.fontWeight enum
Font weight of the label.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
$("#container").ejChart({
axes: [{ font : { fontWeight : "lighter"} }]
});
axes.font.opacity number
Opacity of the axis labels.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ font : { opacity : 0.5} }]
});
axes.font.size string
Font size of the axis labels.
Default Value
- “13px”
Example
$("#container").ejChart({
axes:[ { font : { size : "12px"} } ]
});
Try it: JS Playground Sample
axes.intervalType enum
Specifies the type of interval in date time axis.
Default Value
- null. See IntervalType
Example
$("#container").ejChart({
axes: [{ intervalType: "days" }]
});
axes.isInversed boolean
Specifies whether to inverse the axis.
Default Value
- false
Example
$("#container").ejChart({
axes:[{ isInversed : true}]
});
Try it: JS Playground Sample
axes.labelFormat string
Custom formatting for axis label and supports all standard formatting type of numerical and date time values.
Default Value
- null
Example
$("#container").ejChart({
axes:[ { labelFormat: "{value}%" } ]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
axes:[{ labelIntersectAction : "multipleRows" }]
});
axes.labelPosition enum
Specifies the position of the axis labels.
Default Value
- “outside”. See LabelPosition
Example
$("#container").ejChart({
axes:[{ labelPosition : "inside" }]
});
Try it: JS Playground Sample
axes.alignment enum
Specifies the position of the axis labels.
Default Value
- “center”. See Alignment
Example
$("#container").ejChart({
axes:[{ alignment : "far" }]
});
axes.labelRotation number
Angle in degrees to rotate the axis labels.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ labelRotation: 90 }]
});
axes.logBase number
Logarithmic base value. This is applicable only for logarithmic axis.
Default Value
- 10
Example
$("#container").ejChart({
axes: [{ logBase: 5 }]
});
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
$("#container").ejChart({
axes: [{ majorGridLines: { dashArray : "2,3"} }]
});
axes.majorGridLines.color string
Color of the major grid line.
Default Value
- null
Example
$("#container").ejChart({
axes:[{ majorGridLines: { color : "red"} }]
});
axes.majorGridLines.opacity number
Opacity of major grid lines.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ majorGridLines: { opacity: 0.5 } }]
});
axes.majorGridLines.visible boolean
Show/hides the major grid lines.
Default Value
- true
Example
$("#container").ejChart({
axes:[{ majorGridLines: { visible: false } }]
});
axes.majorGridLines.width number
Width of the major grid lines.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ majorGridLines: { width : 0.5} }]
});
Try it: JS Playground Sample
axes.majorTickLines object
Options for customizing the major tick lines.
axes.majorTickLines.size number
Length of the major tick lines.
Default Value
- 5
Example
$("#container").ejChart({
axes: [{ majorTickLines: { size: 2 } }]
});
axes.majorTickLines.visible boolean
Show/hides the major tick lines.
Default Value
- true
Example
$("#container").ejChart({
axes: [{ majorTickLines: { visible: false } }]
});
axes.majorTickLines.width number
Width of the major tick lines.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ majorTickLines: { width: 2 } }]
});
Try it: JS Playground Sample
axes.maximumLabels number
Maximum number of labels to be displayed in every 100 pixels.
Default Value
- 3
Example
$("#container").ejChart({
axes:[{ maximumLabels : 5 }]
});
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
$("#container").ejChart({
axes: [{ maximumLabelWidth :34.5 }]
});
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
$("#container").ejChart({
axes: [{ minorGridLines: { dashArray: "2,3" } }]
});
axes.minorGridLines.visible boolean
Show/hides the minor grid lines.
Default Value
- true
Example
$("#container").ejChart({
axes: [{ minorGridLines: { visible: true } }]
});
axes.minorGridLines.width number
Width of the minorGridLines.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ minorGridLines: { width: 2 } }]
});
Try it: JS Playground Sample
axes.minorTickLines object
Options for customizing the minor tick lines.
axes.minorTickLines.size number
Length of the minor tick lines.
Default Value
- 5
Example
$("#container").ejChart({
axes: [{ minorTickLines: { size: 2 } }]
});
axes.minorTickLines.visible boolean
Show/hides the minor tick lines.
Default Value
- true
Example
$("#container").ejChart({
axes: [{ minorTickLines: { visible: true } }]
});
axes.minorTickLines.width number
Width of the minor tick line.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ minorTickLines: { width: 2 } }]
});
axes.minorTicksPerInterval number
Specifies the number of minor ticks per interval.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ minorTicksPerInterval: 5 }]
});
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
$("#container").ejChart({
axes: [{ name: "xAxis" }]
});
axes.opposedPosition boolean
Specifies whether to render the axis at the opposite side of its default position.
Default Value
- false
Example
$("#container").ejChart({
axes: [{ opposedPosition : true }]
});
axes.orientation enum
Specifies the orientation of the axis line in the chart.
Default Value
- ‘horizontal’
Example
$("#container").ejChart({
axes: [{ orientation : 'vertical' }]
});
axes.plotOffset number
Specifies the padding for the plot area.
Default Value
- 10
Example
$("#container").ejChart({
axes: [{ plotOffset: 0 }]
});
Try it: JS Playground Sample
axes.range object
Options to customize the range of the axis.
Try it: JS Playground Sample
axes.range.min number
Minimum value of the axis range.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ range : { min: 10 } }]
});
axes.range.max number
Maximum value of the axis range.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ range : { max: 100 } }]
});
axes.range.interval number
Interval of the axis range.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ range : { interval: 10 } }]
});
axes.rangePadding enum
Specifies the padding for the axis range.
Default Value
- “None”. See RangePadding
Example
$("#container").ejChart({
axes: [{ rangePadding : "normal" }]
});
axes.roundingPlaces number
Rounds the number to the given number of decimals.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ roundingPlaces: 3 }]
});
Try it: JS Playground Sample
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
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ visible: true }]}]
});
axes.multiLevelLabels.text string
Text of the multi level labels.
Default Value
- ””
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ text: "2016" }]}]
});
axes.multiLevelLabels.start object
Starting value of the multi level labels.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ start: 1 }]}]
});
axes.multiLevelLabels.end object
Ending value of the multi level labels.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ end: 4 }]}]
});
axes.multiLevelLabels.level number
Specifies the level of multi level labels.
Default Value
- 0
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ level: 2 }]}]
});
axes.multiLevelLabels.maximumTextWidth number
Specifies the maximum width of the text in multi level labels.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ maximumTextWidth: 30 }]}]
});
axes.multiLevelLabels.textAlignment enum
Specifies the alignment of the text in multi level labels.
Default Value
- “center”. See TextAlignment
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ textAlignment: "near" }]}]
});
axes.multiLevelLabels.textOverflow enum
Specifies the handling of text over flow in multi level labels.
Default Value
- “center”. See TextOverflow
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ textOverflow: "trim" }]}]
});
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
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ font : { color: "green"} }]}]
});
axes.multiLevelLabels.font.fontFamily string
Font family of the multi level labels text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ font : { fontFamily : "Algerian"} }]}]
});
axes.multiLevelLabels.font.fontStyle enum
Font style of the multi level labels text.
Default Value
- “Normal”
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ font : { fontStyle: "Bold"} }]}]
});
axes.multiLevelLabels.font.fontWeight string
Font weight of the multi level label text.
Default Value
- “regular”
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ font : { fontWeight: "lighter"} }]}]
});
axes.multiLevelLabels.font.opacity number
Opacity of the multi level label text.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ font : { opacity: 0.5} }]}]
});
axes.multiLevelLabels.font.size string
Font size of the multi level label text.
Default Value
- “12px”
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{ font : { size: "15px"} }]}]
});
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
$("#container").ejChart({
axes: [{ multiLevelLabels:[{border :{ color : "green" } }]}]
});
axes.multiLevelLabels.border.width number
Border width of the multi level labels.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{border :{ width : 2 } }]}]
});
axes.multiLevelLabels.border.type enum
Border type of the multi level labels.
Default Value
- “rectangle”. See Type
Example
$("#container").ejChart({
axes: [{ multiLevelLabels:[{border :{ type : "brace" } }]}]
});
axes.showNextToAxisLine boolean
Specifies whether the axis elements need to be placed nearby the axis line, while crossing.
Default Value
- true
Example
$("#container").ejChart({
axes: [{ showNextToAxisLine : false }]
});
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
$("#container").ejChart({
axes: [{ stripLine:[{ borderColor: "green" }]}]
});
axes.stripLine.color string
Background color of the strip line.
Default Value
- “gray”
Example
$("#container").ejChart({
axes: [{ stripLine:[{ color: "green" }]}]
});
axes.stripLine.end number
End value of the strip line.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ stripLine:[{ end: 5 }]}]
});
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
$("#container").ejChart({
axes: [{ stripLine:[{ font : { color: "green"} }]}]
});
axes.stripLine.font.fontFamily string
Font family of the strip line text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
axes: [{ stripLine:[{ font : { fontFamily : "Algerian"} }]}]
});
axes.stripLine.font.fontStyle enum
Font style of the strip line text.
Default Value
- “Normal”
Example
$("#container").ejChart({
axes: [{ stripLine:[{ font : { fontStyle: "Bold"} }]}]
});
axes.stripLine.font.fontWeight string
Font weight of the strip line text.
Default Value
- “regular”
Example
$("#container").ejChart({
axes: [{ stripLine:[{ font : { fontWeight: "lighter"} }]}]
});
axes.stripLine.font.opacity number
Opacity of the strip line text.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ stripLine:[{ font : { opacity: 0.5} }]}]
});
axes.stripLine.font.size string
Font size of the strip line text.
Default Value
- “12px”
Example
$("#container").ejChart({
axes: [{ stripLine:[{ font : { size: "15px"} }]}]
});
axes.stripLine.start number
Start value of the strip line.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ stripLine:[{ start: 2 }]}]
});
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
$("#container").ejChart({
axes: [{ stripLine:[{ startFromAxis : true }]}]
});
axes.stripLine.text string
Specifies text to be displayed inside the strip line.
Default Value
- “stripLine”
Example
$("#container").ejChart({
axes: [{ stripLine:[{ text : "Empty Point" }]}]
});
axes.stripLine.textAlignment enum
Specifies the alignment of the text inside the strip line.
Default Value
- “middlecenter”. See TextAlignment
Example
$("#container").ejChart({
axes: [{ stripLine:[{ textAlignment : "middletop" }]}]
});
axes.stripLine.visible boolean
Show/hides the strip line.
Default Value
- false
Example
$("#container").ejChart({
axes: [{ stripLine:[{ visible : true }]}]
});
axes.stripLine.width number
Width of the strip line.
Default Value
- 0
Example
$("#container").ejChart({
axes: [{ stripLine:[{ width : 0 }]}]
});
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
$("#container").ejChart({
axes: [{ stripLine:[{ zIndex: "behind" }]}]
});
Try it: JS Playground Sample
axes.tickLinesPosition enum
Specifies the position of the axis tick lines.
Default Value
- “outside”. See TickLinesPosition
Example
$("#container").ejChart({
axes: [{ tickLinesPosition : "inside" }]
});
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
$("#container").ejChart({
axes: [{ labelBorder:{color: "green"} }]
});
axes.labelBorder.width number
Specifies the width of the label border.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ labelBorder:{width: 2} }]
});
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
$("#container").ejChart({
axes:[{ title:{enableTrim:true} }]
});
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
$("#container").ejChart({
axes:[ { title: { font : { fontFamily : "Algerain"} } } ]
});
axes.title.font.fontStyle enum
Font style of the title text.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal
Example
$("#container").ejChart({
axes: [{ title: { font : { fontStyle : "Italic"} } }]
});
axes.title.font.fontWeight enum
Font weight of the title text.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
$("#container").ejChart({
axes: [{ title: { font : { fontWeight : "lighter"} } }]
});
axes.title.font.opacity number
Opacity of the axis title text.
Default Value
- 1
Example
$("#container").ejChart({
axes: [{ title: { font : { opacity : 0.8} } }]
});
axes.title.font.size string
Font size of the axis title.
Default Value
- “16px”
Example
$("#container").ejChart({
axes: [{ title: { font : { size : "14px"} } }]
});
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
$("#container").ejChart({
axes: [{ title:{maximumTitleWidth: null} }]
});
axes.title.text string
Title for the axis.
Default Value
- ””
Example
$("#container").ejChart({
axes: [{ title: { text: "Year" } }]
});
axes.title.visible boolean
Controls the visibility of axis title.
Default Value
- true
Example
$("#container").ejChart({
axes:[{ title: { visible: false } }]
});
axes.title.offset number
offset value for axis title.
Default Value
- 0
Example
$("#container").ejChart({
axes: [{ title: { offset: 0 } }]
});
axes.title.position enum
Specifies the position of the axis title.
Default Value
- “outside”. See Position
Example
$("#container").ejChart({
axes: [{ title: { position : "inside" }}]
});
axes.title.alignment enum
Specifies the position of the axis title.
Default Value
- “center”. See Alignment
Example
$("#container").ejChart({
axes: [{ title: { alignment : "near" }}]
});
axes.valueType enum
Specifies the type of data the axis is handling.
Default Value
- null. See ValueType
Example
$("#container").ejChart({
axes: [{ valueType: "double" }]
});
axes.visible boolean
Show/hides the axis.
Default Value
- true
Example
$("#container").ejChart({
axes: [{ visible: false }]
});
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
$("#container").ejChart({
axes: [{ zoomFactor : 0.5 }]
});
axes.zoomPosition number
Position of the zoomed axis. Value ranges from 0 to 1.
Default Value
- 0
Example
$("#container").ejChart({
axes: [{ zoomPosition :0.5 }]
});
axes.scrollbarSettings object
Options for customizing the axis scrollbar.
axes.scrollbarSettings.visible boolean
Specifies to enable or disable the scrollbar.
Default Value
- false
Example
$("#container").ejChart({
axes: [{ scrollbarSettings:{visible:true} }]
});
axes.scrollbarSettings.canResize boolean
Controls whether scrollbar has to be responsive in the chart.
Default Value
- false
Example
$("#container").ejChart({
axes:[{ scrollbarSettings:{canResize:true} }]
});
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
$("#container").ejChart({
axes:[ { scrollbarSettings : { range : { min: 10 } } }]
});
axes.scrollbarSettings.range.max number
Maximum value for the scrollbar range .
Default Value
- null
Example
$("#container").ejChart({
axes:[{ scrollbarSettings : { range : { max: 100 } } } ]
});
axes.scrollbarSettings.pointsLength number
The maximum number of points to be displayed in the scrollbar.
Default Value
- null
Example
$("#container").ejChart({
axes: [{ scrollbarSettings : { pointsLength : 50 } } ]
});
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
$("#container").ejChart({
primaryYAxis: { alternateGridBand: { even : {fill : "red" } } }
});
primaryYAxis.alternateGridBand.even.opacity number
Opacity of the even grid band.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { alternateGridBand: { even : {opacity : 0.5 } } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { alternateGridBand: { odd : { fill :"red" } } }
});
primaryYAxis.alternateGridBand.odd.opacity number
Opacity of odd grid band.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { alternateGridBand: { odd : { opacity :0.5 } } }
});
Try it: JS Playground Sample
primaryYAxis.enableAutoIntervalOnZoomingboolean
Specifies the interval of the axis according to the zoomed data of the chart.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { enableAutoIntervalOnZooming: true }
});
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
$("#container").ejChart({
primaryYAxis: { axisLine :{ dashArray : "2,3" } }
});
primaryYAxis.axisLine.offset number
Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { axisLine: { offset : 5 } }
});
Try it: JS Playground Sample
primaryYAxis.axisLine.visible boolean
Show/hides the axis line.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { axisLine: { visible : false } }
});
primaryYAxis.axisLine.color string
Color of axis line.
Default Value
- ””
Example
$("#container").ejChart({
primaryYAxis: { axisLine: { color : "" } }
});
primaryYAxis.axisLine.width number
Width of axis line.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { axisLine: { width : 2 } }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis:
{
//Crosses primary Y axis at 0
crossesAt: 0,
//...
},
});
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
$("#container").ejChart({
primaryYAxis:
{
//Crosses vertical axis at -0.2
crossesAt: -0.2,
//Crosses in secondary Y axis
crossesInAxis: 'secondaryYAxis',
//...
},
});
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
$("#container").ejChart({
primaryYAxis: { crosshairLabel: { visible : true } }
});
primaryYAxis.desiredIntervals number
With this setting, you can request axis to calculate intervals approximately equal to your desired interval.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { desiredIntervals: 5 }
});
primaryYAxis.labelPlacement enum
Specifies the placement of labels.
Default Value
- ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement
Example
$("#container").ejChart({
primaryYAxis: { labelPlacement : "onTicks" }
});
primaryYAxis.edgeLabelPlacement enum
Specifies the position of labels at the edge of the axis.
Default Value
- ej.datavisualization.Chart.EdgeLabelPlacement.None. See EdgeLabelPlacement
Example
$("#container").ejChart({
primaryYAxis: { edgeLabelPlacement: "shift" }
});
primaryYAxis.enableTrim boolean
Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { enableTrim : true }
});
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
$("#container").ejChart({
primaryYAxis: { font: { fontFamily : "Algerian" } }
});
primaryYAxis.font.fontStyle enum
Font style of labels.
Default Value
ej.datavisualization.Chart.FontStyle.Normal. See FontStyle
Example
$("#container").ejChart({
primaryYAxis: { font: { fontStyle : "italic" } }
});
primaryYAxis.font.fontWeight enum
Font weight of the label.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
$("#container").ejChart({
primaryYAxis: { font: { fontWeight : "normal" } }
});
primaryYAxis.font.opacity number
Opacity of the axis labels.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { font: { opacity : 0.5 } }
});
primaryYAxis.font.size string
Font size of the axis labels.
Default Value
- “13px”
Example
$("#container").ejChart({
primaryYAxis: { font: { size : "12px" } }
});
Try it: JS Playground Sample)
primaryYAxis.intervalType enum
Specifies the type of interval in date time axis.
Default Value
- null. See IntervalType
Example
$("#container").ejChart({
primaryYAxis: { intervalType: "days" }
});
Try it: JS Playground Sample
primaryYAxis.isInversed boolean
Specifies whether to inverse the axis.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { isInversed : true}
});
Try it: JS Playground Sample
primaryYAxis.labelFormat string
Custom formatting for axis label and supports all standard formatting type of numerical and date time values.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { labelFormat: "{value}F" }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { labelIntersectAction: "multipleRows" }
});
Try it: JS Playground Sample
primaryYAxis.labelPosition enum
Specifies the position of the axis labels.
Default Value
- “outside”. See LabelPosition
Example
$("#container").ejChart({
primaryYAxis: { labelPosition : "inside" }
});
primaryYAxis.alignment enum
Specifies the position of the axis labels.
Default Value
- “center”. See Alignment
Example
$("#container").ejChart({
primaryYAxis: { alignment : "near" }
});
primaryYAxis.logBase number
Logarithmic base value. This is applicable only for logarithmic axis.
Default Value
- 10
Example
$("#container").ejChart({
primaryYAxis: { logBase: 5 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { majorGridLines : {dashArray : "2,3"} }
});
primaryYAxis.majorGridLines.color string
Color of the major grid lines.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { majorGridLines : {color : "red"} }
});
primaryYAxis.majorGridLines.opacity number
Opacity of major grid lines.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { majorGridLines : {opacity : 0.5} }
});
primaryYAxis.majorGridLines.visible boolean
Show/hides the major grid lines.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { majorGridLines : {visible : false} }
});
primaryYAxis.majorGridLines.width number
Width of the major grid lines.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { majorGridLines : {width : 2} }
});
Try it: JS Playground Sample
primaryYAxis.majorTickLines object
Options for customizing the major tick lines.
primaryYAxis.majorTickLines.size number
Length of the major tick lines.
Default Value
- 5
Example
$("#container").ejChart({
primaryYAxis: { majorTickLines : {size : 2} }
});
primaryYAxis.majorTickLines.visible boolean
Show/hides the major tick lines.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { majorTickLines : {visible : false} }
});
primaryYAxis.majorTickLines.width number
Width of the major tick lines.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { majorTickLines : {width : 2} }
});
</script>
Try it: JS Playground Sample
primaryYAxis.maximumLabels number
Maximum number of labels to be displayed in every 100 pixels.
Default Value
- 3
Example
$("#container").ejChart({
primaryYAxis: { maximumLabels: 5 }
});
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
$("#container").ejChart({
primaryYAxis: { maximumLabelWidth :34.5 }
});
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
$("#container").ejChart({
primaryYAxis: { minorGridLines : {dashArray : "2,3"} }
});
primaryYAxis.minorGridLines.visible boolean
Show/hides the minor grid lines.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { minorGridLines : {visible : true} }
});
primaryYAxis.minorGridLines.width number
Width of the minorGridLines.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { minorGridLines : {width : 2} }
});
Try it: JS Playground Sample
primaryYAxis.minorTickLines object
Options for customizing the minor tick lines.
primaryYAxis.minorTickLines.size number
Length of the minor tick lines.
Default Value
- 5
Example
$("#container").ejChart({
primaryYAxis: { minorTickLines : {size : 2} }
});
primaryYAxis.minorTickLines.visible boolean
Show/hides the minor tick lines.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { minorTickLines : {visible : true} }
});
</script>
primaryYAxis.minorTickLines.width number
Width of the minor tick line
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { minorTickLines : {width : 2} }
});
primaryYAxis.minorTicksPerInterval number
Specifies the number of minor ticks per interval.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { minorTicksPerInterval: 3 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { name: "yAxis" }
});
primaryYAxis.opposedPosition boolean
Specifies whether to render the axis at the opposite side of its default position.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { opposedPosition : true }
});
primaryYAxis.orientation enum
Specifies the orientation of the axis line in the chart.
Default Value
- Vertical
Example
$("#container").ejChart({
primaryYAxis: { orientation : 'Horizontal' }
});
primaryYAxis.plotOffset number
Specifies the padding for the plot area.
Default Value
- 10
Example
$("#container").ejChart({
primaryYAxis: { plotOffset: 5 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { range : { min: 10 } }
});
primaryYAxis.range.max number
Maximum value of the axis range.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { range : { max: 100 } }
});
primaryYAxis.range.interval number
Interval for the range.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { range : { interval: 10 } }
});
primaryYAxis.rangePadding enum
Specifies the padding for the axis range.
Default Value
- ej.datavisualization.Chart.RangePadding.None. See RangePadding
Example
$("#container").ejChart({
primaryYAxis: { rangePadding : "none" }
});
primaryYAxis.roundingPlaces number
Rounds the number to the given number of decimals.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { roundingPlaces: 2 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { rowIndex: 1 }
});
</script>
primaryYAxis.rowSpan number
Specifies the number of row or plot areas an axis has to span vertically.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { rowSpan: 2 }
});
Try it: JS Playground Sample
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
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ visible: true }]}
});
primaryYAxis.multiLevelLabels.text string
Text of the multi level labels.
Default Value
- ””
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ text: "2016" }]}
});
primaryYAxis.multiLevelLabels.start number
Starting value of the multi level labels.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ start: 1 }]}
});
primaryYAxis.multiLevelLabels.end number
Ending value of the multi level labels.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ end: 4 }]}
});
primaryYAxis.multiLevelLabels.level number
Specifies the level of multi level labels.
Default Value
- 0
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ level: 2 }]}
});
primaryYAxis.multiLevelLabels.maximumTextWidth number
Specifies the maximum width of the text in multi level labels.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ maximumTextWidth: 30 }]}
});
primaryYAxis.multiLevelLabels.textAlignment enum
Specifies the alignment of the text in multi level labels.
Default Value
- “center”. See TextAlignment
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ textAlignment: "near" }]}
});
primaryYAxis.multiLevelLabels.textOverflow enum
Specifies the handling of text over flow in multi level labels.
Default Value
- “center”. See TextOverflow
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ textOverflow: "trim" }]}
});
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
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ font : { color: "green"} }]}
});
primaryYAxis.multiLevelLabels.font.fontFamily string
Font family of the multi level labels text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ font : { fontFamily : "Algerian"} }]}
});
primaryYAxis.multiLevelLabels.font.fontStyle enum
Font style of the multi level labels text.
Default Value
- “Normal”
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ font : { fontStyle: "Bold"} }]}
});
primaryYAxis.multiLevelLabels.font.fontWeight string
Font weight of the multi level label text.
Default Value
- “regular”
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ font : { fontWeight: "lighter"} }]}
});
primaryYAxis.multiLevelLabels.font.opacity number
Opacity of the multi level label text.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ font : { opacity: 0.5} }]}
});
primaryYAxis.multiLevelLabels.font.size string
Font size of the multi level label text.
Default Value
- “12px”
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{ font : { size: "15px"} }]}
});
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
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{border :{ color : "green" } }]}
});
primaryYAxis.multiLevelLabels.border.width number
Border width of the multi level labels.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{border :{ width : 2 } }]}
});
primaryYAxis.multiLevelLabels.border.type enum
Border type of the multi level labels.
Default Value
- “rectangle”. See Type
Example
$("#container").ejChart({
primaryYAxis: { multiLevelLabels:[{border :{ type : "brace" } }]}
});
primaryYAxis.showNextToAxisLine boolean
Specifies whether the axis elements need to be placed nearby the axis line, while crossing.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { showNextToAxisLine : false }
});
primaryYAxis.scrollbarSettings object
Options for customizing the axis scrollbar.
primaryYAxis.scrollbarSettings.visible boolean
Specifies to enable or disable the scrollbar.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { scrollbarSettings:{visible:true} }
});
primaryYAxis.scrollbarSettings.canResize boolean
Controls whether scrollbar has to be responsive in the chart.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { scrollbarSettings:{canResize:true} }
});
primaryYAxis.scrollbarSettings.range object
Options to customize the range for the scrollbar in the axis.
primaryYAxis.scrollbarSettings.range.min number
Minimum value of the scrollbar range.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { scrollbarSettings : { range : { min: 10 } } }
});
primaryYAxis.scrollbarSettings.range.max number
Maximum value for the scrollbar range .
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { scrollbarSettings : { range : { max: 100 } } }
});
primaryYAxis.scrollbarSettings.pointsLength number
The maximum number of points to be displayed in the scrollbar.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { scrollbarSettings : { pointsLength : 50 } }
});
primaryYAxis.stripLine array
Options for customizing the strip lines.
Default Value
- [ ]
primaryYAxis.stripLine.borderColor string
Border color of the strip line.
Default Value
- “gray”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ borderColor: "green" }]}
});
primaryYAxis.stripLine.color string
Background color of the strip line.
Default Value
- “gray”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ color: "green" }]}
});
primaryYAxis.stripLine.end number
End value of the strip line.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ end: 5 }]}
});
primaryYAxis.stripLine.font object
Options for customizing the font of the text.
primaryYAxis.stripLine.font.color string
Font color of the strip line text.
Default Value
- “black”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ font : { color: "green"} }]}
});
primaryYAxis.stripLine.font.fontFamily string
Font family of the strip line text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ font : { fontFamily : "Algerian"} }]}
});
primaryYAxis.stripLine.font.fontStyle enum
Font style of the strip line text.
Default Value
- “Normal”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ font : { fontStyle: "Bold"} }]}
});
primaryYAxis.stripLine.font.fontWeight string
Font weight of the strip line text.
Default Value
- “regular”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ font : { fontWeight: "lighter"} }]}
});
primaryYAxis.stripLine.font.opacity number
Opacity of the strip line text.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ font : { opacity: 0.5} }]}
});
primaryYAxis.stripLine.font.size string
Font size of the strip line text.
Default Value
- “12px”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ font : { size: "15px"} }]}
});
primaryYAxis.stripLine.start number
Start value of the strip line.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ start: 2 }]}
});
primaryYAxis.stripLine.startFromAxis boolean
Indicates whether to render the strip line from the minimum/start value of the axis. This property won’t work when start property is set.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ startFromAxis : true }]}
});
primaryYAxis.stripLine.text string
Specifies text to be displayed inside the strip line.
Default Value
- “stripLine”
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ text : "Empty Point" }]}
});
primaryYAxis.stripLine.textAlignment enum
Specifies the alignment of the text inside the strip line.
Default Value
- “middlecenter”. See TextAlignment
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ textAlignment : "middletop" }]}
});
primaryYAxis.stripLine.visible boolean
Show/hides the strip line.
Default Value
- false
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ visible : true }]}
});
primaryYAxis.stripLine.width number
Width of the strip line.
Default Value
- 0
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ width : 0 }]}
});
primaryYAxis.stripLine.zIndex enum
Specifies the order in which strip line and the series have to be rendered. When Z-order is “behind”, strip line is rendered below the series and when it is “over”, it is rendered above the series.
Default Value
- “over”. See ZIndex
Example
$("#container").ejChart({
primaryYAxis: { stripLine:[{ zIndex: "behind" }]}
});
Try it: JS Playground Sample
primaryYAxis.tickLinesPosition enum
Specifies the position of the axis tick lines.
Default Value
- “outside”. See TickLinesPosition
Example
$("#container").ejChart({
primaryYAxis: { tickLinesPosition : "inside" }
});
primaryYAxis.labelBorder object
Options for customizing the border of the labels.
primaryYAxis.labelBorder.color string
Specifies the color of the label border.
Default Value
- null
Example
$("#container").ejChart({
primaryYAxis: { labelBorder:{color: "green"} }
});
primaryYAxis.labelBorder.width number
Specifies the width of the label border.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { labelBorder:{width: 2} }
});
primaryYAxis.title object
Options for customizing the axis title.
primaryYAxis.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
- ej.datavisualization.Chart.enableTrim
Example
$("#container").ejChart({
primaryXAxis: { title:{enableTrim:true} }
});
primaryYAxis.title.font object
Options for customizing the title font.
primaryYAxis.title.font.fontFamily string
Font family of the title text.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
primaryYAxis: { title :{ font :{ fontFamily: "Algerian" } } }
});
primaryYAxis.title.font.fontStyle enum
Font style of the title text.
Default Value
- ej.datavisualization.Chart.FontStyle.Normal
Example
$("#container").ejChart({
primaryYAxis: { title :{ font :{ fontStyle : "Italic" } } }
});
primaryYAxis.title.font.fontWeight enum
Font weight of the title text.
Default Value
- ej.datavisualization.Chart.FontWeight.Regular. See FontWeight
Example
$("#container").ejChart({
primaryYAxis: { title :{ font :{ fontWeight: "normal" } } }
});
primaryYAxis.title.font.opacity number
Opacity of the axis title text.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { title :{ font :{ opacity: 0.5 } } }
});
primaryYAxis.title.font.size string
Font size of the axis title.
Default Value
- “16px”
Example
$("#container").ejChart({
primaryYAxis: { title :{ font :{ size: "12px" } } }
});
primaryYAxis.title.maximumTitleWidth number
Maximum width of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.
Default Value
- ej.datavisualization.Chart.maximumTitleWidth.null
Example
$("#container").ejChart({
primaryYAxis: { title:{maximumTitleWidth: null} }
});
primaryYAxis.title.text string
Title for the axis.
Default Value
- ””
Example
$("#container").ejChart({
primaryYAxis: { title :{ text: "yAxis" } }
});
primaryYAxis.title.visible boolean
Controls the visibility of axis title.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { title: { visible: false } }
});
primaryYAxis.title.offset number
offset value for axis title.
Default Value
- 0
Example
$("#container").ejChart({
primaryYAxis: { title: { offset: 0 } }
});
primaryYAxis.title.position enum
Specifies the position of the axis title.
Default Value
- “outside”. See Position
Example
$("#container").ejChart({
primaryYAxis: { title: { position : "inside" }}
});
primaryYAxis.title.alignment enum
Specifies the position of the axis title.
Default Value
- “center”. See Alignment
Example
$("#container").ejChart({
primaryYAxis: { title: { alignment : "near" }}
});
primaryYAxis.valueType enum
Specifies the type of data the axis is handling.
Default Value
- null. See ValueType
Example
$("#container").ejChart({
primaryYAxis: { valueType: "double" }
});
primaryYAxis.visible boolean
Show/hides the axis.
Default Value
- true
Example
$("#container").ejChart({
primaryYAxis: { visible : false }
});
primaryYAxis.zoomFactor number
The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Values ranges from 0 to 1.
Default Value
- 1
Example
$("#container").ejChart({
primaryYAxis: { zoomFactor : 0.5 }
});
primaryYAxis.zoomPosition number
Position of the zoomed axis. Value ranges from 0 to 1
Default Value
- 0
Example
$("#container").ejChart({
primaryYAxis: { zoomPosition : 0.5 }
});
rotation number
Rotation angle of the 3D view. This property is applicable only when 3D view is enabled.
Default Value
- 0
Example
$("#container").ejChart({
rotation : 45
});
Try it: JS Playground Sample
rowDefinitions array
Options to split Chart into multiple plotting areas horizontally. Each object in the collection represents a plotting area in Chart.
Try it: JS Playground Sample
rowDefinitions.unit enum
Specifies the unit to measure the height of the row in plotting area.
Name | Type | Description |
---|---|---|
Pixel | string | Specifies the height of the row in pixels. |
Percentage | string | Specifies the height of the row in percentage |
Default Value
- ‘pixel’. See Unit
Example
$("#container").ejChart({
rowDefinitions :[{ unit : "percentage" }]
});
rowDefinitions.rowHeight number
Height of the row in plotting area. Height is measured in either pixel or percentage based on the value of unit property.
Default Value
- 50
Example
$("#container").ejChart({
rowDefinitions :[{ rowHeight : 50 }]
});
rowDefinitions.lineColor string
Color of the line that indicates the starting point of the row in plotting area.
Default Value
- “transparent”
Example
$("#container").ejChart({
rowDefinitions :[{ lineColor : "green" }]
});
rowDefinitions.lineWidth number
Width of the line that indicates the starting point of the row in plot area.
Default Value
- 1
Example
$("#container").ejChart({
rowDefinitions :[{ lineWidth : 2 }]
});
series array
Specifies the properties used for customizing the series.
series.bearFillColor string
Color of the point, where the close is up in financial chart.
Default Value
- null
Example
$("#container").ejChart({
series : [{bearFillColor: "blue" }]
});
Try it: JS Playground Sample
series.border object
Options for customizing the border of the series.
series.border.color string
Border color of the series.
Default Value
- “transparent”
Example
$("#container").ejChart({
series :[{border :{ color : "green" } }]
});
series.border.width number
Border width of the series.
Default Value
- 1
Example
$("#container").ejChart({
series :[{border :{ width : 2 } }]
});
series.border.dashArray string
DashArray for border of the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{
border: {
dashArray: "5,3"
}
}]
});
Try it : JS Playground Sample
series.animationDuration string
Specifies animation duration for series rendering.
Default Value
- null
Example
$("#container").ejChart({
series : [{
animationDuration : 2000
}]
});
series.bullFillColor string
Color of the point, where the close is down in financial chart.
Default Value
- null
Example
$("#container").ejChart({
series : [{bullFillColor: "green" }]
});
Try it: JS Playground Sample
series.columnFacet enum
To render the column and bar type series in rectangle/cylinder shape. See ColumnFacet
Default Value
- “rectangle”
Example
$('#container').ejChart({
series: {
//change to cylinder chart
columnFacet: "cylinder"
},
//...
});
Try it: JS Playground Sample
series.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
$('#container').ejChart({
series: [{
//Width of columns in column type series
columnWidth: 0.8
//...
}],
//...
});
series.columnSpacing number
Spacing between columns of different series. Value ranges from 0 to 1
Default Value
- 0
Example
$('#container').ejChart({
series: [{
//20% Spacing between columns
columnWidth: 0.2
}],
//...
});
series.stackingGroup string
To group the series of stacking collection.
Default Value
- ””
Example
$("#container").ejChart({
series :[{stackingGroup : " "}]
});
series.dashArray string
Pattern of dashes and gaps used to stroke the line type series.
Default Value
- ””
Example
$("#container").ejChart({
series :[{dashArray : "2,3"}]
});
Try it: JS Playground Sample
series.dataSource object
Specifies the dataSource for the series. It can be an array of JSON objects or an instance of ej.DataManager.
Default Value
- null
Example
$("#container").ejChart({
series : [{dataSource: data }]
});
Try it : JS Playground Sample
series.cardinalSplineTension number
Specifies spline tension values for cardinal spline type.Value ranges from 0 to 1.
Default Value
- 0.5
Example
$("#container").ejChart({
series : [{cadinalSplineTension : 0.5 }]
});
series.doughnutCoefficient number
Controls the size of the hole in doughnut series. Value ranges from 0 to 1.
Default Value
- 0.4
Example
$("#container").ejChart({
series : [{doughnutCoefficient : 0.5 }]
});
Try it : JS Playground Sample
series.doughnutSize number
Controls the size of the doughnut series. Value ranges from 0 to 1.
Default Value
- 0.8
Example
$("#container").ejChart({
series : [{doughnutSize : 0.6 }]
});
Try it : JS Playground Sample
series.drawType enum
Type of series to be drawn in radar or polar series.
Default Value
- “line”. See DrawType
Example
$("#container").ejChart({
series : [{drawType : "column" }]
});
Try it : JS Playground Sample
series.enableAnimation boolean
Enable/disable the animation of series.
Default Value
- false
Example
$("#container").ejChart({
series : [{enableAnimation : true }]
});
Try it : JS Playground Sample
series.enableSmartLabels number
To avoid overlapping of data labels smartly.
Default Value
- null
Example
$("#container").ejChart({
series : [{enableSmartLabels : false }]
});
Try it : JS Playground Sample
series.endAngle number
End angle of pie/doughnut series. For a complete circle, it has to be 360, by default.
Default Value
- null
Example
$("#container").ejChart({
series : [{endAngle: 270 }]
});
Try it : JS Playground Sample
series.explode boolean
Explodes the pie/doughnut slices on mouse move.
Default Value
- false
Example
$("#container").ejChart({
series : [{explode: true }]
});
Try it : JS Playground Sample
series.explodeAll boolean
Explodes all the slice of pie/doughnut on render.
Default Value
- null
Example
$("#container").ejChart({
series : [{explodeAll: true }]
});
Try it : JS Playground Sample
series.explodeIndex number
Index of the point to be exploded from pie/doughnut/pyramid/funnel.
Default Value
- null
Example
Try it : JS Playground Sample
series.explodeOffset number
Specifies the distance of the slice from the center, when it is exploded.
Default Value
- 25
Example
$("#container").ejChart({
series : [{explodeOffset : 20 }]
});
Try it : JS Playground Sample
series.fill string
Fill color of the series.
Default Value
- null
Example
$("#container").ejChart({
series :[{fill : "green"}]
});
Try it : JS Playground Sample
series.font object
Options for customizing the series font.
series.font.color string
Font color of the series text.
Default Value
- “#707070”
Example
$("#container").ejChart({
series :[{font :{color : "green"}}]
});
series.font.fontFamily string
Font Family of the series.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
series :[{ font : { fontFamily : "Algerian"}}]
});
series.font.fontStyle enum
Font Style of the series.
Default Value
- “Normal”
Example
$("#container").ejChart({
series : [{font :{fontStyle : "italic"}} ]
});
series.font.fontWeight enum
Font weight of the series.
Default Value
- “Regular”
Example
$("#container").ejChart({
series :[{font :{fontWeight : "lighter"}}]
});
series.font.opacity number
Opacity of series text.
Default Value
- 1
Example
$("#container").ejChart({
series :[{font :{opacity : 0.5}}]
});
series.font.size string
Size of the series text.
Default Value
- “12px”
Example
$("#container").ejChart({
series :[{font :{size : "14px"}}]
});
Try it : JS Playground Sample
series.funnelHeight string
Specifies the height of the funnel in funnel series. Values can be in both pixel and percentage.
Default Value
- “32.7%”
Example
$("#container").ejChart({
series : [{funnelHeight : '40%' }]
});
Try it : JS Playground Sample
series.funnelWidth string
Specifies the width of the funnel in funnel series. Values can be in both pixel and percentage.
Default Value
- “11.6%”
Example
$("#container").ejChart({
series : [{funnelWidth : '40%' }]
});
Try it : JS Playground Sample
series.gapRatio number
Gap between the slices of pyramid/funnel series.
Default Value
- 0
Example
$("#container").ejChart({
series : [{gapRatio : 0.2 }]
});
Try it : JS Playground Sample
series.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
$("#container").ejChart({
series : [{isClosed : false }]
});
Try it : JS Playground Sample
series.isStacking boolean
Specifies whether to stack the column series in polar/radar charts.
Default Value
- true
Example
$("#container").ejChart({
series : [{isStacking : false }]
});
Try it : JS Playground Sample
series.isTransposed boolean
Renders the chart vertically. This is applicable only for Cartesian type series.
Default Value
- false
Example
$("#container").ejChart({
series : [{isTransposed : false }]
});
Try it : JS Playground Sample
series.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
$("#container").ejChart({
series : [{showMedian : true }]
});
series.labelPosition enum
Position of the data label in pie/doughnut/pyramid/funnel series. OutsideExtended position is not applicable for pyramid/funnel.
Default Value
- “inside”. See LabelPosition
Example
$("#container").ejChart({
series : [{labelPosition : "outside" }]
});
Try it: JS Playground Sample
### series.splitMode enum
Specifies the mode for splitting the data points in pieOfPie series.
Default Value
- “value”. See SplitMode
Example
$("#container").ejChart({
series : [{splitMode : "percentage" }]
});
series.boxPlotMode enum
Quartile calculation has been performed in three different formulas to render the boxplot series .
Default Value
- “exclusive”.See BoxPlotMode
Example
$("#container").ejChart({
series : [{boxPlotMode : "inclusive" }]
});
series.bubbleOptions object
Options for customizing the bubble options of the Bubble series
series.bubbleOptions.radiusMode enum
Used for the calculation of the bubble radius based on the mode selected
Default Value
- “minMax” .See RadiusMode
Example
$("#container").ejChart({
series : [{ bubbleOptions: { radiusMode: "minMax" }}]
});
series.bubbleOptions.minRadius number
Used for the setting the minimum radius of the bubble
Default Value
- 1
Example
$("#container").ejChart({
series : [ { bubbleOptions: { minRadius: 3 }} ]
});
series.bubbleOptions.maxRadius number
Used for setting the maximum radius of the bubble
Default Value
- 3
Example
$("#container").ejChart({
series : [ { bubbleOptions: { maxRadius: 7 }} ]
});
Try it: JS Playground Sample
series.splineType enum
Specifies the different types of spline curve.
Default Value
- “Natural”. See SplineType
Example
$("#container").ejChart({
series :[{splineType : "cardinal"}]
});
series.lineCap enum
Specifies the line cap of the series.
Default Value
- “Butt”. See LineCap
Example
$("#container").ejChart({
series :[{lineCap : "butt"}]
});
series.lineJoin enum
Specifies the type of shape to be used where two lines meet.
Default Value
- “Round”. See LineJoin
Example
$("#container").ejChart({
series :[{lineJoin : "round"}]
});
series.marker object
Options for displaying and customizing marker for individual point in a series. Marker contains shapes and/or data labels.
series.marker.border object
Options for customizing the border of the marker shape.
series.marker.border.color string
Border color of the marker shape.
Default Value
- “white”
Example
$("#container").ejChart({
series :[{marker:{border:{color : "green"}}}]
});
series.marker.border.width number
Border width of the marker shape.
Default Value
- 3
Example
$("#container").ejChart({
series :[{marker :{border :{width : 2}}}]
});
Try it: JS Playground Sample
series.marker.dataLabel object
Options for displaying and customizing data labels.
series.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
$("#container").ejChart({
series :[{marker :{dataLabel :{angle : 90}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.maximumLabelWidth number
Maximum label width of the data label.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{maximumLabelWidth : 80}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.enableWrap boolean
Enable the wrap option to the data label.
Default Value
- false
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{enableWrap : true}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.enableContrastColor boolean
Enables saturation to the data label.
Default Value
- false
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{enableContrastColor : true}}]
});
series.marker.dataLabel.showEdgeLabels boolean
Displays the partially visible data labels inside the chart Area.
Default Value
- false
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{showEdgeLabels : true}}]
});
series.marker.dataLabel.border object
Options for customizing the border of the data label.
series.marker.dataLabel.border.color string
Border color of the data label.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{border : {color : "green"}}}}]
});
series.marker.dataLabel.border.width number
Border width of the data label.
Default Value
- 0.1
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{border :{ width :2 }}}}]
});
series.marker.dataLabel.connectorLine object
Options for displaying and customizing the line that connects point and data label.
series.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.
Default Value
- “line”. See ConnectorLineType
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{connectorLine :{ type : "bezier" }}}}]
});
series.marker.dataLabel.connectorLine.width number
Width of the connector.
Default Value
- 0.5
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{connectorLine :{ width : 2 }}}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.connectorLine.color string
Color of the connector.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{connectorLine :{ color : "red" }}}}]
});
### series.marker.dataLabel.connectorLine.height number
Height of the connector.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{connectorLine :{ height : 10 }}}}]
});
series.marker.dataLabel.fill string
Background color of the data label.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{fill : "green"}}}]
});
series.marker.dataLabel.font object
Options for customizing the data label font.
series.marker.dataLabel.font.fontFamily string
Font family of the data label.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{ font :{fontFamily : "algerian"}}}}]
});
series.marker.dataLabel.font.color string
Font color of the data label text.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{ font :{color : "red"}}}}]
});
series.marker.dataLabel.font.fontStyle enum
Font style of the data label.
Default Value
- “normal”. See FontStyle
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{font :{ fontStyle : "italic" }}}}]
});
series.marker.dataLabel.font.fontWeight enum
Font weight of the data label.
Default Value
- “regular”. See FontWeight
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{font : { fontWeight : "lighter" }}}}]
});
series.marker.dataLabel.font.opacity number
Opacity of the text.
Default Value
- 1
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{font :{ opacity : 0.5 }}}}]
});
series.marker.dataLabel.font.size string
Font size of the data label.
Default Value
- “12px”
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{font : { size : "14px" }}}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.horizontalTextAlignment enum
Horizontal alignment of the data label.
Default Value
- “center”
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{horizontalTextAlignment : "far"}}}]
});
series.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.
series.marker.dataLabel.margin.bottom number
Bottom margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ bottom :10 }}}}]
});
series.marker.dataLabel.margin.left number
Left margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ left : 10}}}}]
});
series.marker.dataLabel.margin.right number
Right margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ right :10 }}}}]
});
series.marker.dataLabel.margin.top number
Top margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ top :10 } }}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.opacity number
Opacity of the data label.
Default Value
- 1
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{opacity : 0.5}}}]
});
series.marker.dataLabel.shape enum
Background shape of the data label.
Default Value
- No shape is rendered by default, so its value is ‘none’. See Shape
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{shape : "circle"}}}]
});
series.marker.dataLabel.textMappingName string
Name of a field in data source where datalabel text is displayed.
Default Value
- ””
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{textMappingName : "TextFieldName"}}}]
});
series.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.
Default Value
- “top”. See TextPosition
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{textPosition : "bottom"}}}]
});
series.marker.dataLabel.verticalTextAlignment enum
Vertical alignment of the data label.
Default Value
- ‘center’
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{verticalTextAlignment : "far"}}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.visible boolean
Controls the visibility of the data labels.
Default Value
- false
Example
$("#container").ejChart({
series :[{marker :{dataLabel :{visible : true}}}]
});
series.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
$("#container").ejChart({
series :[{marker :{dataLabel :{template : "item"}}}]
});
Try it: JS Playground Sample
series.marker.dataLabel.offset object|number
Options for customizing the datalabel positions
series.marker.dataLabel.offset.x number
X value or horizontal offset to position the labels in chart.
Default Value
- 0
Example
$("#container").ejChart({
series :[{ marker :{dataLabel :{offset : { x:10 }}} }]
});
series.marker.dataLabel.offset.y number
Y value or vertical offset to position the labels.
Default Value
- 0
Example
$("#container").ejChart({
series :[{ marker :{dataLabel :{offset : { y:10 }}} }]
});
series.marker.fill string
Color of the marker shape.
Default Value
- null
Example
$("#container").ejChart({
series :[{marker : { fill : "green" } }]
});
series.marker.imageUrl string
The URL for the Image that is to be displayed as marker. In order to display image as marker, set series.marker.shape as ‘image’.
Default Value
- ””
Example
$("#container").ejChart({
series :[{marker :{ imageUrl: "../images/sample.png"}}]
});
series.marker.opacity number
Opacity of the marker.
Default Value
- 1
Example
$("#container").ejChart({
series :[{marker :{ opacity : 0.5 }}]
});
Try it: JS Playground Sample
series.marker.shape enum
Specifies the shape of the marker.
Default Value
- “circle”. See Shape
Example
$("#container").ejChart({
series :[{marker :{ shape: "rectangle"}]
});
Try it: JS Playground Sample
series.marker.size object
Options for customizing the size of the marker shape.
series.marker.size.height number
Height of the marker.
Default Value
- 6
Example
$("#container").ejChart({
series :[{marker :{size :{height : 5}}}]
});
series.marker.size.width number
Width of the marker.
Default Value
- 6
Example
$("#container").ejChart({
series :[{marker :{ size :{ width : 2 } } }]
});
Try it: JS Playground Sample
series.marker.visible boolean
Controls the visibility of the marker shape.
Default Value
- false
Example
$("#container").ejChart({
series :[{marker :{ visible : true}}]
});
series.name string
Name of the series, that is to be displayed in the legend.
Default Value
Add a comment to this line
- ””
Example
$("#container").ejChart({
series : [{name: "India" }]
});
series.opacity number
Opacity of the series.
Default Value
- 1
Example
$("#container").ejChart({
series :[{opacity : 0.5}]
});
series.outlierSettings object
Options for customizing the outlier of individual series.
series.outlierSettings.shape enum
Specifies the shape of the outlier.
Default Value
- “circle”. See Shape
Example
$("#container").ejChart({
series :[{outlierSettings :{ shape: "rectangle"}]
});
series.outlierSettings.size object
Options for customizing the size of the outlier shape.
series.outlierSettings.size.height number
Height of the outlier shape.
Default Value
- 6
Example
$("#container").ejChart({
series :[{outlierSettings :{size :{height : 5}}}]
});
series.outlierSettings.size.width number
Width of the outlier shape.
Default Value
- 6
Example
$("#container").ejChart({
series :[{outlierSettings :{ size :{ width : 2 } } }]
});
series.palette string
Name of a field in data source where fill color for all the data points is generated.
Default Value
- ””
Example
$("#container").ejChart({
series :[{palette : "ColorFieldName"}]
});
series.pieCoefficient number
Controls the size of pie series. Value ranges from 0 to 1.
Default Value
- 0.8
Example
$("#container").ejChart({
series : [{pieCoefficient : 0.6 }]
});
Try it: JS Playground Sample
series.pieOfPieCoefficient number
Controls the size of the second pie in pieOfPie series. Value ranges from 0 to 1.
Default Value
- 0.6
Example
$("#container").ejChart({
series : [{pieOfPieCoefficient : 0.8 }]
});
series.splitValue string
Split Value of pieOfPie series.
Default Value
- null
Example
$("#container").ejChart({
series : [{splitValue: "40" }]
});
series.gapWidth number
Distance between the two pie’s in pieOfPie series.
Default Value
- 50
Example
$("#container").ejChart({
series : [{gapWidth : 300 }]
});
series.emptyPointSettings object
Options for customizing the empty point in the series.
series.emptyPointSettings.visible boolean
Controls the visibility of the empty point.
Default Value
- true
Example
$("#container").ejChart({
series : [{
emptyPointSettings: {
visible : false,
}
}]
});
Try it: JS Playground Sample
series.emptyPointSettings.displayMode enum
Specifies the mode of empty point.
Default Value
- “gap”
Example
$("#container").ejChart({
series : [{
emptyPointSettings: {
displayMode : "gap",
}
}]
});
See Mode.
series.emptyPointSettings.style object
Options for customizing the color and border of the empty point in the series.
series.emptyPointSettings.style.color string
Color of the empty point.
Default Value
- ””
Example
$("#container").ejChart({
series : [{
emptyPointSettings: {
style: { color : "red" }
}
}]
});
series.emptyPointSettings.style.border object
Options for customizing border of the empty point in the series.
series.emptyPointSettings.style.border.color string
Border color of the empty point.
Default Value
- ””
Example
$("#container").ejChart({
series : [{
emptyPointSettings: {
style: { border: { color : "red" } }
}
}]
});
series.emptyPointSettings.style.border.width number
Border width of the empty point.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
emptyPointSettings: {
style: { border: { width : 1.2 } }
}
}]
});
series.positiveFill string
Fill color for the positive column of the waterfall.
Default Value
- null
Example
$("#container").ejChart({
series : [{
positiveFill : “Red”
}]
});
Try it: JS Playground Sample
series.connectorLine object
Options for customizing the waterfall connector line.
Try it: JS Playground Sample
series.connectorLine.width number
Width of the connector line.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
connectorLine: {width : 1 }
}]
});
series.connectorLine.color string
Color of the connector line.
Default Value
- “#565656”
Example
$("#container").ejChart({
series : [{
connectorLine: {color : "grey" }
}]
});
series.connectorLine.dashArray string
DashArray of the connector line.
Default Value
- null
Example
$("#container").ejChart({
series : [{
connectorLine: {dashArray : "2,3" }
}]
});
series.connectorLine.opacity number
Opacity of the connector line.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
connectorLine: {opacity : 0.5 }
}]
});
series.dragSettings object
Options to customize the drag and drop in series.
series.dragSettings.enable boolean
drag/drop the series
Default Value
- “false”
Example
$("#container").ejChart({
series : [{
dragSettings:{enable: true}
}]
});
series.dragSettings.type string
Specifies the type of drag settings.
Default Value
- “xy”
Example
$("#container").ejChart({
series : [{
dragSettings:{type: "x"}
}]
});
series.errorBar object
Options to customize the error bar in series.
series.errorBar.visibility boolean
Show/hides the error bar
Default Value
- “visible”
Example
$("#container").ejChart({
series : [{
errorBar:{visibility: "hidden"}
}]
});
Try it: JS Playground Sample
series.errorBar.type enum
Specifies the type of error bar.
Default Value
- “FixedValue”
Example
$("#container").ejChart({
series : [{
errorBar:{type: "Percentage"}
}]
});
Try it: JS Playground Sample
series.errorBar.mode enum
Specifies the mode of error bar.
Default Value
- “vertical”
Example
$("#container").ejChart({
series : [{
errorBar:{mode: "Horizontal"}
}]
});
Try it: JS Playground Sample
series.errorBar.direction enum
Specifies the direction of error bar.
Default Value
- “both”
Example
$("#container").ejChart({
series : [{
errorBar:{direction: "plus"}
}]
});
Try it: JS Playground Sample
series.errorBar.verticalErrorValue number
Value of vertical error bar.
Default Value
- 3
Example
$("#container").ejChart({
series : [{
errorBar:{verticalErrorValue: 1}
}]
});
Try it: JS Playground Sample
series.errorBar.horizontalErrorValue number
Value of horizontal error bar.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
errorBar:{horizontalErrorValue: 1}
}]
});
Try it: JS Playground Sample
series.errorBar.horizontalPositiveErrorValue number
Value of positive horizontal error bar.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
errorBar:{horizontalPositiveErrorValue: 1}
}]
});
Try it: JS Playground Sample
series.errorBar.horizontalNegativeErrorValue number
Value of negative horizontal error bar.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
errorBar:{horizontalNegativeErrorValue: 1}
}]
});
Try it: JS Playground Sample
series.errorBar.verticalPositiveErrorValue number
Value of positive vertical error bar.
Default Value
- 5
Example
$("#container").ejChart({
series : [{
errorBar:{verticalPositiveErrorValue: 1}
}]
});
Try it: JS Playground Sample
series.errorBar.verticalNegativeErrorValue number
Value of negative vertical error bar.
Default Value
- 5
Example
$("#container").ejChart({
series : [{
errorBar:{verticalNegativeErrorValue: 1}
}]
});
Try it: JS Playground Sample
series.errorBar.fill string
Fill color of the error bar.
Default Value
- “#000000”
Example
$("#container").ejChart({
series : [{
errorBar:{
fill:”red”
}
}]
});
Try it: JS Playground Sample
series.errorBar.width number
Width of the error bar.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
errorBar:{
width: 1
}
}]
});
series.errorBar.cap object
Options for customizing the error bar cap.
Try it: JS Playground Sample
series.errorBar.cap.visible boolean
Show/Hides the error bar cap.
Default Value
- true
Example
$("#container").ejChart({
series : [{
errorBar:{
cap:{visible:false}
}
}]
});
series.errorBar.cap.width number
Width of the error bar cap.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
errorBar:{
cap:{width:1}
}
}]
});
series.errorBar.cap.length number
Length of the error bar cap.
Default Value
- 1
Example
$("#container").ejChart({
series : [{
errorBar:{
cap:{length: 10}
}
}]
});
series.errorBar.cap.fill string
Color of the error bar cap.
Default Value
- “#000000”
Example
$("#container").ejChart({
series : [{
errorBar:{
cap:{fill: "red"}
}
}]
});
series.points array
Option to add data points; each point should have x and y property. Also, optionally, you can customize the points color, border, marker by using fill, border and marker options.
series.points.border object
Options for customizing the border of a point. This is applicable only for column type series and accumulation type series.
series.points.border.color string
Border color of the point.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ border:{color : "green"} }] }]
});
series.points.border.width number
Border width of the point.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ border :{width : 2} }] }]
});
Try it: JS Playground Sample
series.points.visibleOnLegend string
Enables or disables the visibility of legend item.
Default Value
- “visible”
Example
$("#container").ejChart({
series : [{
points: [{x: "Wheat", y: 394, visibleOnLegend: "hidden" },
//...
]
}]
});
series.points.showIntermediateSum boolean
To show/hide the intermediate summary from the last intermediate point.
Default Value
- false
Example
$("#container").ejChart({
series :[{ points:[{ showIntermediateSum : true }] }]
});
Try it: JS Playground Sample
series.points.showTotalSum boolean
To show/hide the total summary of the waterfall series.
Default Value
- false
Example
$("#container").ejChart({
series :[{ points:[{ showTotalSum : true }] }]
});
Try it: JS Playground Sample
series.points.close number
Close value of the point. Close value is applicable only for financial type series.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ close : 50 }] }]
});
series.points.size number
Size of a bubble in the bubble series. This is applicable only for the bubble series.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ size : 5 }] }]
});
series.points.fill string
Background color of the point. This is applicable only for column type series and accumulation type series.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ fill : "green" }] }]
});
series.points.high number
High value of the point. High value is applicable only for financial type series, range area series and range column series.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ high : 120 }] }]
});
series.points.low number
Low value of the point. Low value is applicable only for financial type series, range area series and range column series.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ low : 70 }] }]
});
series.points.marker object
Options for displaying and customizing marker for a data point. Marker contains shapes and/or data labels.
series.points.marker.border object
Options for customizing the border of the marker shape.
series.points.marker.border.color string
Border color of the marker shape.
Default Value
- “white”
Example
$("#container").ejChart({
series :[{ points:[{ marker:{border:{color : "green"}} }] }]
});
series.points.marker.border.width number
Border width of the marker shape.
Default Value
- 3
Example
$("#container").ejChart({
series :[{ points:[{ marker :{border :{width : 2}} }] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel object
Options for displaying and customizing data label.
series.points.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
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{angle : 90} }] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel.border object
Options for customizing the border of the data label.
series.points.marker.dataLabel.border.color string
Border color of the data label.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{border : {color : "green"}}} }] }]
});
series.points.marker.dataLabel.border.width number
Border width of the data label.
Default Value
- 0.1
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{border :{ width :2 }}} }] }]
});
series.points.marker.dataLabel.connectorLine object
Options for displaying and customizing the line that connects point and data label.
series.points.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.
Default Value
- “line”. See ConnectorLineType
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{connectorLine :{ type : "bezier" }}} }] }]
});
series.points.marker.dataLabel.connectorLine.width number
Width of the connector.
Default Value
- 0.5
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{connectorLine :{ width : 2 }}} }] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel.fill string
Background color of the data label.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{fill : "green"}}}]}]
});
series.points.marker.dataLabel.font object
Options for customizing the data label font.
series.points.marker.dataLabel.font.fontFamily string
Font family of the data label.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
series :[{ points:[{marker :{dataLabel :{ font :{fontFamily : "algerian"}}}}]}]
});
series.points.marker.dataLabel.font.fontStyle enum
Font style of the data label.
Default Value
- “normal”. See FontStyle
Example
$("#container").ejChart({
series :[{points:[{marker :{dataLabel :{font :{ fontStyle : "italic" }}}}]}]
});
series.points.marker.dataLabel.font.fontWeight enum
Font weight of the data label.
Default Value
- “regular”. See FontWeight
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{font : { fontWeight : "lighter" }}}}] }]
});
series.points.marker.dataLabel.font.opacity number
Opacity of the text.
Default Value
- 1
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{font :{ opacity : 0.5 }}}}] }]
});
series.points.marker.dataLabel.font.size string
Font size of the data label.
Default Value
- “12px”
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{font : { size : "14px" }}}}] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel.horizontalTextAlignment enum
Horizontal alignment of the data label.
Default Value
- “center”
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{horizontalTextAlignment : "far"}}}] }]
});
series.points.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.
series.points.marker.dataLabel.margin.bottom number
Bottom margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{margin :{ bottom :10 }}}}] }]
});
series.points.marker.dataLabel.margin.left number
Left margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{ points: [{ marker :{dataLabel :{margin :{ left : 10}}}}] }]
});
series.points.marker.dataLabel.margin.right number
Right margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{margin :{ right :10 }}}}] }]
});
series.points.marker.dataLabel.margin.top number
Top margin of the text.
Default Value
- 5
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{margin :{ top :10 } }}}] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel.opacity number
Opacity of the data label.
Default Value
- 1
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{opacity : 0.5}}}] }]
});
series.points.marker.dataLabel.shape enum
Background shape of the data label.
Default Value
- No shape is rendered by default, so its value is ‘none’. See Shape
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{shape : "circle"}}}] }]
});
series.points.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.
Default Value
- “top”. See TextPosition
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{textPosition : "bottom"}}}] }]
});
series.points.marker.dataLabel.verticalTextAlignment enum
Vertical alignment of the data label.
Default Value
- ‘center’
Example
$("#container").ejChart({
series :[{ points: [{ marker :{dataLabel :{verticalTextAlignment : "far"}}}] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel.visible boolean
Controls the visibility of the data labels.
Default Value
- false
Example
$("#container").ejChart({
series :[{ points: [{ marker :{dataLabel :{visible : true}}}] }]
});
series.points.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
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{template : "item"}}}] }]
});
Try it: JS Playground Sample
series.points.marker.dataLabel.offset number
Moves the label vertically by specified offset.
Default Value
- 0
Example
$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{offset : 10}}}] }]
});
series.points.marker.fill string
Color of the marker shape.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ marker : { fill : "green" } }] }]
});
series.points.marker.imageUrl string
The URL for the Image that is to be displayed as marker. In order to display image as marker, set series.marker.shape as ‘image’.
Default Value
- ””
Example
$("#container").ejChart({
series :[{ points:[{ marker :{ imageUrl: "../images/sample.png"}}] }]
});
series.points.marker.opacity number
Opacity of the marker.
Default Value
- 1
Example
$("#container").ejChart({
series :[{ points:[{ marker :{ opacity : 0.5 }}] }]
});
Try it: JS Playground Sample
series.points.marker.shape enum
Specifies the shape of the marker.
Default Value
- “circle”. See Shape
Example
$("#container").ejChart({
series :[{ points:[{ marker :{ shape: "rectangle"}] }]
});
Try it: JS Playground Sample
series.points.marker.size object
Options for customizing the size of the marker shape.
series.points.marker.size.height number
Height of the marker.
Default Value
- 6
Example
$("#container").ejChart({
series :[{ points:[{ marker :{size :{height : 5}}}] }]
});
>
series.points.marker.size.width number
Width of the marker.
Default Value
- 6
Example
$("#container").ejChart({
series :[{ points:[{ marker :{ size :{ width : 2 } } }] }]
});
Try it: JS Playground Sample
series.points.marker.visible boolean
Controls the visibility of the marker shape.
Default Value
- false
Example
$("#container").ejChart({
series :[{ points:[{ marker :{ visible : true}}] }]
});
series.points.open number
Open value of the point. This is applicable only for financial type series.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ open : 30 }] }]
});
series.points.text string
Datalabel text for the point.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ text : "20%" }] }]
});
series.points.x number
X value of the point.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ x : 1 }] }]
});
series.points.y number
Y value of the point.
Default Value
- null
Example
$("#container").ejChart({
series :[{ points:[{ y : 20 }] }]
});
series.pyramidMode enum
Specifies the mode of the pyramid series.
Default Value
- “linear”
Example
$("#container").ejChart({
series : [{pyramidMode : "linear" }]
});
Try it: JS Playground Sample
series.query object
Specifies ej.Query to select data from dataSource. This property is applicable only when the dataSource is ej.DataManager.
Default Value
- null
Example
var query = ej.Query().from("Orders").take(10);
$("#container").ejChart({
series : [{query: query }]
});
Try it: JS Playground Sample
series.startAngle number
Start angle from where the pie/doughnut series renders. It starts from 0, by default.
Default Value
- null
Example
$("#container").ejChart({
series : [{startAngle: 140 }]
});
Try it: JS Playground Sample
series.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
$("#container").ejChart({
series : [{
cornerRadius: 10
}]
});
series.cornerRadius.topLeft number
Specifies the radius for the top left corner.
Default Value
- 0
Example
$("#container").ejChart({
series : [{
cornerRadius: {topLeft : 10 }
}]
});
series.cornerRadius.topRight number
Specifies the radius for the top right corner.
Default Value
- 0
Example
$("#container").ejChart({
series : [{
cornerRadius: {topRight : 10 }
}]
});
series.cornerRadius.bottomLeft number
Specifies the radius for the bottom left corner.
Default Value
- 0
Example
$("#container").ejChart({
series : [{
cornerRadius: {bottomLeft : 10 }
}]
});
series.cornerRadius.bottomRight number
Specifies the radius for the bottom right corner.
Default Value
- 0
Example
$("#container").ejChart({
series : [{
cornerRadius: {bottomRight : 10 }
}]
});
series.tooltip object
Options for customizing the tooltip of chart.
series.tooltip.border object
Options for customizing the border of the tooltip.
series.tooltip.border.color string
Border Color of the tooltip.
Default Value
- null
Example
$("#container").ejChart({
series : [{tooltip : {border : { color :"green"} }]
});
series.tooltip.border.width number
Border Width of the tooltip.
Default Value
- 1
Example
$("#container").ejChart({
series : [{tooltip : {border : { width :2} }]
});
series.tooltip.rx number
Customize the corner radius of the tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
series :[{
tooltip :{ry: 10}
}]
});
Try it: JS Playground Sample
series.tooltip.ry number
Customize the corner radius of the tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
series :[{
tooltip :{ry: 10}
}]
});
Try it: JS Playground Sample
series.tooltip.duration string
Specifies the duration, the tooltip has to be displayed.
Default Value
- “500ms”
Example
$("#container").ejChart({
series : [{tooltip : { duration: "300ms" }]
});
series.tooltip.enableAnimation boolean
Enables/disables the animation of the tooltip when moving from one point to another.
Default Value
- true
Example
$("#container").ejChart({
series : [{tooltip : { enableAnimation: false }]
});
series.tooltip.fill string
Background color of the tooltip.
Default Value
- null
Example
$("#container").ejChart({
series : [{tooltip : {fill : "green"} }]
});
Try it: JS Playground Sample
series.tooltip.format string
Format of the tooltip content.
Default Value
- “#point.x# : #point.y#”
Example
$("#container").ejChart({
series : [{tooltip : {format : "#point.x# : #point.y#"} }]
});
Try it: JS Playground Sample
series.tooltip.opacity number
Opacity of the tooltip.
Default Value
- 0.95
Example
$("#container").ejChart({
series : [{tooltip : { opacity: 0.5 }]
});
series.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
<div id="item" style="display: none;">
<div>
<div>#point.x#</div>
<div>#point.y#</div>
</div>
</div>
$("#container").ejChart({
series : [{ tooltip: { template : "item" }}]
});
Try it: JS Playground Sample
series.tooltip.visible boolean
Controls the visibility of the tooltip.
Default Value
- false
Example
$("#container").ejChart({
series : [{tooltip : {visible : true} }]
});
series.type enum
Specifies the type of the series to render in chart.
Default Value
- “column”. see Type
Example
$("#container").ejChart({
series : [{type : "column" }]
});
Try it: JS Playground Sample
series.visibility string
Controls the visibility of the series.
Default Value
- “visible”
Example
$("#container").ejChart({
series : [{visibility: "hidden" }]
});
Try it: JS Playground Sample
series.visibleOnLegend string
Enables or disables the visibility of legend item.
Default Value
- “visible”
Example
$("#container").ejChart({
series : [{visibleOnLegend: "hidden" }]
});
series.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
$("#container").ejChart({
series : [{xAxisName: "xAxis" }]
});
Try it: JS Playground Sample
series.xName string
Name of the property in the datasource that contains x value for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{xName: "XValue" }]
});
Try it: JS Playground Sample
series.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
$("#container").ejChart({
series : [{yAxisName: "yAxis" }]
});
Try it: JS Playground Sample
series.yName string
Name of the property in the datasource that contains y value for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{yName: "YValue" }]
});
series.high string
Name of the property in the datasource that contains high value for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{high: "high" }]
});
series.low string
Name of the property in the datasource that contains low value for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{low: "low" }]
});
Try it: JS Playground Sample
series.open string
Name of the property in the datasource that contains open value for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{open: "oepn" }]
});
series.close string
Name of the property in the datasource that contains close value for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{close: "close" }]
});
Try it: JS Playground Sample
series.pointColorMappingName string
Name of the property in the datasource that contains fill color for the series.
Default Value
- null
Example
$("#container").ejChart({
series : [{pointColorMappingName: "color" }]
});
### series.zOrder number
Z-order of the series.
Default Value
- 0
Example
$("#container").ejChart({
series :[{zOrder : 1}]
});
series.size string
Name of the property in the datasource that contains the size value for the bubble series.
Default Value
- null
Example
$("#container").ejChart({
series : [{size: "size" }]
});
Try it: JS Playground Sample
series.trendlines array
Option to add trendlines to chart.
series.trendlines.visibility boolean
Show/hides the trendline.
Default Value
- ””
Example
$("#container").ejChart({
series :[{trendlines:[{ visibility:'visible' }]}]
});
series.trendlines.type string
Specifies the type of trendline for the series.
Default Value
- “linear”. See TrendlinesType
Example
$("#container").ejChart({
series :[{trendlines:[{ type:'linear' }]}]
});
series.trendlines.name string
Name for the trendlines that is to be displayed in legend text.
Default Value
- “Trendline”
Example
$("#container").ejChart({
series :[{trendlines:[{ name:'Trendline' }]}]
});
series.trendlines.fill string
Fill color of the trendlines.
Default Value
- “#0000FF”
Example
$("#container").ejChart({
series :[{trendlines:[{ fill:'#0000FF' }]}]
});
series.trendlines.width number
Width of the trendlines.
Default Value
- 1
Example
$("#container").ejChart({
series :[{trendlines:[{ width:1 }]}]
});
series.trendlines.opacity number
Opacity of the trendline.
Default Value
- 1
Example
$("#container").ejChart({
series :[{trendlines:[{ opacity:1 }]}]
});
series.trendlines.dashArray string
Pattern of dashes and gaps used to stroke the trendline.
Default Value
- ””
Example
$("#container").ejChart({
series :[{trendlines:[{ dashArray:"" }]}]
});
series.trendlines.forwardForecast number
Future trends of the current series.
Default Value
- 0
Example
$("#container").ejChart({
series :[{trendlines:[{ forwardForeCast:2 }]}]
});
series.trendlines.backwardForecast number
Past trends of the current series.
Default Value
- 0
Example
$("#container").ejChart({
series :[{trendlines:[{ backwardForeCast:2 }]}]
});
Try it: JS Playground Sample
series.trendlines.polynomialOrder number
Specifies the order of polynomial trendlines.
Default Value
- 0
Example
$("#container").ejChart({
series :[{trendlines:[{ polynomialOrder:2 }]}]
});
Try it: JS Playground Sample
series.trendlines.period number
Specifies the moving average starting period value.
Default Value
- 2
Example
$("#container").ejChart({
series :[{trendlines:[{ period: 3 }]}]
});
Try it: JS Playground Sample
series.trendlines.tooltip object
Options for customizing the trendline tooltip
series.trendlines.tooltip.border object
Options for customizing the border of the trendline tooltip.
series.trendlines.tooltip.border.color string
Specify the Border color of the trendline tooltip.
Default Value
- null
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{border:{ color : "green" }} }]}]
});
series.trendlines.tooltip.border.width number
Border width of the trendline tooltip.
Default Value
- 1
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{border:{ width : 2 }} }]}]
});
Try it: JS Playground Sample
series.trendlines.tooltip.rx number
Customize the corner radius of the trendline tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{rx: 10} }]}]
});
Try it: JS Playground Sample
series.trendlines.tooltip.ry number
Customize the corner radius of the trendline tooltip rectangle.
Default Value
0
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{ry: 10} }]}]
});
Try it: JS Playground Sample
series.trendlines.tooltip.duration string
Specifies the duration of the trendline tooltip to be displayed.
Default Value
- “500ms”
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{duration : "300ms"} }]}]
});
series.trendlines.tooltip.enableAnimation boolean
Enables/disables the animation of the trendline tooltip when moving from one point to other.
Default Value
- true
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{enableAnimation : false} }]}]
});
series.trendlines.tooltip.fill string
Background color of the trendline tooltip.
Default Value
- null
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{fill : "green"} }]}]
});
series.trendlines.tooltip.format string
Format of the trendline tooltip content.
Default Value
- “#point.x# : #point.y#”
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{format : "#point.x# : #point.y#%"} }]}]
});
Try it: JS Playground Sample
series.trendlines.tooltip.opacity number
Opacity of the trendline tooltip.
Default Value
- 0.5
Example
$("#container").ejChart({
series :[{ trendlines:[{ tooltip :{opacity : 0.5} }]}]
});
series.trendlines.visibleOnLegend string
Show/hides the trendline legend.
Default Value
- visible
Example
$("#container").ejChart({
series :[{trendlines:[{ visibleOnLegend:'hidden' }]}]
});
series.trendlines.intercept number
Specifies the trendline intercept value
Default Value
- null
Example
$("#container").ejChart({
series :[{ trendlines:[{ intercept : 10 }]}]
});
series.highlightSettings object
Options for customizing the appearance of the series or data point while highlighting.
series.highlightSettings.enable boolean
Enables/disables the ability to highlight series or data point interactively.
Default Value
- false
Example
$("#container").ejChart({
series :[{highlightSettings:{enable:true}}]
});
series.highlightSettings.mode enum
Specifies whether series or data point has to be highlighted.
Default Value
- “series”. See Mode
Example
$("#container").ejChart({
series :[{highlightSettings:{mode:"point"}}]
});
series.highlightSettings.color string
Color of the series/point on highlight.
Default Value
- ””
Example
$("#container").ejChart({
series :[{highlightSettings:{color:"red"}}]
});
series.highlightSettings.opacity number
Opacity of the series/point on highlight.
Default Value
- 0.6
Example
$("#container").ejChart({
series :[{highlightSettings:{opacity:1}}]
});
series.highlightSettings.border object
Options for customizing the border of series on highlight.
series.highlightSettings.border.color string
Border color of the series/point on highlight.
Default Value
- ””
Example
$("#container").ejChart({
series :[{highlightSettings:{border:{color:"black"}}}]
});
series.highlightSettings.border.width string
Border width of the series/point on highlight.
Default Value
- 2
Example
$("#container").ejChart({
series :[{highlightSettings:{border:{width:1}}}]
});
Try it: JS Playground Sample
series.highlightSettings.pattern string
Specifies the pattern for the series/point on highlight.
Default Value
- “none”. See Pattern
Example
$("#container").ejChart({
series :[{highlightSettings:{pattern:"chessboard"}}]
});
Try it: JS Playground Sample
series.highlightSettings.customPattern string
Custom pattern for the series on highlight.
Default Value
- ””
Example
$("#container").ejChart({
series :[{highlightSettings:{customPattern:""}}]
});
Try it: JS Playground Sample
series.selectionSettings object
Options for customizing the appearance of the series/data point on selection.
series.selectionSettings.enable boolean
Enables/disables the ability to select a series/data point interactively.
Default Value
- false
Example
$("#container").ejChart({
series :[{selectionSettings:{enable:true}}]
});
series.selectionSettings.mode enum
Specifies whether series or data point has to be selected.
Default Value
- “series”. See Mode
Example
$("#container").ejChart({
series :[{selectionSettings:{mode:"point"}}]
});
Try it: JS Playground Sample
series.selectionSettings.type enum
Specifies the type of selection.
Default Value
- “single”
See. Type
Example
$("#container").ejChart({
series: [{
selectionSettings:{
type : 'multiple'
}
}]
});
series.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
$("#container").ejChart({
series: [{
selectionSettings:{
rangeType : 'x'
}
}]
});
series.selectionSettings.color string
Color of the series/point on selection.
Default Value
- ””
Example
$("#container").ejChart({
series :[{selectionSettings:{color:"red"}}]
});
series.selectionSettings.opacity number
Opacity of the series/point on selection.
Default Value
- 0.6
Example
$("#container").ejChart({
series :[{selectionSettings:{opacity:1}}]
});
series.selectionSettings.border object
Options for customizing the border of series on selection.
series.selectionSettings.border.color string
Border color of the series/point on selection.
Default Value
- ””
Example
$("#container").ejChart({
series :[{selectionSettings:{border:{color:"black"}}}]
});
series.selectionSettings.border.width string
Border width of the series/point on selection.
Default Value
- 2
Example
$("#container").ejChart({
series :[{selectionSettings:{border:{width:1}}}]
});
series.selectionSettings.pattern string
Specifies the pattern for the series/point on selection.
Default Value
- “none”. See Pattern
Example
$("#container").ejChart({
series :[{selectionSettings:{pattern:"chessboard"}}]
});
Try it: JS Playground Sample
series.selectionSettings.customPattern string
Custom pattern for the series on selection.
Default Value
- ””
Example
$("#container").ejChart({
series :[{selectionSettings:{customPattern:""}}]
});
Try it: JS Playground Sample
sideBySideSeriesPlacement boolean
Controls whether data points has to be displayed side by side or along the depth of the axis.
Default Value
- false
Example
$("#container").ejChart({
sideBySideSeriesPlacement : true
});
Try it: JS Playground Sample
size object
Options to customize the Chart size.
Try it: JS Playground Sample
size.height string
Height of the Chart. Height can be specified in either pixel or percentage.
Default Value
- ‘450’
Example
$("#container").ejChart({
size :{height : '80%'}
});
size.width string
Width of the Chart. Width can be specified in either pixel or percentage.
Default Value
- ‘450’
Example
$("#container").ejChart({
size :{width : '80%'}
});
theme enum
Specifies the theme for Chart.
Name | Type | Description |
---|---|---|
Azure | string | The Chart will be displayed in azure theme |
FlatLight | string | The Chart will be displayed in light flat theme |
FlatDark | string | The Chart will be displayed in dark flat theme |
Azuredark | string | The Chart will be displayed in dark azure theme |
Lime | string | The Chart will be displayed in lime theme |
LimeDark | string | The Chart will be displayed in dark lime theme |
Saffron | string | The Chart will be displayed in saffron theme |
SaffronDark | string | The Chart will be displayed in dark saffron theme |
GradientLight | string | The Chart will be displayed in light gradient theme |
GradientDark | string | The Chart will be displayed in dark gradient theme |
Default Value
- “Flatlight”. See Theme
Example
$("#container").ejChart({
theme : "flatdark"
});
Try it: JS Playground Sample
tilt number
Slope angle of 3D Chart. This property is applicable only when 3D view is enabled.
Default Value
- 0
Example
$("#container").ejChart({
tilt : 5
});
Try it: JS Playground Sample
title object
Options for customizing the title and subtitle of Chart.
title.background string
Background color for the chart title.
Default Value
- “transparent”
Example
$("#container").ejChart({
title : { background : "red" }
});
Try it: JS Playground Sample
title.border object
Options to customize the border of the title.
Try it: JS Playground Sample
title.border.width number
Width of the title border.
Default Value
- 1
Example
$("#container").ejChart({
title:{
border : { width:1}
}
});
title.border.color string
color of the title border.
Default Value
- “transparent”
Example
$("#container").ejChart({
title:{
border : { color: "black"}
}
});
title.border.opacity number
opacity of the title border.
Default Value
- 0.8
Example
$("#container").ejChart({
title:{
border : { opacity: 1 }
}
});
title.border.cornerRadius number
opacity of the title border.
Default Value
- 0.8
Example
$("#container").ejChart({
title:{
border : { cornerRadius: 2 }
}
});
title.font object
Options for customizing the font of Chart title.
Try it: JS Playground Sample
title.font.fontFamily string
Font family for Chart title.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
title : { font : { fontFamily : "Algerian" } }
});
title.font.fontStyle enum
Font style for Chart title.
Default Value
- “Normal”. See FontStyle
Example
$("#container").ejChart({
title : { font : { fontStyle : "italic" } }
});
title.font.fontWeight enum
Font weight for Chart title.
Default Value
- “Regular”. See FontWeight
Example
$("#container").ejChart({
title : { font : { fontWeight : "lighter" } }
});
title.font.opacity number
Opacity of the Chart title.
Default Value
- 0.5
Example
$("#container").ejChart({
title : { font : { opacity : 0.8 } }
});
title.font.size string
Font size for Chart title.
Default Value
- “20px”
Example
$("#container").ejChart({
title : { font : { size : "22px" } }
});
title.visible boolean
Controls the visibility of the Chart title
Default Value
- true
Example
$("#container").ejChart({
title : { visible : false }
});
title.enableTrim boolean
Specifies whether to trim the Chart Title when the width of the title exceeds the maximumWidth.
Default Value
- false
Example
$("#container").ejChart({
title : { enableTrim : true }
});
title.maximumWidth string
Maximum width of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.
Default Value
- auto
Example
$("#container").ejChart({
title : { maximumWidth : 150 }
});
title.textOverflow enum
Specifies the action taken when the Chart width is more than the titleWidth.
Default Value
- trim.
Example
$("#container").ejChart({
title : { textOverflow : "trim" }
});
title.subTitle object
Options to customize the sub title of Chart.
title.subTitle.font object
Options for customizing the font of sub title.
Try it: JS Playground Sample
title.subTitle.font.fontFamily string
Font family of sub title.
Default Value
- “Segoe UI”
Example
$("#container").ejChart({
title: {subTitle : {font :{ fontFamily : "Algerian" } } }
});
title.subTitle.font.fontStyle enum
Font style for sub title.
Default Value
- “Normal”. See FontStyle
Example
$("#container").ejChart({
title: { subTitle : {font :{ fontStyle : "Normal" } } }
});
title.subTitle.font.fontWeight enum
Font weight for sub title.
Default Value
- “Regular”. See FontWeight
Example
$("#container").ejChart({
title: { subTitle : {font :{ fontWeight : "regular" } } }
});
title.subTitle.font.opacity number
Opacity of the sub title.
Default Value
- 1
Example
$("#container").ejChart({
title: { subTitle : {font :{ opacity : 0.5 } } }
});
title.subTitle.font.size string
Font size for sub title.
Default Value
- “12px”
Example
$("#container").ejChart({
title: { subTitle : {font :{ size : "14px" } } }
});
title.subTitle.background string
Background color for the chart subtitle.
Default Value
- “transparent”
Example
$("#container").ejChart({
title : { subTitle:{ background : "red" } }
});
Try it: JS Playground Sample
title.subTitle.border object
Options to customize the border of the title.
Try it: JS Playground Sample
title.subTitle.border.width number
Width of the subtitle border.
Default Value
- 1
Example
$("#container").ejChart({
title:{
subTitle:{ border : { width:1} }
}
});
title.subTitle.border.color string
color of the subtitle border.
Default Value
- “transparent”
Example
$("#container").ejChart({
title:{
subTitle:{ border : { color: "black"}}
}
});
title.subTitle.border.opacity number
opacity of the subtitle border.
Default Value
- 0.8
Example
$("#container").ejChart({
title:{
subTitle:{ border : { opacity: 1 } }
}
});
title.subTitle.border.cornerRadius number
opacity of the subtitle border.
Default Value
- 0.8
Example
$("#container").ejChart({
title:{
subTitle:{ border : { cornerRadius: 2 } }
}
});
title.subTitle.text string
Text to be displayed in sub title.
Default Value
- ””
Example
$("#container").ejChart({
title: { subTitle: { text : "Performance chart" } }
});
Try it: JS Playground Sample
title.subTitle.textAlignment enum
Alignment of sub title text.
Default Value
- “far”. See TextAlignment
Example
$("#container").ejChart({
title: { subTitle: { textAlignment : "near" } }
});
Try it: JS Playground Sample
title.subTitle.visible boolean
Controls the visibility of the Chart SubTitle
Default Value
- true
Example
$("#container").ejChart({
title :{ subTitle: { visible : false } }
});
title.subTitle.enableTrim boolean
Specifies whether to trim the Chart SubTitle when the width of the Subtitle exceeds the maximumWidth.
Default Value
- false
Example
$("#container").ejChart({
title : { subTitle:{ enableTrim : true } }
});
title.subTitle.maximumWidth string
Maximum width of the Subtitle, when the Subtitle exceeds this width, the Subtitle gets trimmed, when enableTrim is true.
Default Value
- auto
Example
$("#container").ejChart({
title : { subTitle: { maximumWidth : 150 } }
});
title.subTitle.textOverflow enum
Specifies the action taken when the Chart width is more than the SubTitleWidth.
Default Value
- trim.
Example
$("#container").ejChart({
title : { subTitle: { textOverflow : "trim" } }
});
title.text string
Text to be displayed in Chart title.
Default Value
- ””
Example
$("#container").ejChart({
title : { text : "Power Production"}
});
Try it: JS Playground Sample
title.textAlignment enum
Alignment of the title text.
Default Value
- “Center”. See TextAlignment
Example
$("#container").ejChart({
title : { textAlignment : "near"}
});
Try it: JS Playground Sample
wallSize number
Width of the wall used in 3D Chart. Wall is present only in Cartesian type 3D series and not in 3D pie or Doughnut series. This property is applicable only when 3D view is enabled.
Default Value
- 2
Example
$("#container").ejChart({
wallSize : 5
});
Try it: JS Playground Sample
zooming object
Options for enabling zooming feature of chart.
zooming.enable boolean
Enables or disables zooming.
Default Value
- false
Example
$("#container").ejChart({
zooming :{enable :true}
});
zooming.enablePinching boolean
Enables or disables pinch zooming.
Default Value
- true
Example
$("#container").ejChart({
zooming :{enablePinching :true}
});
zooming.enableDeferredZoom boolean
Enable or disables the differed zooming. When it is enabled, chart is updated only on mouse up action while zooming and panning.
Default Value
- false
Example
$("#container").ejChart({
zooming:{enableDeferredZoom : true}
});
zooming.enableMouseWheel boolean
Enables/disables the ability to zoom the chart on moving the mouse wheel.
Default Value
- false
Example
$("#container").ejChart({
zooming:{enableMouseWheel : true}
});
Try it: JS Playground Sample
zooming.type string
Specifies whether to allow zooming the chart vertically or horizontally or in both ways.
Default Value
- ‘x,y’
Example
$("#container").ejChart({
zooming :{type : "y"}
});
Try it: JS Playground Sample
zooming.enableScrollbar boolean
Toggles the visibility of the scrollbar, which will be displayed while zooming.
Default Value
- false
Example
$("#container").ejChart({
zooming :{ enableScrollbar : true }
});
zooming.toolbarItems array
To display user specified buttons in zooming toolbar.
Default Value
- [“zoomIn”, “zoomOut”, “zoom”, “pan”, “reset”]
Example
$("#container").ejChart({
zooming : { toolbarItems: [“zoomin”] }
});
Try it: JS Playground Sample
Methods
animate(options)
Animates the series and/or indicators in Chart. When parameter is not passed to this method, then all the series and indicators present in Chart are animated.
Following are the parameters that you can pass to this method.
Returns: void
Parameters | Type | Description |
---|---|---|
options | object | If an array collection is passed as parameter, series and indicator objects passed in array collection are animated.
Example
If a series or indicator object is passed to this method, then the specific series or indicator is animated. Example,
|
print()
Prints the rendered chart.
Returns: void
Example
// Print Chart
var chartObj = $("#container").data("ejChart");
chartObj.print();
If you wish to print multiple charts on a same page, then you need to pass the ID of those elements as arguments to the print method.
// Print Chart
var chartObj = $("#container1").data("ejChart");
chartObj.print("container1","container2");
export(type, URL, exportMultipleChart)
Exports chart as an image or to an excel file. Chart can be exported as an image only when exportCanvasRendering option is set to true.
Following are the parameters that you can pass to this method,
Returns: object
Parameters | Type | Description |
---|---|---|
type | string | Type of the export operation to be performed. Following are the two export types that are supported now,
1. 'image' 2. 'excel'
|
URL | string |
URL of the service, where the chart will be exported to excel.
Example,
|
exportMultipleChart | boolean |
When this parameter is true, all the chart objects initialized to the same document are exported to a single excel file. This is an optional parameter. By default, it is false.
Example,
|
redraw()
Redraws the entire chart. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.
Returns: void
Example
// Redraw Chart
var chartObj = $("#container").data("ejChart");
chartObj.redraw();
$("#container").ejChart("redraw");
Events
animationComplete
Fires after the series animation is completed. This event will be triggered for each series when animation is enabled.
Example:
//animationComplete event for chart
$("#container").ejChart({
animationComplete: function (argument) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
Object |
|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
axesLabelRendering
Fires before rendering the labels. This event is fired for each label in axis. You can use this event to add custom text to axis labels.
Example
//axesLabelRendering event for chart
$("#container").ejChart({
axesLabelRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
Object |
|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
axesLabelsInitialize
Fires during the initialization of axis labels.
Example
//axesLabelsInitialize event for chart
$("#container").ejChart({
axesLabelsInitialize: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
Object | dataAxes - Collection of axes in Chart |
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
axesRangeCalculate
Fires during axes range calculation. This event is fired for each axis present in Chart. You can use this event to customize axis range as required.
Example
//axesRangeCalculate event for chart
$("#container").ejChart({
axesRangeCalculate: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
axesTitleRendering
Fires before rendering the axis title. This event is triggered for each axis with title. You can use this event to add custom text to axis title.
Example
//axesTitleRendering event for chart
$("#container").ejChart({
axesTitleRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
Object |
|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
chartAreaBoundsCalculate
Fires during the calculation of chart area bounds. You can use this event to customize the bounds of chart area.
Example
//chartAreaBoundsCalculate event for chart
$("#container").ejChart({
chartAreaBoundsCalculate: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
create
Fires after chart is created.
Example
//Create event for chart
$("#container").ejChart({
create: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
destroy
Fires when chart is destroyed completely.
Example
//Destroy event for chart
$("#container").ejChart({
destroy: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
displayTextRendering
Fires before rendering the data labels. This event is triggered for each data label in the series. You can use this event to add custom text in data labels.
Example
//displayTextRendering event for chart
$("#container").ejChart({
displayTextRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
legendBoundsCalculate
Fires during the calculation of legend bounds. You can use this event to customize the bounds of legend.
Example
//legendBoundsCalculate event for chart
$("#container").ejChart({
legendBoundsCalculate: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | Set this option to true to cancel the event. |
|
object | Instance of the chart model object. |
|
string | Name of the event |
legendItemClick
Fires on clicking the legend item.
Example
//legendItemClick event for chart
$("#container").ejChart({
legendItemClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
Object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
legendItemMouseMove
Fires when moving mouse over legend item. You can use this event for hit testing on legend items.
Example
//legendItemMouseMove event for chart
$("#container").ejChart({
legendItemMouseMove: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
legendItemRendering
Fires before rendering the legend item. This event is fired for each legend item in Chart. You can use this event to customize legend item shape or add custom text to legend item.
Example
//legendItemRendering event for chart
$("#container").ejChart({
legendItemRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
load
Fires before loading the chart.
Example
//load event for chart
$("#container").ejChart({
load: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
zoomed
Fires while performing rectangle zooming in chart.
Example
//zoomed event for chart
$("#container").ejChart({
zoomed: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object | Selected data collection of object |
rangeSelected
Fires after selected the data in chart.
Example
//rangeSelected event for chart
$("#container").ejChart({
rangeSelected: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object | Selected data collection of object |
pointRegionClick
Fires on clicking a point in chart. You can use this event to handle clicks made on points.
Example
//pointRegionClick event for chart
$("#container").ejChart({
pointRegionClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
pointRegionMouseMove
Fires when mouse is moved over a point.
Example
//pointRegionMouseMove event for chart
$("#container").ejChart({
pointRegionMouseMove: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
preRender
Fires before rendering chart.
Example
//preRender event for chart
$("#container").ejChart({
preRender: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
seriesRegionClick
Fires after selecting a series. This event is triggered after selecting a series only if selection mode is series.
Example
//seriesRendering event for chart
$("#container").ejChart({
seriesRegionClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
seriesRendering
Fires before rendering a series. This event is fired for each series in Chart.
Example
//seriesRendering event for chart
$("#container").ejChart({
seriesRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object | series - Instance of the series which is about to get rendered |
symbolRendering
Fires before rendering the marker symbols. This event is triggered for each marker in Chart.
Example
//symbolRendering event for chart
$("#container").ejChart({
symbolRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
titleRendering
Fires before rendering the Chart title. You can use this event to add custom text in Chart title.
Example
//titleRendering event for chart
$("#container").ejChart({
titleRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
toolTipInitialize
Fires before rendering the tooltip. This event is fired when tooltip is enabled and mouse is hovered on a Chart point. You can use this event to customize tooltip before rendering.
Example
//toolTipInitialize event for chart
$("#container").ejChart({
toolTipInitialize: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
trackAxisToolTip
Fires before rendering crosshair tooltip in axis. This event is fired for each axis with crosshair label enabled. You can use this event to customize crosshair label before rendering
Example
//trackAxisToolTip event for chart
$("#container").ejChart({
trackAxisToolTip: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
trackToolTip
Fires before rendering trackball tooltip. This event is fired for each series in Chart because trackball tooltip is displayed for all the series. You can use this event to customize the text displayed in trackball tooltip.
Example
//trackToolTip event for chart
$("#container").ejChart({
trackToolTip: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
axisLabelClick
Fires, on clicking the axis label.
Example
//axisLabelClick event for chart
$("#container").ejChart({
axisLabelClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
axisLabelMouseMove
Fires on moving mouse over the axis label.
Example
//axisLabelMouseMove event for chart
$("#container").ejChart({
axisLabelMouseMove: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
chartClick
Fires, on the clicking the chart.
Example
//chartClick event for chart
$("#container").ejChart({
chartClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
multiLevelLabelClick
Fires, on the clicking the Multi level labels of the chart .
Example
//MultilevelLabelsClick event for chart
$("#container").ejChart({
multiLevelLabelClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
chartMouseMove
Fires on moving mouse over the chart.
Example
//chartMouseMove event for chart
$("#container").ejChart({
chartMouseMove: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
chartDoubleClick
Fires, on double clicking the chart.
Example
//chartDoubleClick event for chart
$("#container").ejChart({
chartDoubleClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
chartMouseLeave
Fires when the mouse pointer leaves the chart
Example
//chartMouseLeave event for chart
$("#container").ejChart({
chartMouseLeave: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
annotationClick
Fires on clicking the annotation.
Example
//annotationClick event for chart
$("#container").ejChart({
annotationClick: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
Object |
|
afterResize
Fires, after the chart is resized.
Example
//afterResize event for chart
$("#container").ejChart({
afterResize: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
beforeResize
Fires, when chart size is changing.
Example
//beforeResize event for chart
$("#container").ejChart({
beforeResize: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
errorBarRendering
Fires, when error bar is rendering.
Example
//errorBarRendering event for chart
$("#container").ejChart({
errorBarRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object | errorBar - Error bar Object |
multiLevelLabelRendering
Fires, when multi level labels are rendering.
Example
//multi level labels rendering event for chart
$("#container").ejChart({
multiLevelLabelRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object | MultiLevelLabels - MultiLevel Label Object |
trendlineRendering
Fires, when trendlines are rendering.
Example
//trendline rendering event for chart
$("#container").ejChart({
trendlineRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
scrollChanged
Trigger, after the scrollbar position is changed.
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//scrollbarChanged event for chart
$("#container").ejChart({
scrollChanged: function (args) {}
});
scrollStart
Event triggered when scroll starts
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//scrollbarChanged event for chart
$("#container").ejChart({
scrollStart: function (args) {}
});
scrollEnd
Event triggered when scroll end
Name | Type | Description |
---|---|---|
|
object |
|
|
boolean | if the event should be canceled; otherwise, false. |
|
object | returns the RangeNavigator model |
|
string | returns the name of the event |
Example
//scrollbarChanged event for chart
$("#container").ejChart({
scrollEnd: function (args) {}
});
dragStart
Fires when the dragging is started
Example
//Drag Start event for chart
$("#container").ejChart({
dragStart: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
dragging
Fires while dragging
Example
//Dragging event for chart
$("#container").ejChart({
dragging: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
dragEnd
Fires when the dragging is completed
Example
//DragEnd event for chart
$("#container").ejChart({
dragEnd: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|
subTitleRendering
Fires when the sub Title of the chart is rendered
Example
//Subtitle rendering event for chart
$("#container").ejChart({
subTitleRendering: function (args) {
//Do something
}
});
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the chart model object |
|
string | Name of the event |
|
object |
|