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

HTML

<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

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

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

Example

$("#container").ejChart({

   annotations :[{ margin :{ right:10}}]                    

});

annotations.margin.top `number`

Annotation is placed at the specified value under its original position.

Default Value

Example

$("#container").ejChart({

   annotations :[{ margin :{ top:10}}]                    

});

annotations.opacity `number`

Controls the opacity of the annotation.

Default Value

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

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

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

Example

$("#container").ejChart({

   border: { opacity: 0.5 }                      

});

border.width `number`

Width of the Chart border.

Default Value

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

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
PDF	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

Example

$("#container").ejChart({

    chartArea: { border: { opacity : 0.5} }
                          
});

chartArea.border.width `number`

Border width of the plot area.

Default Value

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

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

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

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({
commonSeriesOptions :{ bubbleOptions: { minRadius: 3 }}                  
});

commonSeriesOptions.bubbleOptions.maxRadius `number`

Used for setting the maximum radius of the bubble

Default Value

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

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

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

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

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

Example

$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ bottom :10 }}}}                 
});

commonSeriesOptions.marker.dataLabel.margin.left `number`

Left margin of the text.

Default Value

Example

$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ left : 10}}}}                 
});

commonSeriesOptions.marker.dataLabel.margin.right `number`

Right margin of the text.

Default Value

Example

$("#container").ejChart({
commonSeriesOptions :{marker :{dataLabel :{margin :{ right :10 }}}}                 
});

commonSeriesOptions.marker.dataLabel.margin.top `number`

Top margin of the text.

Default Value

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

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

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

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

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

Example

$("#container").ejChart({
commonSeriesOptions :{marker :{size :{height : 5}}}                  
});

commonSeriesOptions.marker.size.width `number`

Width of the marker.

Default Value

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

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

Example

$("#container").ejChart({
commonSeriesOptions :{outlierSettings :{size :{height : 5}}}                  
});

commonSeriesOptions.outlierSettings.size.width `number`

Width of the outlier shape.

Default Value

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

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

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

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

Example

$("#container").ejChart({
commonSeriesOptions : {
             cornerRadius: {topLeft : 10 }
    }                   
});

commonSeriesOptions.cornerRadius.topRight `number`

Specifies the radius for the top right corner.

Default Value

Example

$("#container").ejChart({
commonSeriesOptions : {
             cornerRadius: {topRight : 10 }
    }                   
});

commonSeriesOptions.cornerRadius.bottomLeft `number`

Specifies the radius for the bottom left corner.

Default Value

Example

$("#container").ejChart({
commonSeriesOptions : {
             cornerRadius: {bottomLeft : 10 }
    }                   
});

commonSeriesOptions.cornerRadius.bottomRight `number`

Specifies the radius for the bottom right corner.

Default Value

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({
    commonSeriesOptions : {
          errorBar:{verticalErrorValue: 1}
    }                   
});

Try it: JS Playground Sample

commonSeriesOptions.errorBar.horizontalErrorValue `number`

Value of horizontal error bar.

Default Value

Example

$("#container").ejChart({
    commonSeriesOptions : {
          errorBar:{horizontalErrorValue: 1}
    }                   
});

Try it: JS Playground Sample

commonSeriesOptions.errorBar.horizontalPositiveErrorValue `number`

Value of positive horizontal error bar.

Default Value

Example

$("#container").ejChart({
    commonSeriesOptions : {
          errorBar:{horizontalPositiveErrorValue: 1}
    }                   
});

Try it: JS Playground Sample

commonSeriesOptions.errorBar.horizontalNegativeErrorValue `number`

Value of negative horizontal error bar.

Default Value

Example

$("#container").ejChart({
    commonSeriesOptions : {
          errorBar:{horizontalNegativeErrorValue: 1}
    }                   
});

Try it: JS Playground Sample

commonSeriesOptions.errorBar.verticalPositiveErrorValue `number`

Value of positive vertical error bar.

Default Value

Example

$("#container").ejChart({
    commonSeriesOptions : {
          errorBar:{verticalPositiveErrorValue: 1}
    }                   
});

Try it: JS Playground Sample

commonSeriesOptions.errorBar.verticalNegativeErrorValue `number`

Value of negative vertical error bar.

Default Value

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

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

Example

$("#container").ejChart({
    commonSeriesOptions : {
       errorBar:{       
         cap:{width:1}
        }
    }                   
});

commonSeriesOptions.errorBar.cap.length `number`

Length of the error bar cap.

Default Value

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

Example

$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ width:1 }]}                
});

commonSeriesOptions.trendlines.opacity `number`

Opacity of the trendline.

Default Value

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

Example

$("#container").ejChart({
commonSeriesOptions :{trendlines:[{ forwardForeCast:2 }]}                 
});

commonSeriesOptions.trendlines.backwardForecast `number`

Past trends of the current series.

Default Value

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

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

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({

   crosshair : { trackballTooltipSettings : { rx : 5  } }              

});

crosshair.trackballTooltipSettings.ry `number`

Rounded corner y value of the trackball tooltip.

Default Value

Example

$("#container").ejChart({

   crosshair : { trackballTooltipSettings : { ry : 5  } }              

});

crosshair.trackballTooltipSettings.opacity `number`

Opacity value of the trackball tooltip.

Default Value

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

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

Example

$("#container").ejChart({

   crosshair :{marker :{size :{ height :15 }}}              

});

crosshair.marker.size.width `number`

Width of the marker.

Default Value

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

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

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

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

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

Example

$("#container").ejChart({

    indicators :[{ histogram : {opacity: 0.5}}]
                        
});

indicators.kPeriod `number`

Specifies the k period in stochastic indicator.

Default Value

Example

$("#container").ejChart({

    indicators :[{ kPeriod : 4}]
                        
});

indicators.longPeriod `number`

Specifies the long period in MACD indicator.

Default Value

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({

     indicators :[{ upperLine : {width: 3}}]
                         
});

indicators.width `number`

Width of the indicator line.

Default Value

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

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

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

Example

$("#container").ejChart({

   legend :{ itemStyle :{border :{ width : 2 }}}                    

});

legend.itemStyle.height `number`

Height of the shape in legend items.

Default Value

Example

$("#container").ejChart({

   legend :{ itemStyle :{height : 20}}                    

});

legend.itemStyle.width `number`

Width of the shape in legend items.

Default Value

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

Example

$("#container").ejChart({

   legend :{location :{x :20}}                    

});

legend.location.y `number`

Y value or vertical offset to position the legend.

Default Value

Example

$("#container").ejChart({

   legend :{location : {y : 100}}                  

});

legend.opacity `number`

Opacity of the legend.

Default Value

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

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

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

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

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

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

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

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

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.enableAutoIntervalOnZooming`boolean`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({

    primaryXAxis: { zoomFactor : 0.5 }
                          
});

primaryXAxis.zoomPosition `number`

Position of the zoomed axis. Value ranges from 0 to 1.

Default Value

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

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

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,

			//...
        }],	
	});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({

      axes: [{ stripLine:[{ width : 0 }]}]
                            
});

axes.stripLine.zIndex `enum`

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

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

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

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

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

Example

$("#container").ejChart({

    axes: [{ zoomFactor : 0.5 }]
                          
});

axes.zoomPosition `number`

Position of the zoomed axis. Value ranges from 0 to 1.

Default Value

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

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

Example

$("#container").ejChart({

    primaryYAxis: { alternateGridBand: { odd : { opacity :0.5 }  } }
                           
});

Try it: JS Playground Sample

primaryYAxis.enableAutoIntervalOnZooming`boolean`

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

Example

$("#container").ejChart({

    primaryYAxis: { axisLine: { width : 2 } }
                          
});

Try it: JS Playground Sample

primaryYAxis.crossesAt `number`

Default Value

null

Example

$("#container").ejChart({

		primaryYAxis:
		{
			//Crosses primary Y axis at 0
			crossesAt: 0,

			//...
		},	
	});

primaryYAxis.crossesInAxis `string`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({

    primaryYAxis: { zoomFactor : 0.5 }
                          
});

primaryYAxis.zoomPosition `number`

Position of the zoomed axis. Value ranges from 0 to 1

Default Value

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

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

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

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

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

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

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

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

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

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

$("#container").ejChart({
series : [{explodeIndex : 2 }]                   
});

Try it : JS Playground Sample

series.explodeOffset `number`

Specifies the distance of the slice from the center, when it is exploded.

Default Value

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

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

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

Example

$("#container").ejChart({
series : [ { bubbleOptions: { minRadius: 3 }} ]                 
});

series.bubbleOptions.maxRadius `number`

Used for setting the maximum radius of the bubble

Default Value

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

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

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

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

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

Example

$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ bottom :10 }}}}]                 
});

series.marker.dataLabel.margin.left `number`

Left margin of the text.

Default Value

Example

$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ left : 10}}}}]                 
});

series.marker.dataLabel.margin.right `number`

Right margin of the text.

Default Value

Example

$("#container").ejChart({
series :[{marker :{dataLabel :{margin :{ right :10 }}}}]                 
});

series.marker.dataLabel.margin.top `number`

Top margin of the text.

Default Value

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

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

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

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

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

Example

$("#container").ejChart({
series :[{marker :{size :{height : 5}}}]                 
});

series.marker.size.width `number`

Width of the marker.

Default Value

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

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

Example

$("#container").ejChart({
series :[{outlierSettings :{size :{height : 5}}}]                 
});

series.outlierSettings.size.width `number`

Width of the outlier shape.

Default Value

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

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

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

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

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

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

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

Example

$("#container").ejChart({
    series : [{
          errorBar:{verticalErrorValue: 1}
    }]                   
});

Try it: JS Playground Sample

series.errorBar.horizontalErrorValue `number`

Value of horizontal error bar.

Default Value

Example

$("#container").ejChart({
    series : [{
          errorBar:{horizontalErrorValue: 1}
    }]                   
});

Try it: JS Playground Sample

series.errorBar.horizontalPositiveErrorValue `number`

Value of positive horizontal error bar.

Default Value

Example

$("#container").ejChart({
    series : [{
          errorBar:{horizontalPositiveErrorValue: 1}
    }]                   
});

Try it: JS Playground Sample

series.errorBar.horizontalNegativeErrorValue `number`

Value of negative horizontal error bar.

Default Value

Example

$("#container").ejChart({
    series : [{
          errorBar:{horizontalNegativeErrorValue: 1}
    }]                   
});

Try it: JS Playground Sample

series.errorBar.verticalPositiveErrorValue `number`

Value of positive vertical error bar.

Default Value

Example

$("#container").ejChart({
    series : [{
          errorBar:{verticalPositiveErrorValue: 1}
    }]                   
});

Try it: JS Playground Sample

series.errorBar.verticalNegativeErrorValue `number`

Value of negative vertical error bar.

Default Value

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

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

Example

$("#container").ejChart({
    series : [{
       errorBar:{       
         cap:{width:1}
        }
    }]                   
});

series.errorBar.cap.length `number`

Length of the error bar cap.

Default Value

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

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

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

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

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

Example

$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{margin :{ bottom :10 }}}}] }]                 
});

series.points.marker.dataLabel.margin.left `number`

Left margin of the text.

Default Value

Example

$("#container").ejChart({
series :[{ points: [{ marker :{dataLabel :{margin :{ left : 10}}}}] }]                 
});

series.points.marker.dataLabel.margin.right `number`

Right margin of the text.

Default Value

Example

$("#container").ejChart({
series :[{ points:[{ marker :{dataLabel :{margin :{ right :10 }}}}] }]                 
});

series.points.marker.dataLabel.margin.top `number`

Top margin of the text.

Default Value

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

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

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

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

Example

$("#container").ejChart({
series :[{ points:[{ marker :{size :{height : 5}}}] }]                 
});
>

series.points.marker.size.width `number`

Width of the marker.

Default Value

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

Example

$("#container").ejChart({
series : [{
             cornerRadius: {topLeft : 10 }
    }]                   
});

series.cornerRadius.topRight `number`

Specifies the radius for the top right corner.

Default Value

Example

$("#container").ejChart({
series : [{
             cornerRadius: {topRight : 10 }
    }]                   
});

series.cornerRadius.bottomLeft `number`

Specifies the radius for the bottom left corner.

Default Value

Example

$("#container").ejChart({
series : [{
             cornerRadius: {bottomLeft : 10 }
    }]                   
});

series.cornerRadius.bottomRight `number`

Specifies the radius for the bottom right corner.

Default Value

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

Example

$("#container").ejChart({
series : [{tooltip : {border : { width :2} }]                   
});

series.tooltip.rx `number`

Customize the corner radius of the tooltip rectangle.

Default Value

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

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

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

Example

$("#container").ejChart({
series :[{trendlines:[{ width:1 }]}]                  
});

series.trendlines.opacity `number`

Opacity of the trendline.

Default Value

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

Example

$("#container").ejChart({
series :[{trendlines:[{ forwardForeCast:2 }]}]                  
});

series.trendlines.backwardForecast `number`

Past trends of the current series.

Default Value

Example

$("#container").ejChart({
series :[{trendlines:[{ backwardForeCast:2 }]}]                  
});

Try it: JS Playground Sample

series.trendlines.polynomialOrder `number`

Specifies the order of polynomial trendlines.

Default Value

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

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

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

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

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

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

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

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

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

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

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

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

Example

$("#container").ejChart({

       title:{ 
          border : { opacity: 1 }
      }  
                     

});

title.border.cornerRadius `number`

opacity of the title border.

Default Value

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

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

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

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

Example

$("#container").ejChart({

       title:{ 
          subTitle:{ border : { opacity: 1 } }
      }  
                     

});

title.subTitle.border.cornerRadius `number`

opacity of the subtitle border.

Default Value

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

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 JS `var chartObj = $("#container").data("ejChart"); //animating series array chartObj.animate(chartObj.model.series);` If a series or indicator object is passed to this method, then the specific series or indicator is animated. Example, JS `var chartObj = $("#container").data("ejChart"); //animating a specific indicator chartObj.animate(chartObj.model.indicators[0]);`

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' Example JS `var chartObj = $("#container").data("ejChart"); chartObj.export(‘image’);`
URL	string	URL of the service, where the chart will be exported to excel. Example, JS `var chartObj = $("#container").data("ejChart"); chartObj.export("excel", 'http://js.syncfusion.com/ExportingServices/api/JSChartExport/ExcelExport')`
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, JS `var chartObj = $("#container").data("ejChart"); chartObj.export("excel", 'http://js.syncfusion.com/ExportingServices/api/JSChartExport/ExcelExport', true)`

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
JS `data`	Object	series - Instance of the series that completed has animation.
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	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
JS `data`	Object	axis - Instance of the corresponding axis. label - Arguments of axis label value and text.
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `data`	Object	dataAxes - Collection of axes in Chart
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `data`	object	delta - Difference between minimum and maximum value of axis range. interval - Interval value of axis range. Grid lines, tick lines and axis labels are drawn based on this interval value. max - Maximum value of axis range. min - Minimum value of axis range.
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `data`	Object	axes - Instance of the axis whose title is being rendered locationX - X-coordinate of title location locationY - Y-coordinate of title location title - Axis title text. You can add custom text to the title.
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `data`	object	areaBoundsHeight - Height of the chart area. areaBoundsWidth - Width of the chart area. areaBoundsX - X-coordinate of the chart area. areaBoundsY - Y-coordinate of the chart area.
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `data`	object	text - Text displayed in data label. You can add custom text to the data label locationX - X-coordinate of data label location locationY - Y-coordinate of data label location seriesIndex - Index of the series in series Collection whose data label is being rendered pointIndex - Index of the point in series whose data label is being rendered
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `data`	object	legendBoundsHeight - Height of the legend legendBoundsWidth - Width of the legend. legendBoundsRows - Number of rows to display the legend items
JS `cancel`	boolean	Set this option to true to cancel the event.
JS `model`	object	Instance of the chart model object.
JS `type`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	Object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	startX - X-coordinate of legend item in pixel startY - Y-coordinate of legend item in pixel LegendItem - Instance of the legend item object that is about to be rendered style - Options to customize the legend item styles such as border, color, size, etc…, Bounds - Instance that holds information about legend bounds and legend item bounds. symbolShape - Name of the legend item shape. Use this option to customize legend item shape before rendering series - Instance of the series object corresponding to the legend item

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	startX - X-coordinate of legend item in pixel startY - Y-coordinate of legend item in pixel LegendItem - Instance of the legend item object that is about to be rendered style - Options to customize the legend item styles such as border, color, size, etc…, Bounds - Instance that holds information about legend bounds and legend item bounds. symbolShape - Name of the legend item shape. Use this option to customize legend item shape before rendering series - Instance of the series object corresponding to the legend item

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	startX - X-coordinate of legend item in pixel startY - Y-coordinate of legend item in pixel legendItem - Instance of the legend item object that is about to be rendered style - Options to customize the legend item styles such as border, color, size, etc. symbolShape - Name of the legend item shape. Use this option to customize legend item shape before rendering

load

Fires before loading the chart.

Example

//load event for chart

$("#container").ejChart({

    load: function (args) {
             //Do something
    }
    
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	locationX - X-coordinate of point in pixel locationY - Y-coordinate of point in pixel seriesIndex - Index of the series in series collection to which the point belongs pointIndex - Index of the point in series

pointRegionMouseMove

Fires when mouse is moved over a point.

Example

//pointRegionMouseMove event for chart

$("#container").ejChart({

    pointRegionMouseMove: function (args) {
                  //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	locationX - X-coordinate of point in pixel locationY - Y-coordinate of point in pixel seriesIndex - Index of the series in series collection to which the point belongs pointIndex - Index of the point in series

preRender

Fires before rendering chart.

Example

//preRender event for chart

$("#container").ejChart({

    preRender: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	series - Instance of the selected series seriesIndex - Index of the selected series

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	location - Instance that holds the location of marker symbol style - Options to customize the marker style such as color, border and size

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	location - Option to customize the title location in pixels size - Read-only option to find the size of the title title - Use this option to add custom text in title

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	currentText - Text to be displayed in tooltip. Set this option to customize the text displayed in tooltip pointIndex - Index of the point on which mouse is hovered seriesIndex - Index of the series in series collection whose point is hovered by mouse

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	location - Location of the crosshair label in pixels axisIndex - Index of the axis for which crosshair label is displayed crossAxis - Instance of the chart axis object for which cross hair label is displayed currentTrackText - Text to be displayed in crosshair label. Use this option to add custom text in crosshair label

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	location - Location of the trackball tooltip in pixels pointIndex - Index of the point for which trackball tooltip is displayed seriesIndex - Index of the series in series collection currentText - Text to be displayed in trackball tooltip. Use this option to add custom text in trackball tooltip series - Instance of the series object for which trackball tooltip is displayed.

axisLabelClick

Fires, on clicking the axis label.

Example

//axisLabelClick event for chart

$("#container").ejChart({

    axisLabelClick: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the labels in chart area. index - Index of the label. axis - Instance of the corresponding axis. text - Label that is clicked.

axisLabelMouseMove

Fires on moving mouse over the axis label.

Example

//axisLabelMouseMove event for chart

$("#container").ejChart({

    axisLabelMouseMove: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the labels in chart area. index - Index of the label. axis - Instance of the corresponding axis. text - Label that is hovered.

chartClick

Fires, on the clicking the chart.

Example

//chartClick event for chart

$("#container").ejChart({

    chartClick: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the points with respect to chart area. id - ID of the target element. size - Width and height of the chart. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	location - X and Y co-ordinate of the points with respect to chart area. axis - axis of the multi level labels. multiLevelLabel - Multi level label details

chartMouseMove

Fires on moving mouse over the chart.

Example

//chartMouseMove event for chart

$("#container").ejChart({

    chartMouseMove: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the points with respect to chart area. id - ID of the target element. size - Width and height of the chart. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

chartDoubleClick

Fires, on double clicking the chart.

Example

//chartDoubleClick event for chart

$("#container").ejChart({

    chartDoubleClick: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the points with respect to chart area. id - ID of the target element. size - Width and height of the chart. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

chartMouseLeave

Fires when the mouse pointer leaves the chart

Example

//chartMouseLeave event for chart

$("#container").ejChart({

    chartMouseLeave: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the points with respect to chart area. id - ID of the target element. size - Width and height of the chart. pageX - x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

annotationClick

Fires on clicking the annotation.

Example

//annotationClick event for chart

$("#container").ejChart({

    annotationClick: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	Object	location - X and Y co-ordinate of the annotation in chart area. contentData - Information about the annotation, like Coordinate unit, Region, content pageX- x-coordinate of the pointer, relative to the page pageY - y-coordinate of the pointer, relative to the page

afterResize

Fires, after the chart is resized.

Example

//afterResize event for chart

$("#container").ejChart({

    afterResize: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	width - Chart width, after resize height - Chart height, after resize prevWidth - Chart width, before resize prevHeight - Chart height, before resize originalWidth- Chart width, when the chart was first rendered originalHeight - Chart height, when the chart was first rendered

beforeResize

Fires, when chart size is changing.

Example

//beforeResize event for chart

$("#container").ejChart({

    beforeResize: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	currentWidth - Chart width, before resize currentHeight - Chart height, before resize newWidth - Chart width, after resize newHeight - Chart height, after resize

errorBarRendering

Fires, when error bar is rendering.

Example

//errorBarRendering event for chart

$("#container").ejChart({

    errorBarRendering: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	trendlines - Trendline Object series - Series data of the chart forwardForecast - Forward Forecast value for the trendline backwardForecast - Backward Forecast value for the trendline

scrollChanged

Trigger, after the scrollbar position is changed.

Name	Type	Description
JS `data`	object	oldRange - returns the scrollbar position old start and end range value on change end of scrollbar newRange - returns the scrollbar position new start and end range value on change end of scrollbar
HTML `cancel`	boolean	if the event should be canceled; otherwise, false.
HTML `model`	object	returns the RangeNavigator model
HTML `type`	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
JS `data`	object	startRange - returns the scrollbar position starting range value on changing scrollbar endRange - returns the scrollbar position end range value on changing scrollbar
HTML `cancel`	boolean	if the event should be canceled; otherwise, false.
HTML `model`	object	returns the RangeNavigator model
HTML `type`	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
JS `data`	object	oldRange - returns the scrollbar position old start and end range value on change end of scrollbar newRange - returns the scrollbar position new start and end range value on change end of scrollbar
HTML `cancel`	boolean	if the event should be canceled; otherwise, false.
HTML `model`	object	returns the RangeNavigator model
HTML `type`	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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	seriesIndex - Series Index of the point held for dragging pointIndex - PointIndex of the point held for dragging point - Information of the point held for dragging

dragging

Fires while dragging

Example

//Dragging event for chart

$("#container").ejChart({

    dragging: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	seriesIndex - Series Index of the point held for dragging pointIndex - PointIndex of the point held for dragging oldValue - Previous value of the point before dragging newValue - Current value of the point

dragEnd

Fires when the dragging is completed

Example

//DragEnd event for chart

$("#container").ejChart({

    dragEnd: function (args) {
              //Do something
    }
   
});

Name	Type	Description
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	seriesIndex - Series Index of the point held for dragging pointIndex - PointIndex of the point held for dragging oldValue - Previous value of the point before dragging newValue - Current value of the point series - Contains the all the series information of the chart

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
JS `cancel`	boolean	Set this option to true to cancel the event
JS `model`	object	Instance of the chart model object
JS `type`	string	Name of the event
JS `data`	object	location - location of the subTitle text subtitle - text of the subtitle size - Size of the Subtitle text

ejChart

Syntax

Example

Requires

Members

annotations array

annotations.angle number

Default Value

Example

annotations.content string

Default Value

Example

annotations.coordinateUnit enum

Default Value

Example

annotations.horizontalAlignment enum

Default Value

Example

annotations.margin object

annotations.margin.bottom number

Default Value

Example

annotations.margin.left number

Default Value

Example

annotations.margin.right number

Default Value

Example

annotations.margin.top number

Default Value

Example

annotations.opacity number

Default Value

Example

annotations.region enum

Default Value

Example

annotations.verticalAlignment enum

Default Value

Example

annotations.visible boolean

Default Value

Example

annotations.x number

Default Value

Example

annotations.xAxisName string

Default Value

Example

annotations.y number

Default Value

Example

annotations.yAxisName string

Default Value

Example

background string

Default Value

Example

backGroundImageUrl string

Default Value

Example

border object

border.color string

Default Value

Example

border.opacity number

Default Value

Example

border.width number

Default Value

Example

exportSettings object

exportSettings.filename string

Default Value

Example

exportSettings.action string

Default Value

Example

exportSettings.angle number

Default Value

annotations `array`

annotations.angle `number`

annotations.content `string`

annotations.coordinateUnit `enum`

annotations.horizontalAlignment `enum`

annotations.margin `object`

annotations.margin.bottom `number`

annotations.margin.left `number`

annotations.margin.right `number`

annotations.margin.top `number`

annotations.opacity `number`

annotations.region `enum`

annotations.verticalAlignment `enum`

annotations.visible `boolean`

annotations.x `number`

annotations.xAxisName `string`

annotations.y `number`

annotations.yAxisName `string`

background `string`

backGroundImageUrl `string`

border `object`

border.color `string`

border.opacity `number`

border.width `number`

exportSettings `object`

exportSettings.filename `string`

exportSettings.action `string`

exportSettings.angle `number`

exportSettings.type `enum`

exportSettings.orientation `enum`

exportSettings.mode `enum`

exportSettings.multipleExport `boolean`

chartArea `object`

chartArea.background `string`

chartArea.border `object`

chartArea.border.color `string`

chartArea.border.opacity `number`

chartArea.border.width `number`

columnDefinitions `array`

columnDefinitions.unit `enum`

columnDefinitions.columnWidth `number`

columnDefinitions.lineColor `string`

columnDefinitions.lineWidth `number`

commonSeriesOptions `object`

commonSeriesOptions.animationDuration `string`

commonSeriesOptions.border `object`

commonSeriesOptions.border.color `string`

commonSeriesOptions.border.dashArray `string`

commonSeriesOptions.border.width `number`

commonSeriesOptions.columnFacet `enum`

commonSeriesOptions.columnWidth `number`

commonSeriesOptions.columnSpacing `number`

commonSeriesOptions.visibleOnLegend `string`

commonSeriesOptions.stackingGroup `string`

commonSeriesOptions.dashArray `string`