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

  • JS
  • $(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

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ horizontalAlignment :"left"}]
                        
    });

    Try it: Horizontal Alignment

    annotations.margin object

    Options to customize the margin of annotation.

    Try it: Margin

    annotations.margin.bottom number

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

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ margin :{ bottom:10}}]                    
    
    });

    annotations.margin.left number

    Annotation is placed at the specified value from left side of its original position.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ margin :{ left:10}}]                    
    
    });

    annotations.margin.right number

    Annotation is placed at the specified value from the right side of its original position.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ margin :{ right:10}}]                    
    
    });

    annotations.margin.top number

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

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ margin :{ top:10}}]                    
    
    });

    annotations.opacity number

    Controls the opacity of the annotation.

    Default Value

    • 1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ verticalAlignment :"top"}]                    
    
    });

    Try it: Vertical Alignment

    annotations.visible boolean

    Controls the visibility of the annotation.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
       annotations :[{ visible :true}]                    
    
    });

    Try it: Annotation Visibility

    annotations.x number

    Represents the horizontal offset when coordinateUnit is pixels.
    when coordinateUnit is points, it represents the x-coordinate of axis bounded with xAxisName property or primary X axis when xAxisName is not provided.
    This property is not applicable when coordinateUnit is none.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       annotations :[{ xAxisName : "xAxis1"}]                    
    
    });

    Try it: JS Playground Sample

    annotations.y number

    Represents the vertical offset when coordinateUnit is pixels.
    When coordinateUnit is points, it represents the y-coordinate of axis bounded with yAxisName property or primary Y axis when yAxisName is not provided.
    This property is not applicable when coordinateUnit is none.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       annotations :[{ yAxisName : "yAxis1"}]                    
    
    });

    Try it: JS Playground Sample

    background string

    Sets the background color of the chart.

    Default Value

    • transparent

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       border: { color: "green" }                      
    
    });

    border.opacity number

    Opacity of the chart border.

    Default Value

    • 0.3

    Example

  • JS
  • $("#container").ejChart({
    
       border: { opacity: 0.5 }                      
    
    });

    border.width number

    Width of the Chart border.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         exportSettings: { filename : "myChart" }
                              
    });

    exportSettings.action string

    Specifies the name of the action URL

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
         exportSettings: { action : "http://js.syncfusion.com/ExportingServices/api/JSChartExport/Export" }
                              
    });

    exportSettings.angle number

    Specifies the angle for rotation

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         exportSettings: { mode : "server"}
                              
    });

    exportSettings.multipleExport boolean

    Enable/ disable the multiple excel exporting

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        chartArea: { border: { color :"green"} }
                             
    });

    chartArea.border.opacity number

    Opacity of the plot area border.

    Default Value

    • 0.3

    Example

  • JS
  • $("#container").ejChart({
    
        chartArea: { border: { opacity : 0.5} }
                              
    });

    chartArea.border.width number

    Border width of the plot area.

    Default Value

    • 0.5

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        columnDefinitions :[{unit : "percentage"}]                     
    
    });

    columnDefinitions.columnWidth number

    Width of the column in plotting area. Width is measured in either pixel or percentage based on the value of unit property.

    Default Value

    • 50

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       columnDefinitions :[{ lineColor : "green" }]                     
    
    });

    columnDefinitions.lineWidth number

    Width of the line that indicates the starting point of the column in plot area.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{border :{ color : "green" } }                  
    });

    commonSeriesOptions.border.dashArray string

    DashArray for border of the series.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
       commonSeriesOptions : {
          border: {
               dashArray: "5,3"
           } 
        }                   
    });

    commonSeriesOptions.border.width number

    Border width of all series.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $('#container').ejChart({
    
        commonSeriesOptions: {
        
            //change to cylinder chart
    		columnFacet: "cylinder"
    
        },
    
        //...
    
    });

    commonSeriesOptions.columnWidth number

    Relative width of the columns in column type series. Value ranges from 0 to 1. Width also depends upon columnSpacing property.

    Default Value

    • 0.7

    Example

  • JS
  • $('#container').ejChart({
    
        commonSeriesOptions: {
        
            //Width of columns in column type series
    		columnWidth: 0.8
    
            //... 
        },
    
        //...
    
    });

    commonSeriesOptions.columnSpacing number

    Spacing between columns of different series. Value ranges from 0 to 1

    Default Value

    • 0

    Example

  • JS
  • $('#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : {visibleOnLegend: "hidden" }                   
    });

    commonSeriesOptions.stackingGroup string

    Group of the stacking collection series.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{stackingGroup : " "}                  
    });

    commonSeriesOptions.dashArray string

    Pattern of dashes and gaps used to stroke all the line type series.

    Default Value

    • ””

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : {dataSource: data }                   
    });

    Try it: JS Playground Sample

    commonSeriesOptions.cardinalSplineTension number

    Specifies spline tension value for cardinal spline type. Value ranges from 0 to 1.

    Default Value

    • 0.5

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ cardinalSplineTension : 0.5}                  
    });

    commonSeriesOptions.doughnutCoefficient number

    Controls the size of the hole in doughnut series. Value ranges from 0 to 1

    Default Value

    • 0.4

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ doughnutCoefficient : 0.5}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.doughnutSize number

    Controls the size of the doughnut series. Value ranges from 0 to 1.

    Default Value

    • 0.8

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ enableAnimation : false}                  
    });

    commonSeriesOptions.enableSmartLabels boolean

    To avoid overlapping of data labels smartly.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ enableSmartLabels : false}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.endAngle number

    Start angle of pie/doughnut series.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ explodeIndex : 2}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.explodeOffset number

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

    Default Value

    • 0.4

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ explodeOffset : 20}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.fill string

    Fill color for all the series.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{font :{color : "green"}}                 
    });

    commonSeriesOptions.font.fontFamily string

    Font Family for all the series.

    Default Value

    • “Segoe UI”

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{font :{fontWeight : "lighter"}}                 
    });

    commonSeriesOptions.font.opacity number

    Opacity for text in all the series.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{font :{opacity : 0.5}}                 
    });

    commonSeriesOptions.font.size string

    Font size for text in all the series.

    Default Value

    • “12px”

    Example

  • JS
  • $("#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

  • JS
  • <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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : {funnelWidth : '40%' }                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.gapRatio number

    Gap between the slices in pyramid and funnel series.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ bubbleOptions: { radiusMode: "minMax" }}                  
    });

    commonSeriesOptions.bubbleOptions.minRadius number

    Used for the setting the minimum radius of the bubble

    Default Value

    • 1

    Example

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

    commonSeriesOptions.bubbleOptions.maxRadius number

    Used for setting the maximum radius of the bubble

    Default Value

    • 3

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{color : "green"}                  
    });

    commonSeriesOptions.marker.border.width number

    Border width of the marker shape.

    Default Value

    • 3

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{border : {color : "green"}}}}                 
    });

    commonSeriesOptions.marker.dataLabel.border.width number

    Border width of the data label.

    Default Value

    • 0.1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ type : "bezier" }}}}                 
    });

    Try it: JS Playground Sample

    commonSeriesOptions.marker.dataLabel.connectorLine.width number

    Width of the connector.

    Default Value

    • 0.5

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ color : "red" }}}}                 
    });

    ### commonSeriesOptions.marker.dataLabel.connectorLine.height string

    Height of the connector line.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{connectorLine :{ height : 20 }}}}                 
    });

    commonSeriesOptions.marker.dataLabel.fill string

    Background color of the data label.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{ font :{fontFamily : "Algerian"}}}}                 
    });

    commonSeriesOptions.marker.dataLabel.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{font :{ fontStyle : "italic" }}}}                 
    });

    commonSeriesOptions.marker.dataLabel.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{font : { fontWeight : "lighter" }}}}                 
    });

    commonSeriesOptions.marker.dataLabel.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{font :{ color : "red" }}}}                 
    });

    commonSeriesOptions.marker.dataLabel.font.size string

    Font size of the data label.

    Default Value

    • “12px”

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{horizontalTextAlignment : "far"}}}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.marker.dataLabel.margin object

    Margin of the text to its background shape. The size of the background shape increases based on the margin applied to its text.

    commonSeriesOptions.marker.dataLabel.margin.bottom number

    Bottom margin of the text.

    Default Value

    • 5

    Example

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

    commonSeriesOptions.marker.dataLabel.margin.left number

    Left margin of the text.

    Default Value

    • 5

    Example

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

    commonSeriesOptions.marker.dataLabel.margin.right number

    Right margin of the text.

    Default Value

    • 5

    Example

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

    commonSeriesOptions.marker.dataLabel.margin.top number

    Top margin of the text.

    Default Value

    • 5

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.marker.dataLabel.opacity number

    Opacity of the data label.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{opacity : 0.5}}}                 
    });

    commonSeriesOptions.marker.dataLabel.offset object|number

    Options for customizing the datalabel positions

    commonSeriesOptions.marker.dataLabel.offset.x number

    X value or horizontal offset to position the labels in chart.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       commonSeriesOptions :[{  marker :{dataLabel :{offset : { x:10 }}} }]                    
    
    });

    commonSeriesOptions.marker.dataLabel.offset.y number

    Y value or vertical offset to position the labels.

    Default Value

    • 0

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{dataLabel :{visible : true}}                  
    });

    commonSeriesOptions.marker.fill string

    Color of the marker shape.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{ imageUrl: "../images/sample.png"}}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.marker.opacity number

    Opacity of the marker.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{ opacity : 0.5 }}                  
    });

    commonSeriesOptions.marker.shape enum

    Specifies the shape of the marker.

    Default Value

    • “circle”. See Shape

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{ shape: "rectangle"}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.marker.size object

    Options for customizing the size of the marker shape.

    commonSeriesOptions.marker.size.height number

    Height of the marker.

    Default Value

    • 6

    Example

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

    commonSeriesOptions.marker.size.width number

    Width of the marker.

    Default Value

    • 6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{marker :{ visible : true}}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.opacity number

    Opacity of the series.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{outlier :{ shape: "rectangle"}                  
    });

    commonSeriesOptions.outlierSettings.size object

    Options for customizing the size of the outlier shape.

    commonSeriesOptions.outlierSettings.size.height number

    Height of the outlier shape.

    Default Value

    • 6

    Example

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

    commonSeriesOptions.outlierSettings.size.width number

    Width of the outlier shape.

    Default Value

    • 6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : { palette : "ColorFieldName" }                  
    });

    commonSeriesOptions.pieCoefficient number

    Controls the size of pie series. Value ranges from 0 to 1.

    Default Value

    • 0.8

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ pieCoefficient : 1}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.pieOfPieCoefficient number

    Controls the size of the second pie in pieOfPie series. Value ranges from 0 to 1.

    Default Value

    • 0.6

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ pieOfPieCoefficient : 1}                  
    });

    commonSeriesOptions.splitValue string

    Split Value of pieOfPie series.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : [{splitValue: "40" }]                   
    });

    commonSeriesOptions.gapWidth number

    Distance between the two pie’s in pieOfPie series.

    Default Value

    • 50

    Example

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

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

    commonSeriesOptions.cornerRadius.topLeft number

    Specifies the radius for the top left corner.

    Default Value

    • 0

    Example

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

    commonSeriesOptions.cornerRadius.topRight number

    Specifies the radius for the top right corner.

    Default Value

    • 0

    Example

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

    commonSeriesOptions.cornerRadius.bottomLeft number

    Specifies the radius for the bottom left corner.

    Default Value

    • 0

    Example

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

    commonSeriesOptions.cornerRadius.bottomRight number

    Specifies the radius for the bottom right corner.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{tooltip :{border:{ color : "green" }}}                  
    });

    commonSeriesOptions.tooltip.border.width number

    Border width of the tooltip.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{tooltip :{border :{ width : 2}}}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.tooltip.rx number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{tooltip :{rx: 10}}                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.tooltip.ry number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{tooltip :{enableAnimation : false}}                  
    });

    commonSeriesOptions.tooltip.fill string

    Background color of the tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{tooltip :{fill : "green"}}                  
    });

    commonSeriesOptions.tooltip.format string

    Format of the tooltip content.

    Default Value

    • “#point.x# : #point.y#”

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{ tooltip : { format : "#point.x# : #point.y#%" } }                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.tooltip.opacity number

    Opacity of the tooltip.

    Default Value

    • 0.5

    Example

  • JS
  • $("#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

  • JS
  • <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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : {close: "close" }                   
    });

    Try it: JS Playground Sample

    commonSeriesOptions.zOrder number

    Z-order of the series.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : {
          emptyPointSettings: {
    
               style: { border: { color : "red" } }
           } 
        }                   
    });

    commonSeriesOptions.emptyPointSettings.style.border.width number

    Border width of the empty point.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
          commonSeriesOptions : {
                    positiveFill : Red
        }                   
    });

    Try it: JS Playground Sample

    commonSeriesOptions.connectorLine object

    Options for customizing the waterfall connector line.

    Try it: JS Playground Sample

    commonSeriesOptions.connectorLine.width number

    Width of the connector line.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions : {
                 connectorLine: {width : 1 }
        }                   
    });

    commonSeriesOptions.connectorLine.color string

    Color of the connector line.

    Default Value

    • “#565656”

    Example

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
                 connectorLine: {color : "grey" }
        }                   
    });

    commonSeriesOptions.connectorLine.dashArray string

    DashArray of the connector line.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
                 connectorLine: {dashArray : "2,3" }
        }                   
    });

    commonSeriesOptions.connectorLine.opacity number

    DashArray of the connector line.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
              dragSettings:{enable: true}
        }                   
    });

    commonSeriesOptions.dragSettings.type string

    Specifies the type of drag settings.

    Default Value

    • “xy”

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
              errorBar:{direction: "plus"}
        }                   
    });

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.verticalErrorValue number

    Value of vertical error bar.

    Default Value

    • 3

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.horizontalErrorValue number

    Value of horizontal error bar.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.horizontalPositiveErrorValue number

    Value of positive horizontal error bar.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.horizontalNegativeErrorValue number

    Value of negative horizontal error bar.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.verticalPositiveErrorValue number

    Value of positive vertical error bar.

    Default Value

    • 5

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.verticalNegativeErrorValue number

    Value of negative vertical error bar.

    Default Value

    • 5

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
            errorBar:{       
               fill:red
            }
    
        }                   
    });

    Try it: JS Playground Sample

    commonSeriesOptions.errorBar.width number

    Width of the error bar.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
           errorBar:{       
             cap:{visible:false}
            }
        }s                   
    });

    commonSeriesOptions.errorBar.cap.width number

    Width of the error bar cap.

    Default Value

    • 1

    Example

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

    commonSeriesOptions.errorBar.cap.length number

    Length of the error bar cap.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
        commonSeriesOptions : {
           errorBar:{       
             cap:{length: 10}
            }
        }                   
    });

    commonSeriesOptions.errorBar.cap.fill string

    Color of the error bar cap.

    Default Value

    • “#000000”

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{trendlines:[{ visibility:'visible' }]}                 
    });

    commonSeriesOptions.trendlines.visibleOnLegend string

    Show/hides the trendline legend.

    Default Value

    • visible

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{trendlines:[{ name:'Trendline' }]}                  
    });

    commonSeriesOptions.trendlines.fill string

    Fill color of the trendlines.

    Default Value

    • “#0000FF”

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{trendlines:[{ fill:'#0000FF' }]}                 
    });

    commonSeriesOptions.trendlines.width number

    Width of the trendlines.

    Default Value

    • 1

    Example

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

    commonSeriesOptions.trendlines.opacity number

    Opacity of the trendline.

    Default Value

    • 1

    Example

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

    commonSeriesOptions.trendlines.dashArray string

    Pattern of dashes and gaps used to stroke the trendline.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{trendlines:[{ dashArray:"" }]}                 
    });

    commonSeriesOptions.trendlines.forwardForecast number

    Future trends of the current series.

    Default Value

    • 0

    Example

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

    commonSeriesOptions.trendlines.backwardForecast number

    Past trends of the current series.

    Default Value

    • 0

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.trendlines.polynomialOrder number

    Specifies the order of the polynomial trendlines.

    Default Value

    • 0

    Example

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

    Try it: JS Playground Sample

    commonSeriesOptions.trendlines.period number

    Specifies the moving average starting period value.

    Default Value

    • 2

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({        
    commonSeriesOptions :[{ trendlines:[{ tooltip :{border:{ color : "green" }} }]}]                  
    });

    commonSeriesOptions.trendlines.tooltip.border.width number

    Border width of the trendline tooltip.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :[{ trendlines:[{ tooltip :{border:{  width : 2 }} }]}]                   
    });

    Try it: JS Playground Sample

    commonSeriesOptions.trendlines.tooltip.rx number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :[{ trendlines:[{ tooltip :{rx: 10} }]}]                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.trendlines.tooltip.ry number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :[{ trendlines:[{ tooltip :{enableAnimation : false} }]}]                   
    });

    commonSeriesOptions.trendlines.tooltip.fill string

    Background color of the trendline tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :[{ trendlines:[{ tooltip :{format : "#point.x# : #point.y#%"} }]}]                  
    });

    Try it: JS Playground Sample

    commonSeriesOptions.trendlines.tooltip.opacity number

    Opacity of the trendline tooltip.

    Default Value

    • 0.5

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :[{ trendlines:[{ tooltip :{opacity : 0.5} }]}]                 
    });

    commonSeriesOptions.trendlines.intercept number

    Specifies the intercept value of the trendlines.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{highlightSettings:{mode:"point"}}                  
    });

    commonSeriesOptions.highlightSettings.color string

    Color of the series/point on highlight.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{highlightSettings:{color:"red"}}                  
    });

    commonSeriesOptions.highlightSettings.opacity number

    Opacity of the series/point on highlight.

    Default Value

    • 0.6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{highlightSettings:{border:{color:"black"}}}                 
    });

    commonSeriesOptions.highlightSettings.border.width string

    Border width of the series/point on highlight.

    Default Value

    • 2

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
         commonSeriesOptions: [{
          selectionSettings:{
                  rangeType : 'x'
                 }
    	  }]
      });

    commonSeriesOptions.selectionSettings.color string

    Color of the series/point on selection.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{selectionSettings:{color:"red"}}                  
    });

    commonSeriesOptions.selectionSettings.opacity number

    Opacity of the series/point on selection.

    Default Value

    • 0.6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{selectionSettings:{border:{color:"black"}}}                 
    });

    commonSeriesOptions.selectionSettings.border.width string

    Border width of the series/point on selection.

    Default Value

    • 2

    Example

  • JS
  • $("#container").ejChart({
    commonSeriesOptions :{selectionSettings:{border:{width:1}}}                  
    });

    commonSeriesOptions.selectionSettings.pattern string

    Specifies the pattern for the series/point on selection.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       crosshair : { trackballTooltipSettings : { border : { width :2 } } }              
    
    });

    crosshair.trackballTooltipSettings.border.color string

    Border color of the trackball tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair : { trackballTooltipSettings : { border : { color :"red" } } }              
    
    });

    crosshair.trackballTooltipSettings.fill string

    Background color of the trackball tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair : { trackballTooltipSettings : { fill :"red"  } }              
    
    });

    crosshair.trackballTooltipSettings.rx number

    Rounded corner x value of the trackball tooltip.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair : { trackballTooltipSettings : { rx : 5  } }              
    
    });

    crosshair.trackballTooltipSettings.ry number

    Rounded corner y value of the trackball tooltip.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair : { trackballTooltipSettings : { ry : 5  } }              
    
    });

    crosshair.trackballTooltipSettings.opacity number

    Opacity value of the trackball tooltip.

    Default Value

    • 1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair : { trackballTooltipSettings : { mode : 'grouping'  } }              
    
    });

    crosshair.marker object

    Options for customizing the marker in crosshair.

    crosshair.marker.border object

    Options for customizing the border.

    crosshair.marker.border.width number

    Border width of the marker.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair : { marker : { border : { width :2 } } }              
    
    });

    crosshair.marker.opacity boolean

    Opacity of the marker.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair :{marker :{opacity :2}}              
    
    });

    crosshair.marker.size object

    Options for customizing the size of the marker.

    crosshair.marker.size.height number

    Height of the marker.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair :{marker :{size :{ height :15 }}}              
    
    });

    crosshair.marker.size.width number

    Width of the marker.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair :{marker :{size : {width :15}}}              
    
    });

    crosshair.marker.visible boolean

    Show/hides the marker.

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       crosshair : { line : { color "red" } }              
    
    });

    crosshair.line.width number

    Width of the crosshair line.

    Default Value

    • 1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair :{type : "trackball"}              
    
    });

    crosshair.visible boolean

    Show/hides the crosshair/trackball visibility.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
       crosshair :{visible :true}              
    
    });

    Try it: JS Playground Sample

    depth number

    Depth of the 3D Chart from front view of series to background wall. This property is applicable only for 3D view.

    Default Value

    • 100

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         enableRotation : true
                      
    });

    Try it: JS Playground Sample

    indicators array

    Options to customize the technical indicators.

    indicators.dPeriod number

    The dPeriod value for stochastic indicator.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
          indicators :[{ dPeriod : 4}]
                        
    });

    Try it: JS Playground Sample

    indicators.enableAnimation boolean

    Enables/disables the animation.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
         indicators :[{ enableAnimation :  true}]
                        
    });

    Try it: JS Playground Sample

    indicators.animationDuration boolean

    Specifies animation duration for indicator rendering.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
         indicators :[{ animationDuration:2000}]
    });

    indicators.fill string

    Color of the technical indicator.

    Default Value

    • “#00008B”

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        indicators :[{ histogram : {border: {color: "#ff0000"}}}]
                            
    });

    indicators.histogram.border.width number

    Controls the width of histogram border line in MACD indicator.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
     
        indicators :[{ histogram : {border: {width: 2}}}]
                            
    });

    indicators.histogram.fill string

    Color of histogram columns in MACD indicator.

    Default Value

    • “#ccccff”

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ histogram : {fill: "#ff0000"}}]
                            
    });

    Try it: JS Playground Sample

    indicators.histogram.opacity number

    Opacity of histogram columns in MACD indicator.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ histogram : {opacity: 0.5}}]
                            
    });

    indicators.kPeriod number

    Specifies the k period in stochastic indicator.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ kPeriod : 4}]
                            
    });

    indicators.longPeriod number

    Specifies the long period in MACD indicator.

    Default Value

    • 26

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         indicators :[{ lowerLine : {fill: "#ff0000"}}]
                             
    });

    indicators.lowerLine.width number

    Width of the lower line.

    Default Value

    • 2

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        indicators :[{ macdLine : {fill: "#ff0000"}}]
                            
    });

    indicators.macdLine.width number

    Width of the MACD line.

    Default Value

    • 2

    Example

  • JS
  • $("#container").ejChart({
    
         indicators :[{ macdLine : {width: 3}}]
                             
    });

    indicators.macdType string

    Specifies the type of the MACD indicator.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ macdType :  "both"}]
                            
    });

    indicators.period number

    Specifies period value in indicator.

    Default Value

    • 14

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        indicators :[{ periodLine : {fill: "#ff0000"}}]
                            
    });

    indicators.periodLine.width number

    Width of the period line in indicators.

    Default Value

    • 2

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ periodLine : {width: 3}}]
                            
    });

    indicators.seriesName string

    Name of the series for which indicator has to be drawn.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ seriesName : "rsi"}]
                            
    });

    Try it: JS Playground Sample

    indicators.shortPeriod number

    Specifies the short period in MACD indicator.

    Default Value

    • 13

    Example

  • JS
  • $("#container").ejChart({
    
         indicators :[{ shortPeriod :  14"}]
                             
    });

    Try it: JS Playground Sample

    indicators.standardDeviations number

    Specifies the standard deviation value for Bollinger band indicator.

    Default Value

    • 2

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
           indicators :[{ tooltip :{border : { color :"#0000ff"}} }]
                                 
    });

    indicators.tooltip.border.width number

    Border width of indicator tooltip.

    Default Value

    • 1

    Example

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

    indicators.tooltip.duration string

    Specifies the animation duration of indicator tooltip.

    Default Value

    • “500ms”

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ tooltip :{duration : "300ms"}}]
                            
    });

    indicators.tooltip.enableAnimation boolean

    Enables/disables the tooltip animation.

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         indicators :[{ tooltip :{format : "#point.x#"}}]
                             
    });

    indicators.tooltip.fill string

    Background color of indicator tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ tooltip :{fill : "#FFF000"}}]
                            
    });

    indicators.tooltip.opacity number

    Opacity of indicator tooltip.

    Default Value

    • 0.95

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ tooltip :{opacity : 0.5}}]
                            
    });

    indicators.tooltip.visible boolean

    Controls the visibility of indicator tooltip.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ tooltip :{visible : true}}]
                            
    });

    indicators.trigger number

    Trigger value of MACD indicator.

    Default Value

    • 9

    Example

  • JS
  • $("#container").ejChart({
    
        indicators :[{ trigger :  14}]
                            
    });

    Try it: JS Playground Sample

    indicators.visibility string

    Specifies the visibility of indicator.

    Default Value

    • “visible”

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         indicators :[{ upperLine : {fill: "#ff0000"}}]
                             
    });

    indicators.upperLine.width number

    Width of the upper line in indicators.

    Default Value

    • 2

    Example

  • JS
  • $("#container").ejChart({
    
         indicators :[{ upperLine : {width: 3}}]
                             
    });

    indicators.width number

    Width of the indicator line.

    Default Value

    • 2

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        indicators :[{ yAxisName :  "yAxis"}]
                            
    });

    isResponsive boolean

    Controls whether Chart has to be responsive while resizing.

    Default Value

    • false

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       legend : {border :{ color :"green"}}                     
    
    });

    legend.border.width number

    Border width of the legend.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ border :{width :2}}                     
    
    });

    legend.columnCount number

    Number of columns to arrange the legend items.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       legend :{ font :{fontFamily : "Algerian"}}                    
    
    });

    legend.font.fontStyle enum

    Font style for legend item text.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ font :{fontStyle : "italic"}}                    
    
    });

    legend.font.fontWeight enum

    Font weight for legend item text.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ font :{fontWeight : "lighter"}}                    
    
    });

    legend.font.size string

    Font size for legend item text.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ font :{size : "14px"}}                    
    
    });

    legend.itemPadding number

    Gap or padding between the legend items.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       legend :{ itemStyle :{border : { color : "green' }}}                    
    
    });

    legend.itemStyle.border.width number

    Border width of the legend items.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ itemStyle :{border :{ width : 2 }}}                    
    
    });

    legend.itemStyle.height number

    Height of the shape in legend items.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ itemStyle :{height : 20}}                    
    
    });

    legend.itemStyle.width number

    Width of the shape in legend items.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{ itemStyle :{width : 15}}                    
    
    });

    legend.location object

    Options to customize the location of chart legend. Legend is placed in provided location only when value of position property is custom

    Try it: JS Playground Sample

    legend.location.x number

    X value or horizontal offset to position the legend in chart.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{location :{x :20}}                    
    
    });

    legend.location.y number

    Y value or vertical offset to position the legend.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       legend :{location : {y : 100}}                  
    
    });

    legend.opacity number

    Opacity of the legend.

    Default Value

    • 1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       legend: { title: { font :{fontFamily: "Algerian" } } }                      
    
    });

    legend.title.font.fontStyle enum

    Font style for legend title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       legend: { title: { font :{fontStyle: "normal" } } }                      
    
    });

    legend.title.font.fontWeight enum

    Font weight for legend title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       legend: { title: { font :{fontWeight: "normal" } } }                      
    
    });

    legend.title.font.size string

    Font size for legend title.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejChart({
    
       legend: { title: { font :{size: "14px" } } }                      
    
    });

    legend.title.text string

    Text to be displayed in legend title.

    Default Value

    • ””

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({ 
      legend :{
                  textOverflow : "trim"
                 }
      });

    Try it: JS Playground Sample

    legend.textWidth number

    Text width for legend item.

    Default Value

    • 34

    Example

  • JS
  • $("#container").ejChart({ 
      legend :{
                  textWidth : 50
                 }
      });

    Try it: JS Playground Sample

    legend.visible boolean

    Controls the visibility of the legend.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
       legend : {visible : false}                     
    
    });

    Try it: JS Playground Sample

    legend.toggleSeriesVisibility boolean

    Controls the selection through the legend.

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       palette: ["#34e2d3", "#36fe3a", "#dede3d"]          
    
    });

    Try it: JS Playground Sample

    margin object

    Options to customize the left, right, top and bottom margins of chart area.

    Try it: JS Playground Sample

    margin.left number

    Spacing for the left margin of chart area. Setting positive value decreases the width of the chart area from left side.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       margin : { left: 15 }             
    
    });

    margin.right number

    Spacing for the right margin of chart area. Setting positive value decreases the width of the chart area from right side.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       margin : { right: 10 }             
    
    });

    margin.top number

    Spacing for the top margin of chart area. Setting positive value decreases the height of the chart area from the top.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       margin : { top: 10 }             
    
    });

    margin.bottom number

    Spacing for the bottom margin of the chart area. Setting positive value decreases the height of the chart area from the bottom.

    Default Value

    • 10

    Example

  • JS
  • $("#container").ejChart({
    
       margin : { bottom: 10 }             
    
    });

    perspectiveAngle number

    Perspective angle of the 3D view. Chart appears closer when perspective angle is decreased, and distant when perspective angle is increased.
    This property is applicable only when 3D view is enabled

    Default Value

    • 90

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { alternateGridBand: { even :{ fill : "green" } } }
                            
    });

    primaryXAxis.alternateGridBand.even.opacity number

    Opacity of the even grid band.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { alternateGridBand: { odd :{ fill : "red" } } }
                              
    });

    primaryXAxis.alternateGridBand.odd.opacity number

    Opacity of odd grid band

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { isIndexed: true }
                              
    });

    primaryXAxis.enableAutoIntervalOnZoomingboolean

    Specifies the interval of the axis according to the zoomed data of the chart.

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { axisLine : { offset : 5 } }
                              
    });

    Try it: JS Playground Sample

    primaryXAxis.axisLine.visible boolean

    Show/hides the axis line.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { axisLine : { visible : false } }
                              
    });

    primaryXAxis.axisLine.color string

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { axisLine : { color : "red" } }
                              
    });

    primaryXAxis.axisLine.width number

    Width of axis line.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { font : { fontFamily : "Algerian"} }
                               
    });

    primaryXAxis.font.fontStyle enum

    Font style of labels.

    Default Value

    • ej.datavisualization.Chart.FontStyle.Normal. See FontStyle

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { font : { fontWeight : "lighter"} }
                               
    });

    primaryXAxis.font.opacity number

    Opacity of the axis labels.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { font : { opacity : 0.5} }
                              
    });

    primaryXAxis.font.size string

    Font size of the axis labels.

    Default Value

    • “13px”

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { intervalType: "days" }
                               
    });

    Try it: JS Playground Sample

    primaryXAxis.isInversed boolean

    Specifies whether to inverse the axis.

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { labelRotation: 90 }
                              
    });

    Try it: JS Playground Sample

    primaryXAxis.logBase number

    Logarithmic base value. This is applicable only for logarithmic axis.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorGridLines: { dashArray : "2,3"} }
                              
    });

    primaryXAxis.majorGridLines.color string

    Color of the major grid line.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorGridLines: { color : "red"} }
                              
    });

    primaryXAxis.majorGridLines.opacity number

    Opacity of major grid lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorGridLines: { opacity: 0.5 } }
                              
    });

    primaryXAxis.majorGridLines.visible boolean

    Show/hides the major grid lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorGridLines: { visible: false } }
                              
    });

    primaryXAxis.majorGridLines.width number

    Width of the major grid lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorGridLines: { width : 0.5} }
                              
    });

    Try it: JS Playground Sample

    primaryXAxis.majorTickLines object

    Options for customizing the major tick lines.

    primaryXAxis.majorTickLines.size number

    Length of the major tick lines.

    Default Value

    • 5

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorTickLines: { size: 2 } }
                              
    });

    primaryXAxis.majorTickLines.visible boolean

    Show/hides the major tick lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorTickLines: { visible: false } }
                              
    });

    primaryXAxis.majorTickLines.width number

    Width of the major tick lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { majorTickLines: { width: 2 } }
                              
    });

    Try it: JS Playground Sample

    primaryXAxis.maximumLabels number

    Maximum number of labels to be displayed in every 100 pixels.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { maximumLabels : 5 }
                              
    });

    Try it: JS Playground Sample

    primaryXAxis.maximumLabelWidth number

    Maximum width of the axis label. When the label exceeds the width, the label gets trimmed when the enableTrim is set to true.

    Default Value

    • 34

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { minorGridLines: { dashArray: "2,3" } }
                              
    });

    primaryXAxis.minorGridLines.visible boolean

    Show/hides the minor grid lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { minorGridLines: { visible: true } }
                              
    });

    primaryXAxis.minorGridLines.width number

    Width of the minorGridLines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { minorGridLines: { width: 2 } }
                              
    });

    Try it: JS Playground Sample

    primaryXAxis.minorTickLines object

    Options for customizing the minor tick lines.

    primaryXAxis.minorTickLines.size number

    Length of the minor tick lines.

    Default Value

    • 5

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { minorTickLines: { size: 2 } }
                              
    });

    primaryXAxis.minorTickLines.visible boolean

    Show/hides the minor tick lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { minorTickLines: { visible: true } }
                              
    });
    Width of the minor tick line.

    primaryXAxis.minorTickLines.width number

    Width of the minor tick line.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { minorTickLines: { width: 2 } }
                              
    });

    primaryXAxis.minorTicksPerInterval number

    Specifies the number of minor ticks per interval.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { orientation : 'Vertical' }
                              
    });

    primaryXAxis.plotOffset number

    Specifies the padding for the plot area.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { range : { min: 10 } }
                              
    });

    primaryXAxis.range.max number

    Maximum value of the axis range.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { range : { max: 100 } }
                              
    });

    primaryXAxis.range.interval number

    Interval of the axis range.

    Default Value

    • null

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { rangePadding : "normal" }
                              
    });

    primaryXAxis.roundingPlaces number

    Rounds the number to the given number of decimals.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { multiLevelLabels:[{ visible: true }]}
                              
    });

    primaryXAxis.multiLevelLabels.text string

    Text of the multi level labels.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { multiLevelLabels:[{ text: "2016" }]}
                              
    });

    primaryXAxis.multiLevelLabels.start object

    Starting value of the multi level labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { multiLevelLabels:[{ start: 1 }]}
                              
    });

    primaryXAxis.multiLevelLabels.end object

    Ending value of the multi level labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { multiLevelLabels:[{ end: 4 }]}
                              
    });

    primaryXAxis.multiLevelLabels.level number

    Specifies the level of multi level labels.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { multiLevelLabels:[{ maximumTextWidth: 30 }]}
                              
    });

    primaryXAxis.multiLevelLabels.textAlignment enum

    Specifies the alignment of the text in multi level labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { multiLevelLabels:[{ textAlignment: "near" }]}
                              
    });

    primaryXAxis.multiLevelLabels.textOverflow enum

    Specifies the handling of text over flow in multi level labels.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { multiLevelLabels:[{ font : { fontFamily : "Algerian"} }]}
                              
    });

    primaryXAxis.multiLevelLabels.font.fontStyle enum

    Font style of the multi level labels text.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({ 
    
        primaryXAxis: { multiLevelLabels:[{ font : { fontStyle: "Bold"} }]}
                              
    });

    primaryXAxis.multiLevelLabels.font.fontWeight string

    Font weight of the multi level label text.

    Default Value

    • “regular”

    Example

  • JS
  • $("#container").ejChart({
    
          primaryXAxis: { multiLevelLabels:[{ font : { fontWeight: "lighter"} }]}
                                
    });

    primaryXAxis.multiLevelLabels.font.opacity number

    Opacity of the multi level label text.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
            primaryXAxis: { multiLevelLabels:[{border :{ color : "green" } }]}                  
    });

    primaryXAxis.multiLevelLabels.border.width number

    Border width of the multi level labels.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        primaryXAxis: { stripLine:[{ borderColor: "green" }]}
                              
    });

    primaryXAxis.stripLine.color string

    Background color of the strip line.

    Default Value

    • “gray”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { stripLine:[{ color: "green" }]}
                              
    });

    primaryXAxis.stripLine.end number

    End value of the strip line.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { stripLine:[{ font : { color: "green"} }]}
                               
    });

    primaryXAxis.stripLine.font.fontFamily string

    Font family of the strip line text.

    Default Value

    • “Segoe UI”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { stripLine:[{ font : { fontFamily : "Algerian"} }]}
                              
    });

    primaryXAxis.stripLine.font.fontStyle enum

    Font style of the strip line text.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({ 
    
        primaryXAxis: { stripLine:[{ font : { fontStyle: "Bold"} }]}
                              
    });

    primaryXAxis.stripLine.font.fontWeight string

    Font weight of the strip line text.

    Default Value

    • “regular”

    Example

  • JS
  • $("#container").ejChart({
    
          primaryXAxis: { stripLine:[{ font : { fontWeight: "lighter"} }]}
                                
    });

    primaryXAxis.stripLine.font.opacity number

    Opacity of the strip line text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
    primaryXAxis: { stripLine:[{ font : { opacity: 0.5} }]}
                          
    });

    primaryXAxis.stripLine.font.size string

    Font size of the strip line text.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejChart({
    
            primaryXAxis: { stripLine:[{ font : { size: "15px"} }]}
                                  
    });

    primaryXAxis.stripLine.start number

    Start value of the strip line.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { stripLine:[{ startFromAxis : true }]}
                              
    });

    primaryXAxis.stripLine.text string

    Specifies text to be displayed inside the strip line.

    Default Value

    • “stripLine”

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { stripLine:[{ textAlignment : "middletop" }]}
                               
    });

    primaryXAxis.stripLine.visible boolean

    Show/hides the strip line.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { stripLine:[{ visible : true }]}
                              
    });

    primaryXAxis.stripLine.width number

    Width of the strip line.

    Default Value

    • 0

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { labelBorder:{color: "green"} }
                          
    });

    primaryXAxis.labelBorder.width number

    Specifies the width of the label border.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { title: { font : { fontWeight : "lighter"} } }
                          
    });

    primaryXAxis.title.font.opacity number

    Opacity of the axis title text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { title: { font : { opacity : 0.8} } }
                               
    });

    primaryXAxis.title.font.size string

    Font size of the axis title.

    Default Value

    • “16px”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { title: { font : { size : "14px"} } }
                              
    });

    primaryXAxis.title.maximumTitleWidth number

    Maximum width of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.

    Default Value

    • 34

    Example

  • JS
  • $("#container").ejChart({
    
          primaryYAxis: { title:{maximumTitleWidth: null} }
                                
    });

    primaryXAxis.title.text string

    Title for the axis.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
    primaryXAxis: { title: { text: "Year" } }
                          
    });

    primaryXAxis.title.visible boolean

    Controls the visibility of axis title.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { title: { visible: false } }
                              
    });

    primaryXAxis.title.offset number

    offset value for axis title.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { title: { offset: 0 } }
                              
    });

    primaryXAxis.title.position enum

    Specifies the position of the axis title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { title: { position : "inside" }}
                               
    });

    primaryXAxis.title.alignment enum

    Specifies the position of the axis title.

    Default Value

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
         primaryXAxis: { valueType: "double" }
                               
    });

    primaryXAxis.visible boolean

    Show/hides the axis.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { visible: false }
                              
    });

    primaryXAxis.zoomFactor number

    The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { zoomFactor : 0.5 }
                              
    });

    primaryXAxis.zoomPosition number

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

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { scrollbarSettings:{visible:true} }
                          
    });

    primaryXAxis.scrollbarSettings.canResize boolean

    Controls whether scrollbar has to be responsive in the chart.

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryXAxis: { scrollbarSettings : { range : { min: 10 } } }
                              
    });

    primaryXAxis.scrollbarSettings.range.max number

    Maximum value for the scrollbar range .

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ alternateGridBand: { even :{ fill : "green" } } }]
                            
    });

    axes.alternateGridBand.even.opacity number

    Opacity of the even grid band.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [ { alternateGridBand: { odd :{ fill : "red" } } } ]
                              
    });

    axes.alternateGridBand.odd.opacity number

    Opacity of odd grid band

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
    		axes:
    		[{
    			//Crosses axis at 0
    			crossesAt: 0,
    
    			//...
            }],	
    	});

    Name of the axis used for crossing. Vertical axis name should be provided for horizontal axis and vice versa. If the provided name does not belongs to a valid axis, then primary X axis or primary Y axis will be used for crossing

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [ { axisLine : { offset : 5 } } ]
                              
    });

    Try it: JS Playground Sample

    axes.axisLine.visible boolean

    Show/hides the axis line.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [ { axisLine : { visible : false } } ]
                              
    });

    axes.axisLine.color string

    Color of axis line.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [ { axisLine : { color : "red" } } ]
                              
    });

    axes.axisLine.width number

    Width of axis line.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         axes: [{ desiredIntervals: 5 }]
                               
    });

    axes.labelPlacement enum

    Specifies the placement of labels.

    Default Value

    • ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[ { labelPlacement : "onTicks" } ]
                              
    });

    axes.edgeLabelPlacement enum

    Specifies the position of labels at the edge of the axis.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         axes: [ { font : { fontFamily : "Algerian"} } ]
                               
    });

    axes.font.fontStyle enum

    Font style of labels.

    Default Value

    • ej.datavisualization.Chart.FontStyle.Normal. See FontStyle

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         axes: [{ font : { fontWeight : "lighter"} }]
                               
    });

    axes.font.opacity number

    Opacity of the axis labels.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ font : { opacity : 0.5} }]
                              
    });

    axes.font.size string

    Font size of the axis labels.

    Default Value

    • “13px”

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
         axes: [{ intervalType: "days" }]
                               
    });

    axes.isInversed boolean

    Specifies whether to inverse the axis.

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ labelIntersectAction : "multipleRows" }]
                              
    });

    axes.labelPosition enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ labelPosition : "inside" }]
                           
    });

    Try it: JS Playground Sample

    axes.alignment enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ alignment : "far" }]
                           
    });

    axes.labelRotation number

    Angle in degrees to rotate the axis labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ labelRotation: 90 }]
                              
    });

    axes.logBase number

    Logarithmic base value. This is applicable only for logarithmic axis.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ majorGridLines: { dashArray : "2,3"} }]
                              
    });

    axes.majorGridLines.color string

    Color of the major grid line.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ majorGridLines: { color : "red"} }]
                              
    });

    axes.majorGridLines.opacity number

    Opacity of major grid lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ majorGridLines: { opacity: 0.5 } }]
                              
    });

    axes.majorGridLines.visible boolean

    Show/hides the major grid lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ majorGridLines: { visible: false } }]
                              
    });

    axes.majorGridLines.width number

    Width of the major grid lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ majorGridLines: { width : 0.5} }]
                              
    });

    Try it: JS Playground Sample

    axes.majorTickLines object

    Options for customizing the major tick lines.

    axes.majorTickLines.size number

    Length of the major tick lines.

    Default Value

    • 5

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ majorTickLines: { size: 2 } }]
                              
    });

    axes.majorTickLines.visible boolean

    Show/hides the major tick lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ majorTickLines: { visible: false } }]
                              
    });

    axes.majorTickLines.width number

    Width of the major tick lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ majorTickLines: { width: 2 } }]
                              
    });

    Try it: JS Playground Sample

    axes.maximumLabels number

    Maximum number of labels to be displayed in every 100 pixels.

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ maximumLabels : 5 }]
                              
    });

    axes.maximumLabelWidth number

    Maximum width of the axis label. When the label exceeds the width, the label gets trimmed when the enableTrim is set to true.

    Default Value

    • 34

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ minorGridLines: { dashArray: "2,3" } }]
                              
    });

    axes.minorGridLines.visible boolean

    Show/hides the minor grid lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ minorGridLines: { visible: true } }]
                              
    });

    axes.minorGridLines.width number

    Width of the minorGridLines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ minorGridLines: { width: 2 } }]
                              
    });

    Try it: JS Playground Sample

    axes.minorTickLines object

    Options for customizing the minor tick lines.

    axes.minorTickLines.size number

    Length of the minor tick lines.

    Default Value

    • 5

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ minorTickLines: { size: 2 } }]
                              
    });

    axes.minorTickLines.visible boolean

    Show/hides the minor tick lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ minorTickLines: { visible: true } }]
                              
    });

    axes.minorTickLines.width number

    Width of the minor tick line.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
     
        axes: [{ minorTickLines: { width: 2 } }]
                              
    });

    axes.minorTicksPerInterval number

    Specifies the number of minor ticks per interval.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ opposedPosition : true }]
                              
    });

    axes.orientation enum

    Specifies the orientation of the axis line in the chart.

    Default Value

    • ‘horizontal’

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ orientation : 'vertical' }]
                              
    });

    axes.plotOffset number

    Specifies the padding for the plot area.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ range : { min: 10 } }]
                              
    });

    axes.range.max number

    Maximum value of the axis range.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ range : { max: 100 } }]
                              
    });

    axes.range.interval number

    Interval of the axis range.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ range : { interval: 10 } }]
                              
    });

    axes.rangePadding enum

    Specifies the padding for the axis range.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ rangePadding : "normal" }]
                              
    });

    axes.roundingPlaces number

    Rounds the number to the given number of decimals.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        axes: [{ multiLevelLabels:[{ visible: true }]}]
                              
    });

    axes.multiLevelLabels.text string

    Text of the multi level labels.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
     
        axes: [{ multiLevelLabels:[{ text: "2016" }]}]
                              
    });

    axes.multiLevelLabels.start object

    Starting value of the multi level labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
     
        axes: [{ multiLevelLabels:[{ start: 1 }]}]
                              
    });

    axes.multiLevelLabels.end object

    Ending value of the multi level labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
     
        axes: [{ multiLevelLabels:[{ end: 4 }]}]
                              
    });

    axes.multiLevelLabels.level number

    Specifies the level of multi level labels.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        axes: [{ multiLevelLabels:[{ maximumTextWidth: 30 }]}]
                              
    });

    axes.multiLevelLabels.textAlignment enum

    Specifies the alignment of the text in multi level labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
     
        axes: [{ multiLevelLabels:[{ textAlignment: "near" }]}]
                              
    });

    axes.multiLevelLabels.textOverflow enum

    Specifies the handling of text over flow in multi level labels.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ multiLevelLabels:[{ font : { fontFamily : "Algerian"} }]}]
                              
    });

    axes.multiLevelLabels.font.fontStyle enum

    Font style of the multi level labels text.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({ 
    
        axes: [{ multiLevelLabels:[{ font : { fontStyle: "Bold"} }]}]
                              
    });

    axes.multiLevelLabels.font.fontWeight string

    Font weight of the multi level label text.

    Default Value

    • “regular”

    Example

  • JS
  • $("#container").ejChart({
    
          axes: [{ multiLevelLabels:[{ font : { fontWeight: "lighter"} }]}]
                                
    });

    axes.multiLevelLabels.font.opacity number

    Opacity of the multi level label text.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
            axes: [{ multiLevelLabels:[{border :{ color : "green" } }]}]                 
    });

    axes.multiLevelLabels.border.width number

    Border width of the multi level labels.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        axes: [{ stripLine:[{ borderColor: "green" }]}]
                              
    });

    axes.stripLine.color string

    Background color of the strip line.

    Default Value

    • “gray”

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ stripLine:[{ color: "green" }]}]
                              
    });

    axes.stripLine.end number

    End value of the strip line.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         axes: [{ stripLine:[{ font : { color: "green"} }]}]
                               
    });

    axes.stripLine.font.fontFamily string

    Font family of the strip line text.

    Default Value

    • “Segoe UI”

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ stripLine:[{ font : { fontFamily : "Algerian"} }]}]
                              
    });

    axes.stripLine.font.fontStyle enum

    Font style of the strip line text.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({ 
    
        axes: [{ stripLine:[{ font : { fontStyle: "Bold"} }]}]
                              
    });

    axes.stripLine.font.fontWeight string

    Font weight of the strip line text.

    Default Value

    • “regular”

    Example

  • JS
  • $("#container").ejChart({
    
          axes: [{ stripLine:[{ font : { fontWeight: "lighter"} }]}]
                                
    });

    axes.stripLine.font.opacity number

    Opacity of the strip line text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
    axes: [{ stripLine:[{ font : { opacity: 0.5} }]}]
                          
    });

    axes.stripLine.font.size string

    Font size of the strip line text.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejChart({
    
            axes: [{ stripLine:[{ font : { size: "15px"} }]}]
                                  
    });

    axes.stripLine.start number

    Start value of the strip line.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ stripLine:[{ startFromAxis : true }]}]
                              
    });

    axes.stripLine.text string

    Specifies text to be displayed inside the strip line.

    Default Value

    • “stripLine”

    Example

  • JS
  • $("#container").ejChart({
     
        axes: [{ stripLine:[{ text : "Empty Point" }]}]
                               
    });

    axes.stripLine.textAlignment enum

    Specifies the alignment of the text inside the strip line.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
         axes: [{ stripLine:[{ textAlignment : "middletop" }]}]
                               
    });

    axes.stripLine.visible boolean

    Show/hides the strip line.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ stripLine:[{ visible : true }]}]
                              
    });

    axes.stripLine.width number

    Width of the strip line.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
          axes: [{ stripLine:[{ width : 0 }]}]
                                
    });

    axes.stripLine.zIndex enum

    Specifies the order where the strip line and the series have to be rendered. When Z-order is “behind”, strip line is rendered under the series and when it is “over”, it is rendered above the series.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ stripLine:[{ zIndex: "behind" }]}]
                              
    });

    Try it: JS Playground Sample

    axes.tickLinesPosition enum

    Specifies the position of the axis tick lines.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ labelBorder:{color: "green"} }]
                          
    });

    axes.labelBorder.width number

    Specifies the width of the label border.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         axes: [{ title: { font : { fontWeight : "lighter"} } }]
                          
    });

    axes.title.font.opacity number

    Opacity of the axis title text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
         axes: [{ title: { font : { opacity : 0.8} } }]
                               
    });

    axes.title.font.size string

    Font size of the axis title.

    Default Value

    • “16px”

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ title: { font : { size : "14px"} } }]
                              
    });

    axes.title.maximumTitleWidth number

    Maximum width of the title, when the title exceeds this width, the title gets trimmed, when enableTrim is true.

    Default Value

    • 34

    Example

  • JS
  • $("#container").ejChart({
    
          axes: [{ title:{maximumTitleWidth: null} }]
                                
    });

    axes.title.text string

    Title for the axis.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
    axes: [{ title: { text: "Year" } }]
                          
    });

    axes.title.visible boolean

    Controls the visibility of axis title.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes:[{ title: { visible: false } }]
                              
    });

    axes.title.offset number

    offset value for axis title.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ title: { offset: 0 } }]
                              
    });

    axes.title.position enum

    Specifies the position of the axis title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ title: { position : "inside" }}]
                               
    });

    axes.title.alignment enum

    Specifies the position of the axis title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ title: { alignment : "near" }}]
                               
    });

    axes.valueType enum

    Specifies the type of data the axis is handling.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
         axes: [{ valueType: "double" }]
                               
    });

    axes.visible boolean

    Show/hides the axis.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ visible: false }]
                              
    });

    axes.zoomFactor number

    The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Value ranges from 0 to 1.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        axes: [{ zoomFactor : 0.5 }]
                              
    });

    axes.zoomPosition number

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

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes: [{ scrollbarSettings:{visible:true} }]
                          
    });

    axes.scrollbarSettings.canResize boolean

    Controls whether scrollbar has to be responsive in the chart.

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        axes:[ { scrollbarSettings : { range : { min: 10 } } }]
                              
    });

    axes.scrollbarSettings.range.max number

    Maximum value for the scrollbar range .

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { alternateGridBand: { even : {fill : "red" } } }
                              
    });

    primaryYAxis.alternateGridBand.even.opacity number

    Opacity of the even grid band.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { alternateGridBand: { odd : { fill :"red" }  } }
                              
    });

    primaryYAxis.alternateGridBand.odd.opacity number

    Opacity of odd grid band.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { alternateGridBand: { odd : { opacity :0.5 }  } }
                               
    });

    Try it: JS Playground Sample

    primaryYAxis.enableAutoIntervalOnZoomingboolean

    Specifies the interval of the axis according to the zoomed data of the chart.

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { axisLine: { offset : 5 } }
                              
    });

    Try it: JS Playground Sample

    primaryYAxis.axisLine.visible boolean

    Show/hides the axis line.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { axisLine: { visible : false } }
                              
    });

    primaryYAxis.axisLine.color string

    Color of axis line.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { axisLine: { color : "" } }
                              
    });

    primaryYAxis.axisLine.width number

    Width of axis line.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { axisLine: { width : 2 } }
                              
    });

    Try it: JS Playground Sample

    primaryYAxis.crossesAt number

    Specifies where horizontal axis should intersect the vertical axis or vice versa. Value should be provided in axis co-ordinates. If provided value is greater than the maximum value of crossing axis, then axis will be placed at the opposite side.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
    		primaryYAxis:
    		{
    			//Crosses primary Y axis at 0
    			crossesAt: 0,
    
    			//...
    		},	
    	});

    primaryYAxis.crossesInAxis string

    Name of the axis used for crossing. Vertical axis name should be provided for horizontal axis and vice versa. If the provided name does not belongs to a valid axis, then primary X axis or primary Y axis will be used for crossing

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { desiredIntervals: 5 }
                              
    });

    primaryYAxis.labelPlacement enum

    Specifies the placement of labels.

    Default Value

    • ej.datavisualization.Chart.LabelPlacement.BetweenTicks. See LabelPlacement

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { labelPlacement : "onTicks" }
                              
    });

    primaryYAxis.edgeLabelPlacement enum

    Specifies the position of labels at the edge of the axis.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { font: { fontFamily : "Algerian" } }
                              
    });

    primaryYAxis.font.fontStyle enum

    Font style of labels.

    Default Value

    ej.datavisualization.Chart.FontStyle.Normal. See FontStyle

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { font: { fontWeight : "normal" } }
                              
    });

    primaryYAxis.font.opacity number

    Opacity of the axis labels.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { font: { opacity : 0.5 } }
                              
    });

    primaryYAxis.font.size string

    Font size of the axis labels.

    Default Value

    • “13px”

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { intervalType: "days" }
                              
    });

    Try it: JS Playground Sample

    primaryYAxis.isInversed boolean

    Specifies whether to inverse the axis.

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         primaryYAxis: { labelIntersectAction: "multipleRows" }
                               
    });

    Try it: JS Playground Sample

    primaryYAxis.labelPosition enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { labelPosition : "inside" }
                               
    });

    primaryYAxis.alignment enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { alignment : "near" }
                               
    });

    primaryYAxis.logBase number

    Logarithmic base value. This is applicable only for logarithmic axis.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorGridLines : {dashArray : "2,3"} }
                          
    });

    primaryYAxis.majorGridLines.color string

    Color of the major grid lines.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorGridLines : {color : "red"} }
                          
    });

    primaryYAxis.majorGridLines.opacity number

    Opacity of major grid lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorGridLines : {opacity : 0.5} }
                              
    });

    primaryYAxis.majorGridLines.visible boolean

    Show/hides the major grid lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorGridLines : {visible : false} }
                              
    });

    primaryYAxis.majorGridLines.width number

    Width of the major grid lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorGridLines : {width : 2} }
                              
    });

    Try it: JS Playground Sample

    primaryYAxis.majorTickLines object

    Options for customizing the major tick lines.

    primaryYAxis.majorTickLines.size number

    Length of the major tick lines.

    Default Value

    • 5

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorTickLines : {size : 2} }
                          
    });

    primaryYAxis.majorTickLines.visible boolean

    Show/hides the major tick lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorTickLines : {visible : false} }
                              
    });

    primaryYAxis.majorTickLines.width number

    Width of the major tick lines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { majorTickLines : {width : 2} }
                              
    });
    </script>

    Try it: JS Playground Sample

    primaryYAxis.maximumLabels number

    Maximum number of labels to be displayed in every 100 pixels.

    Default Value

    • 3

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { minorGridLines : {dashArray : "2,3"} }
                              
    });

    primaryYAxis.minorGridLines.visible boolean

    Show/hides the minor grid lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { minorGridLines : {visible : true} }
                              
    });

    primaryYAxis.minorGridLines.width number

    Width of the minorGridLines.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { minorGridLines : {width : 2} }
                              
    });

    Try it: JS Playground Sample

    primaryYAxis.minorTickLines object

    Options for customizing the minor tick lines.

    primaryYAxis.minorTickLines.size number

    Length of the minor tick lines.

    Default Value

    • 5

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { minorTickLines : {size : 2} }
                              
    });

    primaryYAxis.minorTickLines.visible boolean

    Show/hides the minor tick lines.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { minorTickLines : {visible : true} }    
                      
    });
    </script>

    primaryYAxis.minorTickLines.width number

    Width of the minor tick line

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { minorTickLines : {width : 2} }
                              
    });

    primaryYAxis.minorTicksPerInterval number

    Specifies the number of minor ticks per interval.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
         primaryYAxis: { opposedPosition : true }
                               
    });

    primaryYAxis.orientation enum

    Specifies the orientation of the axis line in the chart.

    Default Value

    • Vertical

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { orientation : 'Horizontal' }
                              
    });

    primaryYAxis.plotOffset number

    Specifies the padding for the plot area.

    Default Value

    • 10

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { range : { min: 10 } }
                              
    });

    primaryYAxis.range.max number

    Maximum value of the axis range.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { range : { max: 100 } }
                              
    });

    primaryYAxis.range.interval number

    Interval for the range.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { rangePadding : "none" }
                              
    });

    primaryYAxis.roundingPlaces number

    Rounds the number to the given number of decimals.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        primaryYAxis: { multiLevelLabels:[{ visible: true }]}
                              
    });

    primaryYAxis.multiLevelLabels.text string

    Text of the multi level labels.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
     
        primaryYAxis: { multiLevelLabels:[{ text: "2016" }]}
                              
    });

    primaryYAxis.multiLevelLabels.start number

    Starting value of the multi level labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
     
        primaryYAxis: { multiLevelLabels:[{ start: 1 }]}
                              
    });

    primaryYAxis.multiLevelLabels.end number

    Ending value of the multi level labels.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
     
        primaryYAxis: { multiLevelLabels:[{ end: 4 }]}
                              
    });

    primaryYAxis.multiLevelLabels.level number

    Specifies the level of multi level labels.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
     
        primaryYAxis: { multiLevelLabels:[{ maximumTextWidth: 30 }]}
                              
    });

    primaryYAxis.multiLevelLabels.textAlignment enum

    Specifies the alignment of the text in multi level labels.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
     
        primaryYAxis: { multiLevelLabels:[{ textAlignment: "near" }]}
                              
    });

    primaryYAxis.multiLevelLabels.textOverflow enum

    Specifies the handling of text over flow in multi level labels.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { multiLevelLabels:[{ font : { fontFamily : "Algerian"} }]}
                              
    });

    primaryYAxis.multiLevelLabels.font.fontStyle enum

    Font style of the multi level labels text.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({ 
    
        primaryYAxis: { multiLevelLabels:[{ font : { fontStyle: "Bold"} }]}
                              
    });

    primaryYAxis.multiLevelLabels.font.fontWeight string

    Font weight of the multi level label text.

    Default Value

    • “regular”

    Example

  • JS
  • $("#container").ejChart({
    
          primaryYAxis: { multiLevelLabels:[{ font : { fontWeight: "lighter"} }]}
                                
    });

    primaryYAxis.multiLevelLabels.font.opacity number

    Opacity of the multi level label text.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
            primaryYAxis: { multiLevelLabels:[{border :{ color : "green" } }]}                  
    });

    primaryYAxis.multiLevelLabels.border.width number

    Border width of the multi level labels.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { scrollbarSettings:{visible:true} }
                          
    });

    primaryYAxis.scrollbarSettings.canResize boolean

    Controls whether scrollbar has to be responsive in the chart.

    Default Value

    • false

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { scrollbarSettings : { range : { min: 10 } } }
                              
    });

    primaryYAxis.scrollbarSettings.range.max number

    Maximum value for the scrollbar range .

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ borderColor: "green" }]}
                              
    });

    primaryYAxis.stripLine.color string

    Background color of the strip line.

    Default Value

    • “gray”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ color: "green" }]}
                              
    });

    primaryYAxis.stripLine.end number

    End value of the strip line.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ font : { color: "green"} }]}
                              
    });

    primaryYAxis.stripLine.font.fontFamily string

    Font family of the strip line text.

    Default Value

    • “Segoe UI”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ font : { fontFamily : "Algerian"} }]}
                              
    });

    primaryYAxis.stripLine.font.fontStyle enum

    Font style of the strip line text.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({
    
    primaryYAxis: { stripLine:[{ font : { fontStyle: "Bold"} }]}
                          
    });

    primaryYAxis.stripLine.font.fontWeight string

    Font weight of the strip line text.

    Default Value

    • “regular”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ font : { fontWeight: "lighter"} }]}
                          
    });

    primaryYAxis.stripLine.font.opacity number

    Opacity of the strip line text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ font : { opacity: 0.5} }]}
                              
    });

    primaryYAxis.stripLine.font.size string

    Font size of the strip line text.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ font : { size: "15px"} }]}
                              
    });

    primaryYAxis.stripLine.start number

    Start value of the strip line.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ startFromAxis : true }]} 
                         
    });

    primaryYAxis.stripLine.text string

    Specifies text to be displayed inside the strip line.

    Default Value

    • “stripLine”

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ text : "Empty Point" }]}
                              
    });

    primaryYAxis.stripLine.textAlignment enum

    Specifies the alignment of the text inside the strip line.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ textAlignment : "middletop" }]}
                              
    });

    primaryYAxis.stripLine.visible boolean

    Show/hides the strip line.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ visible : true }]}
                              
    });

    primaryYAxis.stripLine.width number

    Width of the strip line.

    Default Value

    • 0

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { stripLine:[{ zIndex: "behind" }]}
                              
    });

    Try it: JS Playground Sample

    primaryYAxis.tickLinesPosition enum

    Specifies the position of the axis tick lines.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { labelBorder:{color: "green"} }
                          
    });

    primaryYAxis.labelBorder.width number

    Specifies the width of the label border.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title :{ font :{ fontWeight: "normal" } } }
                              
    });

    primaryYAxis.title.font.opacity number

    Opacity of the axis title text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title :{ font :{ opacity: 0.5 } } }
                              
    });

    primaryYAxis.title.font.size string

    Font size of the axis title.

    Default Value

    • “16px”

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title:{maximumTitleWidth: null} }
                              
    });

    primaryYAxis.title.text string

    Title for the axis.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title :{ text: "yAxis" } }
                              
    });

    primaryYAxis.title.visible boolean

    Controls the visibility of axis title.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title: { visible: false } }
                              
    });

    primaryYAxis.title.offset number

    offset value for axis title.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title: { offset: 0 } }
                              
    });

    primaryYAxis.title.position enum

    Specifies the position of the axis title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title: { position : "inside" }}
                               
    });

    primaryYAxis.title.alignment enum

    Specifies the position of the axis title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { title: { alignment : "near" }}
                               
    });

    primaryYAxis.valueType enum

    Specifies the type of data the axis is handling.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { valueType: "double" }
                              
    });

    primaryYAxis.visible boolean

    Show/hides the axis.

    Default Value

    • true

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { visible : false }
                              
    });

    primaryYAxis.zoomFactor number

    The axis is scaled by this factor. When zoomFactor is 0.5, the chart is scaled by 200% along this axis. Values ranges from 0 to 1.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { zoomFactor : 0.5 }
                              
    });

    primaryYAxis.zoomPosition number

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

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
        primaryYAxis: { zoomPosition : 0.5 }
                              
    });

    rotation number

    Rotation angle of the 3D view. This property is applicable only when 3D view is enabled.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       rowDefinitions :[{ unit : "percentage" }]                     
    
    });

    rowDefinitions.rowHeight number

    Height of the row in plotting area. Height is measured in either pixel or percentage based on the value of unit property.

    Default Value

    • 50

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       rowDefinitions :[{ lineColor : "green" }]                     
    
    });

    rowDefinitions.lineWidth number

    Width of the line that indicates the starting point of the row in plot area.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{border :{ color : "green" } }]                  
    });

    series.border.width number

    Border width of the series.

    Default Value

    • 1

    Example

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

    series.border.dashArray string

    DashArray for border of the series.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{
                animationDuration : 2000 
            }]                   
    });

    series.bullFillColor string

    Color of the point, where the close is down in financial chart.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $('#container').ejChart({
    
        series: {
        
            //change to cylinder chart
    		columnFacet: "cylinder"
    
        },
    
        //...
    
    });

    Try it: JS Playground Sample

    series.columnWidth number

    Relative width of the columns in column type series. Value ranges from 0 to 1. Width also depends upon columnSpacing property.

    Default Value

    • 0.7

    Example

  • JS
  • $('#container').ejChart({
    
        series: [{
        
            //Width of columns in column type series
    		columnWidth: 0.8
    
            //... 
        }],
    
        //...
    
    });

    series.columnSpacing number

    Spacing between columns of different series. Value ranges from 0 to 1

    Default Value

    • 0

    Example

  • JS
  • $('#container').ejChart({
    
        series: [{
        
            //20% Spacing between columns
    		columnWidth: 0.2
    
        }],
    
        //...
    
    });

    series.stackingGroup string

    To group the series of stacking collection.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    series :[{stackingGroup : " "}]                  
    });

    series.dashArray string

    Pattern of dashes and gaps used to stroke the line type series.

    Default Value

    • ””

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{dataSource: data }]                   
    });

    Try it : JS Playground Sample

    series.cardinalSplineTension number

    Specifies spline tension values for cardinal spline type.Value ranges from 0 to 1.

    Default Value

    • 0.5

    Example

  • JS
  • $("#container").ejChart({
    series : [{cadinalSplineTension : 0.5 }]                   
    });

    series.doughnutCoefficient number

    Controls the size of the hole in doughnut series. Value ranges from 0 to 1.

    Default Value

    • 0.4

    Example

  • JS
  • $("#container").ejChart({
    series : [{doughnutCoefficient : 0.5 }]                   
    });

    Try it : JS Playground Sample

    series.doughnutSize number

    Controls the size of the doughnut series. Value ranges from 0 to 1.

    Default Value

    • 0.8

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series : [{drawType : "column" }]                   
    });

    Try it : JS Playground Sample

    series.enableAnimation boolean

    Enable/disable the animation of series.

    Default Value

    • false

    Example

  • JS
  • $("#container").ejChart({
    series : [{enableAnimation : true }]                   
    });

    Try it : JS Playground Sample

    series.enableSmartLabels number

    To avoid overlapping of data labels smartly.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

    • 25

    Example

  • JS
  • $("#container").ejChart({
    series : [{explodeOffset : 20 }]                   
    });

    Try it : JS Playground Sample

    series.fill string

    Fill color of the series.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{font :{color : "green"}}]                 
    });

    series.font.fontFamily string

    Font Family of the series.

    Default Value

    • “Segoe UI”

    Example

  • JS
  • $("#container").ejChart({
    series :[{ font : { fontFamily : "Algerian"}}]                 
    });

    series.font.fontStyle enum

    Font Style of the series.

    Default Value

    • “Normal”

    Example

  • JS
  • $("#container").ejChart({
    series : [{font :{fontStyle : "italic"}} ]                
    });

    series.font.fontWeight enum

    Font weight of the series.

    Default Value

    • “Regular”

    Example

  • JS
  • $("#container").ejChart({
    series :[{font :{fontWeight : "lighter"}}]                 
    });

    series.font.opacity number

    Opacity of series text.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    series :[{font :{opacity : 0.5}}]                 
    });

    series.font.size string

    Size of the series text.

    Default Value

    • “12px”

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{funnelWidth : '40%' }]                   
    });

    Try it : JS Playground Sample

    series.gapRatio number

    Gap between the slices of pyramid/funnel series.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series : [{splitMode : "percentage" }]                   
    });

    series.boxPlotMode enum

    Quartile calculation has been performed in three different formulas to render the boxplot series .

    Default Value

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series : [{ bubbleOptions: { radiusMode: "minMax" }}]                  
    });

    series.bubbleOptions.minRadius number

    Used for the setting the minimum radius of the bubble

    Default Value

    • 1

    Example

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

    series.bubbleOptions.maxRadius number

    Used for setting the maximum radius of the bubble

    Default Value

    • 3

    Example

  • JS
  • $("#container").ejChart({
    series : [ { bubbleOptions: { maxRadius: 7 }} ]                  
    });

    Try it: JS Playground Sample

    series.splineType enum

    Specifies the different types of spline curve.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    series :[{splineType : "cardinal"}]                  
    });

    series.lineCap enum

    Specifies the line cap of the series.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    series :[{lineCap : "butt"}]                  
    });

    series.lineJoin enum

    Specifies the type of shape to be used where two lines meet.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker:{border:{color : "green"}}}]                  
    });

    series.marker.border.width number

    Border width of the marker shape.

    Default Value

    • 3

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{border : {color : "green"}}}}]                 
    });

    series.marker.dataLabel.border.width number

    Border width of the data label.

    Default Value

    • 0.1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{connectorLine :{ type : "bezier" }}}}]                 
    });

    series.marker.dataLabel.connectorLine.width number

    Width of the connector.

    Default Value

    • 0.5

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{connectorLine :{ color : "red" }}}}]                 
    });

    ### series.marker.dataLabel.connectorLine.height number

    Height of the connector.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{connectorLine :{ height : 10 }}}}]                 
    });

    series.marker.dataLabel.fill string

    Background color of the data label.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{ font :{color : "red"}}}}]               
    });

    series.marker.dataLabel.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{font :{ fontStyle : "italic" }}}}]                 
    });

    series.marker.dataLabel.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{font : { fontWeight : "lighter" }}}}]                 
    });

    series.marker.dataLabel.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{horizontalTextAlignment : "far"}}}]                  
    });

    series.marker.dataLabel.margin object

    Margin of the text to its background shape. The size of the background shape increases based on the margin applied to its text.

    series.marker.dataLabel.margin.bottom number

    Bottom margin of the text.

    Default Value

    • 5

    Example

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

    series.marker.dataLabel.margin.left number

    Left margin of the text.

    Default Value

    • 5

    Example

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

    series.marker.dataLabel.margin.right number

    Right margin of the text.

    Default Value

    • 5

    Example

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

    series.marker.dataLabel.margin.top number

    Top margin of the text.

    Default Value

    • 5

    Example

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

    Try it: JS Playground Sample

    series.marker.dataLabel.opacity number

    Opacity of the data label.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{textPosition : "bottom"}}}]                 
    });

    series.marker.dataLabel.verticalTextAlignment enum

    Vertical alignment of the data label.

    Default Value

    • ‘center’

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{dataLabel :{template : "item"}}}]                  
    });

    Try it: JS Playground Sample

    series.marker.dataLabel.offset object|number

    Options for customizing the datalabel positions

    series.marker.dataLabel.offset.x number

    X value or horizontal offset to position the labels in chart.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       series :[{  marker :{dataLabel :{offset : { x:10 }}} }]                    
    
    });

    series.marker.dataLabel.offset.y number

    Y value or vertical offset to position the labels.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    
       series :[{  marker :{dataLabel :{offset : { y:10 }}} }]                  
    
    });

    series.marker.fill string

    Color of the marker shape.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{ imageUrl: "../images/sample.png"}}]                  
    });

    series.marker.opacity number

    Opacity of the marker.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{marker :{ shape: "rectangle"}]                  
    });

    Try it: JS Playground Sample

    series.marker.size object

    Options for customizing the size of the marker shape.

    series.marker.size.height number

    Height of the marker.

    Default Value

    • 6

    Example

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

    series.marker.size.width number

    Width of the marker.

    Default Value

    • 6

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
       series : [{name: "India" }]                   
    });

    series.opacity number

    Opacity of the series.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{outlierSettings :{ shape: "rectangle"}]                  
    });

    series.outlierSettings.size object

    Options for customizing the size of the outlier shape.

    series.outlierSettings.size.height number

    Height of the outlier shape.

    Default Value

    • 6

    Example

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

    series.outlierSettings.size.width number

    Width of the outlier shape.

    Default Value

    • 6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{palette : "ColorFieldName"}]                  
    });

    series.pieCoefficient number

    Controls the size of pie series. Value ranges from 0 to 1.

    Default Value

    • 0.8

    Example

  • JS
  • $("#container").ejChart({
    series : [{pieCoefficient : 0.6 }]                   
    });

    Try it: JS Playground Sample

    series.pieOfPieCoefficient number

    Controls the size of the second pie in pieOfPie series. Value ranges from 0 to 1.

    Default Value

    • 0.6

    Example

  • JS
  • $("#container").ejChart({
    series : [{pieOfPieCoefficient : 0.8 }]                   
    });

    series.splitValue string

    Split Value of pieOfPie series.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    series : [{splitValue: "40" }]                   
    });

    series.gapWidth number

    Distance between the two pie’s in pieOfPie series.

    Default Value

    • 50

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{
          emptyPointSettings: {
    
               style: { border: { color : "red" } }
           } 
        }]                   
    });

    series.emptyPointSettings.style.border.width number

    Border width of the empty point.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{
                    positiveFill : Red
        }]                   
    });

    Try it: JS Playground Sample

    series.connectorLine object

    Options for customizing the waterfall connector line.

    Try it: JS Playground Sample

    series.connectorLine.width number

    Width of the connector line.

    Default Value

    • 1

    Example

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

    series.connectorLine.color string

    Color of the connector line.

    Default Value

    • “#565656”

    Example

  • JS
  • $("#container").ejChart({
        series : [{
                 connectorLine: {color : "grey" }
        }]                   
    });

    series.connectorLine.dashArray string

    DashArray of the connector line.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
        series : [{
                 connectorLine: {dashArray : "2,3" }
        }]                   
    });

    series.connectorLine.opacity number

    Opacity of the connector line.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        series : [{
              dragSettings:{enable: true}
        }]                  
    });

    series.dragSettings.type string

    Specifies the type of drag settings.

    Default Value

    • “xy”

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        series : [{
              errorBar:{direction: "plus"}
        }]                   
    });

    Try it: JS Playground Sample

    series.errorBar.verticalErrorValue number

    Value of vertical error bar.

    Default Value

    • 3

    Example

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

    Try it: JS Playground Sample

    series.errorBar.horizontalErrorValue number

    Value of horizontal error bar.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    series.errorBar.horizontalPositiveErrorValue number

    Value of positive horizontal error bar.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    series.errorBar.horizontalNegativeErrorValue number

    Value of negative horizontal error bar.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    series.errorBar.verticalPositiveErrorValue number

    Value of positive vertical error bar.

    Default Value

    • 5

    Example

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

    Try it: JS Playground Sample

    series.errorBar.verticalNegativeErrorValue number

    Value of negative vertical error bar.

    Default Value

    • 5

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        series : [{
            errorBar:{       
               fill:red
            }
    
        }]                   
    });

    Try it: JS Playground Sample

    series.errorBar.width number

    Width of the error bar.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
        series : [{
           errorBar:{       
             cap:{visible:false}
            }
        }]                   
    });

    series.errorBar.cap.width number

    Width of the error bar cap.

    Default Value

    • 1

    Example

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

    series.errorBar.cap.length number

    Length of the error bar cap.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
        series : [{
           errorBar:{       
             cap:{length: 10}
            }
        }]                   
    });

    series.errorBar.cap.fill string

    Color of the error bar cap.

    Default Value

    • “#000000”

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ border:{color : "green"} }] }]                  
    });

    series.points.border.width number

    Border width of the point.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker:{border:{color : "green"}} }] }]                  
    });

    series.points.marker.border.width number

    Border width of the marker shape.

    Default Value

    • 3

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{border : {color : "green"}}} }] }]                 
    });

    series.points.marker.dataLabel.border.width number

    Border width of the data label.

    Default Value

    • 0.1

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{connectorLine :{ type : "bezier" }}} }] }]                 
    });

    series.points.marker.dataLabel.connectorLine.width number

    Width of the connector.

    Default Value

    • 0.5

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{marker :{dataLabel :{ font :{fontFamily : "algerian"}}}}]}]                 
    });

    series.points.marker.dataLabel.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    series :[{points:[{marker :{dataLabel :{font :{ fontStyle : "italic" }}}}]}]                 
    });

    series.points.marker.dataLabel.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{font : { fontWeight : "lighter" }}}}] }]                 
    });

    series.points.marker.dataLabel.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{horizontalTextAlignment : "far"}}}] }]                  
    });

    series.points.marker.dataLabel.margin object

    Margin of the text to its background shape. The size of the background shape increases based on the margin applied to its text.

    series.points.marker.dataLabel.margin.bottom number

    Bottom margin of the text.

    Default Value

    • 5

    Example

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

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

    Left margin of the text.

    Default Value

    • 5

    Example

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

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

    Right margin of the text.

    Default Value

    • 5

    Example

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

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

    Top margin of the text.

    Default Value

    • 5

    Example

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

    Try it: JS Playground Sample

    series.points.marker.dataLabel.opacity number

    Opacity of the data label.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#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

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{textPosition : "bottom"}}}] }]                 
    });

    series.points.marker.dataLabel.verticalTextAlignment enum

    Vertical alignment of the data label.

    Default Value

    • ‘center’

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{template : "item"}}}] }]                  
    });

    Try it: JS Playground Sample

    series.points.marker.dataLabel.offset number

    Moves the label vertically by specified offset.

    Default Value

    • 0

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{dataLabel :{offset : 10}}}] }]                  
    });

    series.points.marker.fill string

    Color of the marker shape.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{ imageUrl: "../images/sample.png"}}] }]                  
    });

    series.points.marker.opacity number

    Opacity of the marker.

    Default Value

    • 1

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ marker :{ shape: "rectangle"}] }]                  
    });

    Try it: JS Playground Sample

    series.points.marker.size object

    Options for customizing the size of the marker shape.

    series.points.marker.size.height number

    Height of the marker.

    Default Value

    • 6

    Example

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

    series.points.marker.size.width number

    Width of the marker.

    Default Value

    • 6

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ open : 30 }] }]                  
    });

    series.points.text string

    Datalabel text for the point.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ text : "20%" }] }]                  
    });

    series.points.x number

    X value of the point.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ x : 1 }] }]                  
    });

    series.points.y number

    Y value of the point.

    Default Value

    • null

    Example

  • JS
  • $("#container").ejChart({
    series :[{ points:[{ y : 20 }] }]                  
    });

    series.pyramidMode enum

    Specifies the mode of the pyramid series.

    Default Value

    • “linear”

    Example

  • JS
  • $("#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

  • JS
  • 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

  • JS
  • $("#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

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

    series.cornerRadius.topLeft number

    Specifies the radius for the top left corner.

    Default Value

    • 0

    Example

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

    series.cornerRadius.topRight number

    Specifies the radius for the top right corner.

    Default Value

    • 0

    Example

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

    series.cornerRadius.bottomLeft number

    Specifies the radius for the bottom left corner.

    Default Value

    • 0

    Example

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

    series.cornerRadius.bottomRight number

    Specifies the radius for the bottom right corner.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{tooltip : {border : { color :"green"} }]                   
    });

    series.tooltip.border.width number

    Border Width of the tooltip.

    Default Value

    • 1

    Example

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

    series.tooltip.rx number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#container").ejChart({
    series :[{
        tooltip :{ry: 10}
        }]                 
    });

    Try it: JS Playground Sample

    series.tooltip.ry number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{tooltip : { enableAnimation: false }]                   
    });

    series.tooltip.fill string

    Background color of the tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • <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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series : [{type : "column" }]                   
    });

    Try it: JS Playground Sample

    series.visibility string

    Controls the visibility of the series.

    Default Value

    • “visible”

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
       series : [{pointColorMappingName: "color" }]                   
    });

    ### series.zOrder number

    Z-order of the series.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{trendlines:[{ visibility:'visible' }]}]                  
    });

    series.trendlines.type string

    Specifies the type of trendline for the series.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{trendlines:[{ name:'Trendline' }]}]                  
    });

    series.trendlines.fill string

    Fill color of the trendlines.

    Default Value

    • “#0000FF”

    Example

  • JS
  • $("#container").ejChart({
    series :[{trendlines:[{ fill:'#0000FF' }]}]                  
    });

    series.trendlines.width number

    Width of the trendlines.

    Default Value

    • 1

    Example

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

    series.trendlines.opacity number

    Opacity of the trendline.

    Default Value

    • 1

    Example

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

    series.trendlines.dashArray string

    Pattern of dashes and gaps used to stroke the trendline.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    series :[{trendlines:[{ dashArray:"" }]}]                  
    });

    series.trendlines.forwardForecast number

    Future trends of the current series.

    Default Value

    • 0

    Example

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

    series.trendlines.backwardForecast number

    Past trends of the current series.

    Default Value

    • 0

    Example

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

    Try it: JS Playground Sample

    series.trendlines.polynomialOrder number

    Specifies the order of polynomial trendlines.

    Default Value

    • 0

    Example

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

    Try it: JS Playground Sample

    series.trendlines.period number

    Specifies the moving average starting period value.

    Default Value

    • 2

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({        
    series :[{ trendlines:[{ tooltip :{border:{ color : "green" }} }]}]                  
    });

    series.trendlines.tooltip.border.width number

    Border width of the trendline tooltip.

    Default Value

    • 1

    Example

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

    Try it: JS Playground Sample

    series.trendlines.tooltip.rx number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#container").ejChart({
    series :[{ trendlines:[{ tooltip :{rx: 10} }]}]                  
    });

    Try it: JS Playground Sample

    series.trendlines.tooltip.ry number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ trendlines:[{ tooltip :{enableAnimation : false} }]}]                   
    });

    series.trendlines.tooltip.fill string

    Background color of the trendline tooltip.

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{ trendlines:[{ tooltip :{format : "#point.x# : #point.y#%"} }]}]                  
    });

    Try it: JS Playground Sample

    series.trendlines.tooltip.opacity number

    Opacity of the trendline tooltip.

    Default Value

    • 0.5

    Example

  • JS
  • $("#container").ejChart({
    series :[{ trendlines:[{ tooltip :{opacity : 0.5} }]}]                 
    });

    series.trendlines.visibleOnLegend string

    Show/hides the trendline legend.

    Default Value

    • visible

    Example

  • JS
  • $("#container").ejChart({
    series :[{trendlines:[{ visibleOnLegend:'hidden' }]}]                  
    });

    series.trendlines.intercept number

    Specifies the trendline intercept value

    Default Value

    • null

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{highlightSettings:{mode:"point"}}]                  
    });

    series.highlightSettings.color string

    Color of the series/point on highlight.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    series :[{highlightSettings:{color:"red"}}]                  
    });

    series.highlightSettings.opacity number

    Opacity of the series/point on highlight.

    Default Value

    • 0.6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{highlightSettings:{border:{color:"black"}}}]                  
    });

    series.highlightSettings.border.width string

    Border width of the series/point on highlight.

    Default Value

    • 2

    Example

  • JS
  • $("#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

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
         series: [{
          selectionSettings:{
                  rangeType : 'x'
                 }
    	  }]
      });

    series.selectionSettings.color string

    Color of the series/point on selection.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    series :[{selectionSettings:{color:"red"}}]                  
    });

    series.selectionSettings.opacity number

    Opacity of the series/point on selection.

    Default Value

    • 0.6

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    series :[{selectionSettings:{border:{color:"black"}}}]                  
    });

    series.selectionSettings.border.width string

    Border width of the series/point on selection.

    Default Value

    • 2

    Example

  • JS
  • $("#container").ejChart({
    series :[{selectionSettings:{border:{width:1}}}]                  
    });

    series.selectionSettings.pattern string

    Specifies the pattern for the series/point on selection.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       theme : "flatdark"            
    
    });

    Try it: JS Playground Sample

    tilt number

    Slope angle of 3D Chart. This property is applicable only when 3D view is enabled.

    Default Value

    • 0

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       title : { background : "red" }                     
    
    });

    Try it: JS Playground Sample

    title.border object

    Options to customize the border of the title.

    Try it: JS Playground Sample

    title.border.width number

    Width of the title border.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
              border : { width:1}
          }  
                         
    
    });

    title.border.color string

    color of the title border.

    Default Value

    • “transparent”

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
              border : { color: "black"}
          }  
                         
    
    });

    title.border.opacity number

    opacity of the title border.

    Default Value

    • 0.8

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
              border : { opacity: 1 }
          }  
                         
    
    });

    title.border.cornerRadius number

    opacity of the title border.

    Default Value

    • 0.8

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       title : { font : { fontFamily : "Algerian" } }                     
    
    });

    title.font.fontStyle enum

    Font style for Chart title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       title : { font : { fontStyle : "italic" } }                     
    
    });

    title.font.fontWeight enum

    Font weight for Chart title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       title : { font : { fontWeight : "lighter" } }                     
    
    });

    title.font.opacity number

    Opacity of the Chart title.

    Default Value

    • 0.5

    Example

  • JS
  • $("#container").ejChart({
    
       title : { font : { opacity : 0.8 } }                     
    
    });

    title.font.size string

    Font size for Chart title.

    Default Value

    • “20px”

    Example

  • JS
  • $("#container").ejChart({
    
       title : { font : { size : "22px" } }                     
    
    });

    title.visible boolean

    Controls the visibility of the Chart title

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       title: {subTitle : {font :{ fontFamily : "Algerian" } } }                      
    
    });

    title.subTitle.font.fontStyle enum

    Font style for sub title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ fontStyle : "Normal" } } }                     
    
    });

    title.subTitle.font.fontWeight enum

    Font weight for sub title.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ fontWeight : "regular" } } }                     
    
    });

    title.subTitle.font.opacity number

    Opacity of the sub title.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ opacity : 0.5 } } }                     
    
    });

    title.subTitle.font.size string

    Font size for sub title.

    Default Value

    • “12px”

    Example

  • JS
  • $("#container").ejChart({
    
       title: { subTitle : {font :{ size : "14px" } } }                     
    
    });

    title.subTitle.background string

    Background color for the chart subtitle.

    Default Value

    • “transparent”

    Example

  • JS
  • $("#container").ejChart({
    
       title : {  subTitle:{ background : "red" } }                     
    
    });

    Try it: JS Playground Sample

    title.subTitle.border object

    Options to customize the border of the title.

    Try it: JS Playground Sample

    title.subTitle.border.width number

    Width of the subtitle border.

    Default Value

    • 1

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
             subTitle:{ border : { width:1} }
          }  
                         
    
    });

    title.subTitle.border.color string

    color of the subtitle border.

    Default Value

    • “transparent”

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
             subTitle:{ border : { color: "black"}}
          }  
                         
    
    });

    title.subTitle.border.opacity number

    opacity of the subtitle border.

    Default Value

    • 0.8

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
              subTitle:{ border : { opacity: 1 } }
          }  
                         
    
    });

    title.subTitle.border.cornerRadius number

    opacity of the subtitle border.

    Default Value

    • 0.8

    Example

  • JS
  • $("#container").ejChart({
    
           title:{ 
             subTitle:{  border : { cornerRadius: 2 } }
          }  
                         
    
    });

    title.subTitle.text string

    Text to be displayed in sub title.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
       title: { subTitle: { text : "Performance chart" } }                      
    
    });

    Try it: JS Playground Sample

    title.subTitle.textAlignment enum

    Alignment of sub title text.

    Default Value

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       title : { subTitle: { textOverflow : "trim" }  }                   
    
    });

    title.text string

    Text to be displayed in Chart title.

    Default Value

    • ””

    Example

  • JS
  • $("#container").ejChart({
    
       title : { text : "Power Production"}                     
    
    });

    Try it: JS Playground Sample

    title.textAlignment enum

    Alignment of the title text.

    Default Value

    Example

  • JS
  • $("#container").ejChart({
    
       title : { textAlignment : "near"}                     
    
    });

    Try it: JS Playground Sample

    wallSize number

    Width of the wall used in 3D Chart. Wall is present only in Cartesian type 3D series and not in 3D pie or Doughnut series. This property is applicable only when 3D view is enabled.

    Default Value

    • 2

    Example

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       zooming :{enable :true}          
    
    });

    zooming.enablePinching boolean

    Enables or disables pinch zooming.

    Default Value

    • true

    Example

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#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

  • JS
  • $("#container").ejChart({
    
       zooming :{ enableScrollbar : true }            
    
    });

    zooming.toolbarItems array

    To display user specified buttons in zooming toolbar.

    Default Value

    • [“zoomIn”, “zoomOut”, “zoom”, “pan”, “reset”]

    Example

  • JS
  • $("#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

  • JS
  • // 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.

  • JS
  • // 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

  • JS
  • // Redraw Chart
    var chartObj = $("#container").data("ejChart");
    chartObj.redraw();
  • JS
  • $("#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:

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //scrollbarChanged event for chart
    $("#container").ejChart({
       scrollEnd: function (args) {}
    });

    dragStart

    Fires when the dragging is started

    Example

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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

  • JS
  • //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