ejChart

3 Oct 201724 minutes to read

Essential chart can be easily configured to the DOM element, such as div. You can create a Chart with highly customizable look and feel.

Example

Requires

  • module:jQuery.js

  • module:ej.core.js

  • module:ej.data.js

  • module:ej.chart.js

  • module:jQuery.globalize.js

Members

annotations array

Options for adding and customizing annotations in Chart.

NOTE

Annotations are not supported in 3D chart types.

annotations.angle number

Angle to rotate the annotation in degrees.

Default Value

  • ‘0’

Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-annotations>
        <e-annotation [angle]="270"></e-annotation>
    </e-annotations>
    </ej-chart>

    annotations.content string

    Text content or id of a HTML element to be displayed as annotation.

    Default Value

    • ””

    Example

  • HTML
  • <div id= "watermark" style="font-size:100px; display:none">2014</div>
    
    <ej-chart id="chartcontainer">
    <e-annotations>
        <e-annotation content="watermark">
        </e-annotation>
    </e-annotations>
    </ej-chart>

    annotations.coordinateUnit enum

    Specifies how annotations have to be placed in Chart.

    Name Type Description
    None string Place the annotation to the center of the chart.
    Pixels string To place the annotation based on the pixel.
    Points string To place the annotation based on the points

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
        <!--Change coordinateUnit type to pixels-->
            <e-annotation coordinateUnit="pixels"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.horizontalAlignment enum

    Specifies the horizontal alignment of the annotation.

    Name Type Description
    Left string To place the annotation on left side .
    Right string To place the annotation on right side.
    Middle string To place the annotation to the middle of the chart.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation horizontalAlignment="far"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.margin object

    Options to customize the margin of annotation.

    annotations.margin.bottom number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation margin-bottom="40"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.margin.left number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <!--Change alignment of annotation template-->
            <e-annotation margin-left="40"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.margin.right number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation margin-right="40"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.margin.top number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation margin-top="40"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.opacity number

    Controls the opacity of the annotation.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
        <e-annotation [opacity]=0.2></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.region enum

    Specifies whether annotation has to be placed with respect to chart or series.

    Name Type Description
    Chart string Place the annotation with respect to chart.
    Series string Place the annotation with respect to series.

    Default Value

    Example

  • HTML
  • <div id= "watermark" style="font-size:100px; display:none">2014</div>
    
    <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation region="series"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.verticalAlignment enum

    Specifies the vertical alignment of the annotation.

    Name Type Description
    Top string Place the annotation to the top of the chart.
    Bottom string Place the annotation to the bottom of the chart.
    Middle string Place the annotation to the middle of the chart.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <!--Change alignment of annotation template-->
            <e-annotation verticalAlignment="middle"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.visible boolean

    Controls the visibility of the annotation.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation [visible]="true"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.x number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-annotations>
       
    <e-annotation [x]="170"></e-annotation>
    
    </e-annotations>
    </ej-chart>

    annotations.xAxisName string

    Name of the horizontal axis to be used for positioning the annotation. This property is applicable only when coordinateUnit is points.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation xAxisName="xAxis1"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.y number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation [y]="350"></e-annotation>
        </e-annotations>
    </ej-chart>

    annotations.yAxisName string

    Name of the vertical axis to be used for positioning the annotation.
    This property is applicable only when coordinateUnit is points.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer">
        <e-annotations>
            <e-annotation xAxisName="yAxis1"></e-annotation>        
        </e-annotations>
    </ej-chart>

    background string

    Sets the background color of the chart.

    Default Value

    • transparent

    Example

  • HTML
  • <ej-chart id="chartcontainer"  chartArea.background="skyblue"></ej-chart>

    backGroundImageUrl string

    URL of the image to be used as chart background.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  backGroundImageUrl="wheat.png">
    </ej-chart>

    border object

    Options for customizing the color, opacity and width of the chart border.

    border.color string

    Border color of the chart.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  border.color="green">
    </ej-chart>

    border.opacity number

    Opacity of the chart border.

    Default Value

    • 0.3

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [border.opacity]= 0.5>
    </ej-chart>

    border.width number

    Width of the Chart border.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [border.width]=2>
    </ej-chart>

    exportSettings object

    This provides options for customizing export settings

    exportSettings.filename string

    Specifies the downloading filename

    Default Value

    • “chart”

    Example

  • HTML
  • <ej-chart id="chartcontainer"  exportSettings.fileName="ChartSnapshot">
    </ej-chart>

    exportSettings.action string

    Specifies the name of the action URL

    Default Value

    • ””

    Example

  • HTML
  • <!--Chart download link-->
       
    <ej-chart id="chartcontainer" exportSettings.action="http://js.syncfusion.com/ExportingServices/api/JSChartExport/Export">
    </ej-chart>

    exportSettings.angle number

    Specifies the angle for rotation

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [exportSettings.angle]=180>
    </ej-chart>

    exportSettings.type enum

    Specifies the format of the file to export

    Name Type Description
    PNG string The chart will be exported in .png format
    JPG string The chart will be exported in .jpg format
    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

  • HTML
  • <ej-chart id="chartcontainer" exportSettings.type="jpg">
    </ej-chart>

    exportSettings.orientation enum

    Specifies the orientation of the document

    Name Type Description
    Portrait string The Chart is exported in portrait for .doc type
    Landscape string The Chart is exported in landscape for .doc type

    Default Value

    • “portrait”

    Example

  • HTML
  • <ej-chart id="chartcontainer" exportSettings.orientation="landscape">
    </ej-chart>

    exportSettings.mode enum

    Specifies the mode of exporting

    Name Type Description
    Server Side string The Chart is exported at server side
    Client Side string The Chart is exported at client side

    Default Value

    • “client”

    Example

  • HTML
  • <ej-chart id="chartcontainer"  exportSettings.mode="client">
    </ej-chart>

    exportSettings.multipleExport boolean

    Enable/ disable the multiple excel exporting

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [exportSettings.multipleExport]="true">
    </ej-chart>

    chartArea object

    Options for configuring the border and background of the plot area.

    chartArea.background string

    Background color of the plot area.

    Default Value

    • transparent

    Example

  • HTML
  • <ej-chart id="chartcontainer"  chartArea.background ="white">
    </ej-chart>

    chartArea.border object

    Options for customizing the border of the plot area.

    chartArea.border.color string

    Border color of the plot area.

    Default Value

    • Gray

    Example

  • HTML
  • <ej-chart id="chartcontainer"  chartArea.border.color ="green">
    </ej-chart>

    chartArea.border.opacity number

    Opacity of the plot area border.

    Default Value

    • 0.3

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [chartArea.border.opacity] =0.5>
    </ej-chart>

    chartArea.border.width number

    Border width of the plot area.

    Default Value

    • 0.5

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [chartArea.border.width] =2>
    </ej-chart>

    columnDefinitions array

    Options to split Chart into multiple plotting areas vertically. Each object in the collection represents a plotting area in Chart.

    columnDefinitions.unit enum

    Specifies the unit to measure the width of the column in plotting area.

    Name Type Description
    Percentage string Specifies the width of the column in percentage.
    Pixel string Specifies the width of the column in pixel.

    Default Value

    • ‘pixel’. See Unit

    Example

    COLUMNDEFINITIONS.UNIT

    columnDefinitions.columnWidth number

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

    Default Value

    • 50

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [columnDefinitions] ="{columnWidth:50}">
    </ej-chart>

    columnDefinitions.lineColor string

    Color of the line that indicates the starting point of the column in plotting area.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [columnDefinitions] ="{lineColor:'green'}">
    </ej-chart>

    columnDefinitions.lineWidth number

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

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [columnDefinitions] ="{lineWidth:2}">
    </ej-chart>

    commonSeriesOptions object

    Options for configuring the properties of all the series. You can also override the options for specific series by using series collection.

    commonSeriesOptions.border object

    Options to customize the border of all the series.

    commonSeriesOptions.border.color string

    Border color of all series.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.border.color="green">     
    </ej-chart>

    commonSeriesOptions.border.dashArray string

    DashArray for border of the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.border.dashArray='2,3'>
         <e-seriescollection><e-series type="column"></e-series>
         </e-seriescollection>
    </ej-chart>

    commonSeriesOptions.border.width number

    Border width of all series.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.border.width=5>
         <e-seriescollection><e-series type="column"></e-seriescollection>
         </e-seriescollection>
    </ej-chart>

    commonSeriesOptions.columnFacet enum

    To render the column and bar type series in rectangle/cylinder shape. See ColumnFacet

    Name Type Description
    Rectangle string Draw column and bar series in rectangle shape
    Cylinder string Draw column and bar series in cylinder shape

    Default Value

    • “rectangle”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.columnFacet="cylinder">    
    </ej-chart>

    commonSeriesOptions.columnWidth number

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

    Default Value

    • 0.7

    Example

  • HTML
  • <!-- Width of columns in column type series-->
    <ej-chart id="chartcontainer" [commonSeriesOptions.columnWidth]=0.7>     
    </ej-chart>

    commonSeriesOptions.columnSpacing number

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

    Default Value

    • 0

    Example

  • HTML
  • <!-- Width of columns in column type series-->
    <ej-chart id="chartcontainer" [commonSeriesOptions.columnWidth]=0.7>    
    </ej-chart>

    commonSeriesOptions.visibleOnLegend string

    Enables or disables the visibility of legend item.

    Default Value

    • “visible”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.visibleOnLegend = "hidden">    
    </ej-chart>

    commonSeriesOptions.stackingGroup string

    Group of the stacking collection series.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container" commonSeriesOptions.stackingGroup =" ">
    </ej-chart>

    commonSeriesOptions.dashArray string

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

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.dashArray='2,3'>    
    </ej-chart>

    commonSeriesOptions.dataSource object

    Set the dataSource for all series. It can be an array of JSON objects or an instance of ej.DataManager.

    Default Value

    • null

    Example

  • TS
  • this.chartData = [
             { month: 'Jan', sales: 35},
             { month: 'Feb', sales: 28},
             { month: 'Mar', sales: 34},
             { month: 'Apr', sales: 32},
            // ...     
    ];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.dataSource] = "chartData"></ej-chart>

    commonSeriesOptions.doughnutCoefficient number

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

    Default Value

    • 0.4

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.doughnutCoefficient]="0.5">    
    </ej-chart>

    commonSeriesOptions.doughnutSize number

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

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.doughnutSize] = "0.9">
       </ej-chart>

    commonSeriesOptions.drawType enum

    Specifies the type of series to be drawn in radar or polar series.

    Name Type Description
    Line string Line type series will be drawn.
    Area string Area type series will be drawn.
    Column string Column type series will be drawn.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.drawType ="column">    
    </ej-chart>

    commonSeriesOptions.enableAnimation boolean

    Enable/disable the animation for all the series.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.enableAnimation]="true">    
    
    </ej-chart>

    commonSeriesOptions.enableSmartLabels boolean

    To avoid overlapping of data labels smartly.

    Default Value

    • true

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
                visible: true,
                shape: 'none',
                connectorLine: { type: 'bezier', color: 'black' },
                font: { size: '14px' }
        }};
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.enableSmartLabels]="true" [commonSeriesOptions.marker]="dataMarker" >    
    
    </ej-chart>

    commonSeriesOptions.endAngle number

    Start angle of pie/doughnut series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.endAngle]=270>    
    
    </ej-chart>

    commonSeriesOptions.explode boolean

    Explodes the pie/doughnut slices on mouse move.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.explode]="true">     
    </ej-chart>

    commonSeriesOptions.explodeAll boolean

    Explodes all the slice of pie/doughnut on render.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.explodeAll]="true">     
    </ej-chart>

    commonSeriesOptions.explodeIndex number

    Index of the point to be exploded from pie/doughnut/pyramid/funnel.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.explodeIndex]=2>     
    </ej-chart>

    commonSeriesOptions.explodeOffset number

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

    Default Value

    • 0.4

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.explodeOffset]=20>     
    </ej-chart>

    commonSeriesOptions.fill string

    Fill color for all the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.fill="green">     
    </ej-chart>

    commonSeriesOptions.font object

    Options for customizing the font of all the series.

    commonSeriesOptions.font.color string

    Font color of the text in all series.

    Default Value

    • “#707070”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.font]="{color:'green'}">     
    </ej-chart>

    commonSeriesOptions.font.fontFamily string

    Font Family for all the series.

    Default Value

    • “Segoe UI”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.font]="{fontFamily:'Algerian'}">     
    </ej-chart>

    commonSeriesOptions.font.fontStyle enum

    Specifies the font Style for all the series.

    Name Type Description
    Normal string Specifies the fontStyle as normal.
    Italic string Specifies the fontStyle as italic.

    Default Value

    • “normal”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.font]="{fontStyle:'italic'}">     
    </ej-chart>

    commonSeriesOptions.font.fontWeight enum

    Specifies the font weight for all the series.

    Name Type Description
    Regular string Specifies the font weight as regular.
    Bold string Specifies the font weight as bold.
    Lighter string Specifies the font weight as lighter.

    Default Value

    • “regular”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.font]="{fontWeight:'lighter'}">     
    </ej-chart>

    commonSeriesOptions.font.opacity number

    Opacity for text in all the series.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.font]="{opacity:0.5}">     
    </ej-chart>

    commonSeriesOptions.font.size string

    Font size for text in all the series.

    Default Value

    • “12px”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { size: '14px' }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.funnelHeight string

    Sets the height of the funnel in funnel series. Values can be either pixel or percentage.

    Default Value

    • “32.7%”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.funnelHeight="40%">     
    </ej-chart>

    commonSeriesOptions.funnelWidth string

    Sets the width of the funnel in funnel series. Values can be either pixel or percentage.

    Default Value

    • “11.6%”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.funnelWidth="40%">     
    </ej-chart>

    commonSeriesOptions.gapRatio number

    Gap between the slices in pyramid and funnel series.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.gapRatio]=0.5>     
    </ej-chart>

    commonSeriesOptions.isClosed boolean

    Specifies whether to join start and end point of a line/area series used in polar/radar chart to form a closed path.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.isClosed]="false" >
    </ej-chart>

    commonSeriesOptions.isStacking boolean

    Specifies whether to stack the column series in polar/radar charts.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.isStacking]="true" >
    </ej-chart>

    commonSeriesOptions.isTransposed boolean

    Renders the chart vertically. This is applicable only for Cartesian type series.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.isTransposed]="false" >
    </ej-chart>

    commonSeriesOptions.showMedian boolean

    Render the x mark in the center of the box and whisker series type.x represents the average value of the box and whisker series.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="container" commonSeriesOptions.showMedian="true" >
    </ej-chart>

    commonSeriesOptions.labelPosition enum

    Position of the data label in pie/doughnut/pyramid/funnel series. OutsideExtended position is not applicable for pyramid/funnel.

    Name Type Description
    Inside string To place the datalabel inside the chart.
    Outside string To place the datalabel outside the chart.
    OutsideExtended string To place the datalabel at the extend of the chart.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            visible: true,       
            // ...
        }
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" commonSeriesOptions.labelPosition="outside" >
    </ej-chart>

    commonSeriesOptions.splitMode enum

    Specifies the mode for splitting the data points in pieOfPie series.

    Name Type Description
    Position string Splitting the data points based on the specified position value.
    Value string Splitting the data points based on the specified Y value.
    Percentage string Splitting the data points based on the specified percentage value.
    Indexes string The data points with the specified indexes are get splitted.

    Default Value

    Example

  • HTML
  • <ej-chart id="container" commonSeriesOptions.splitMode="position" >
    </ej-chart>

    commonSeriesOptions.boxPlotMode enum

    Quartile calculation has been performed in three different formulas to render the box and whisker series.

    Name Type Description
    Exclusive string To render the series with exclusive calculations
    Inclusive string To render the series with inclusive calculations
    Normal string To render the series with normal calculations

    Default Value

    • “exclusive”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
            <e-seriescollection>
                <e-series boxPlotMode="inclusive"></e-series>
            </e-seriescollection>
    </ej-chart>

    commonSeriesOptions.bubbleOptions object

    Options for customizing the bubble options of the Bubble series

    commonSeriesOptions.bubbleOptions.radiusMode enum

    Used for the calculation of the bubble radius based on the mode selected

    Name Type Description
    MinMax string To render the bubble based on the Minimum and Maximum radius
    Auto string To render the bubble based on the Range and Size of the Chart

    Default Value

    • “minmax”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.bubbleOptions.radiusMode="minMax">
    </ej-chart>

    commonSeriesOptions.bubbleOptions.minRadius number

    Used for the setting the minimum radius of the bubble

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.bubbleOptions.minRadius]= 10>
    </ej-chart>

    commonSeriesOptions.bubbleOptions.maxRadius number

    Used for setting the maximum radius of the bubble

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.bubbleOptions.maxRadius]= 10>
    </ej-chart>

    commonSeriesOptions.lineCap enum

    Specifies the line cap of the series.

    Name Type Description
    Butt string Specifies the line cap of the series to butt.
    Round string Specifies the line cap of the series to round.
    Square string Specifies the line cap of the series to square.

    Default Value

    Example

  • HTML
  • <ej-chart id="container"  commonSeriesOptions.lineCap="butt" >
    </ej-chart>

    commonSeriesOptions.lineJoin enum

    Specifies the type of shape to be used where two lines meet.

    Name Type Description
    Round string Line join will be round.
    Bevel string Line join will be bevel.
    Miter string Line join will be miter.

    Default Value

    Example

  • HTML
  • <ej-chart id="container"  commonSeriesOptions.lineJoin="round" >
    </ej-chart>

    commonSeriesOptions.marker object

    Options for displaying and customizing marker for individual point in a series. Marker contains shapes and/or data labels.

    commonSeriesOptions.marker.border object

    Options for customizing the border of the marker shape.

    commonSeriesOptions.marker.border.color string

    Border color of the marker shape.

    Default Value

    • “white”

    Example

  • TS
  • this.dataMarker = {
        visible:true,
    
    border:{color:'green'},    
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker">
    </ej-chart>

    commonSeriesOptions.marker.border.width number

    Border width of the marker shape.

    Default Value

    • 3

    Example

  • TS
  • this.dataMarker = {
        visible:true,
    
    border:{width:2},    
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker">
    </ej-chart>

    commonSeriesOptions.marker.dataLabel object

    Options for displaying and customizing data labels.

    commonSeriesOptions.marker.dataLabel.angle number

    Angle of the data label in degrees. Only the text gets rotated, whereas the background and border does not rotate.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            angle:90
    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.maximumLabelWidth number

    Maximum label width of the data label.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           maximumLabelWidth:90    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.enableWrap boolean

    Enable the wrap option to the data label.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            enableWrap:true,        
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.border object

    Options for customizing the border of the data label.

    commonSeriesOptions.marker.dataLabel.border.color string

    Border color of the data label.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            shape:'rectangle',
            border:{color:'green'}
    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.border.width number

    Border width of the data label.

    Default Value

    • 0.1

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            shape:'rectangle',
            border:{width:2}
    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.connectorLine object

    Options for displaying and customizing the line that connects point and data label.

    commonSeriesOptions.marker.dataLabel.connectorLine.type enum

    Specifies when the connector has to be drawn as Bezier curve or straight line. This is applicable only for Pie and Doughnut chart types.

    Name Type Description
    Line string ConnectorLine type is line.
    Bezier string ConnectorLine type is Bezier.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
             connectorLine: { type: 'bezier' }
    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.connectorLine.width number

    Width of the connector.

    Default Value

    • 0.5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
             connectorLine: { width: 2 }
    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.connectorLine.color string

    Color of the connector line.

    Default Value

    • “#565656”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
             connectorLine: { color: 'black' }
    
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

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

    Height of the connector line.

    Default Value

    • null

    Example

    commonSeriesOptions.marker.dataLabel.fill string

    Background color of the data label.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            shape:'rectangle',
            fill:'green',        
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.font object

    Options for customizing the data label font.

    commonSeriesOptions.marker.dataLabel.font.fontFamily string

    Font family of the data label.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { fontFamily: 'Algerian' }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { fontStyle: 'italic' }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { fontWeight: 'lighter' }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { opacity: 0.5 }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.font.color string

    Font color of the data label text.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { color: 'red' }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.font.size string

    Font size of the data label.

    Default Value

    • “12px”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { size: '14px' }       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.horizontalTextAlignment enum

    Horizontal alignment of the data label.

    Name Type Description
    Center string Place the series to the center of the point.
    Near string Place the series to the left of the point.
    Far string Place the annotation to the right of the point.

    Default Value

    • “center”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            horizontalTextAlignment:"far"       
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.margin object

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

    commonSeriesOptions.marker.dataLabel.margin.bottom number

    Bottom margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           margin:{bottom:10}     
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.margin.left number

    Left margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           margin:{left:10}     
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.margin.right number

    Right margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           margin:{right:10}     
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.margin.top number

    Top margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           margin:{top:10}     
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.opacity number

    Opacity of the data label.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           opacity:0.5
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.offset object|number

    Options for customizing the datalabel positions

    commonSeriesOptions.marker.dataLabel.offset.x number

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

    Default Value

    • 0

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           offset:{x:10}
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.offset.y number

    Y value or vertical offset to position the labels.

    Default Value

    • 0

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           offset:{y:10}
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.shape enum

    Background shape of the data label.

    Name Type Description
    None string No shape for the datalabel.
    LeftArrow string Shape of the datalabel will be leftarrow.
    RightArrow string Shape of the datalabel will be rightarrow.
    Circle string Shape of the datalabel will be circle.
    Cross string Shape of the datalabel will be cross.
    HorizLine string Shape of the datalabel will be horizline.
    VertLine string Shape of the datalabel will be vertline.
    Diamond string Shape of the datalabel will be diamond.
    Rectangle string Shape of the datalabel will be rectangle.
    Triangle string Shape of the datalabel will be triangle.
    Hexagon string Shape of the datalabel will be hexagon.
    Pentagon string Shape of the datalabel will be pentagon.
    Star string Shape of the datalabel will be star.
    Ellipse string Shape of the datalabel will be ellipse.
    Trapezoid string Shape of the datalabel will be trapezoid.
    UpArrow string Shape of the datalabel will be uparrow.
    DownArrow string Shape of the datalabel will be downarrow.
    Image string Shape of the datalabel will be image.
    SeriesType string Shape of the datalabel will be SeriesType.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           shape:'circle'
        }   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.template string

    Custom template to format the data label content. Use “point.x” and “point.y” as a placeholder text to display the corresponding data point’s x and y value.

    Default Value

    • ””

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
           visible:true,
           template:'LabelTemplateID'
        }   
    };
  • HTML
  • <div id="LabelTemplateID">
         <div id="left">
    
    <img src="../images/chart/icon_investments.png"/>
         </div>
         <div id="right">
              <div id="point">#point.y#%</div>
         </div>
    </div>
    
    <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.textMappingName string

    Name of a field in data source, where datalabel text is displayed.

    Default Value

    • ””

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{      
           textMappingName:'TextFieldName'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.textPosition enum

    Specifies the position of the data label. This property can be used only for the series such as column, bar, stacked column, stacked bar, 100% stacked column, 100% stacked bar, candle and OHLC.

    Name Type Description
    Top string Place the datalabel to the top of the point.
    Bottom string Place the datalabel to the bottom of the point.
    Middle string Place the datalabel on the point.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          textPosition:'bottom'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.verticalTextAlignment enum

    Vertical alignment of the data label.

    Name Type Description
    Center string Place the datalabel on the point.
    Near string Place the datalabel below the point.
    Far string Place the datalabel away from the point.

    Default Value

    • “center”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          verticalTextAlignment: 'far'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.dataLabel.visible boolean

    Controls the visibility of the data labels.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          visible: true
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.fill string

    Color of the marker shape.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        fill: "green"
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.imageUrl string

    The URL for the Image to be displayed as marker. In order to display image as marker, set series.marker.shape as ‘image’.

    Default Value

    • ””

    Example

  • TS
  • this.dataMarker = {
         imageUrl: "../images/sample.png"
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.opacity number

    Opacity of the marker.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        opacity: 0.5
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.shape enum

    Specifies the shape of the marker.

    Default Value

    • “circle”. See Shape

    Example

  • TS
  • this.dataMarker = {
        shape: "rectangle"
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.marker]="dataMarker">     
    </ej-chart>

    commonSeriesOptions.marker.size object

    Options for customizing the size of the marker shape.

    commonSeriesOptions.marker.size.height number

    Height of the marker.

    Default Value

    • 6

    Example

  • TS
  • this.dataMarker = {    
          size:{height:5}    
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.size.width number

    Width of the marker.

    Default Value

    • 6

    Example

  • TS
  • this.dataMarker = {    
          size:{width:5}    
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.marker.visible boolean

    Controls the visibility of the marker shape.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        visible: true  
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.marker]="dataMarker" >
    </ej-chart>

    commonSeriesOptions.opacity number

    Opacity of the series.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.opacity]=0.5 >
    </ej-chart>

    commonSeriesOptions.outlierSettings object

    Options for customizing the outlier of the series.

    commonSeriesOptions.outlierSettings.shape enum

    Specifies the shape of the outlier.

    Default Value

    • “circle”. See Shape

    Example

  • TS
  • this.outlierSettings = {
        shape:"rectangle"   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.outlierSettings]="outlierSettings">     
    </ej-chart>

    commonSeriesOptions.outlierSettings.size object

    Options for customizing the size of the outlier shape.

    commonSeriesOptions.outlierSettings.size.height number

    Height of the outlier shape.

    Default Value

    • 6

    Example

  • TS
  • this.outlierSettings = {
        size:{
          height: 5
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.outlierSettings]="outlierSettings">     
    </ej-chart>

    commonSeriesOptions.outlierSettings.size.width number

    Width of the outlier shape.

    Default Value

    • 6

    Example

  • TS
  • this.outlierSettings = {
        size:{
          width: 2
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.outlierSettings]="outlierSettings">     
    </ej-chart>

    commonSeriesOptions.palette string

    Name of a field in data source, where the fill color for all the data points is generated.

    Default Value

    • ””

    Example

    commonSeriesOptions.pieCoefficient number

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

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.pieCoefficient]=1>     
    </ej-chart>

    commonSeriesOptions.pieOfPieCoefficient number

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

    Default Value

    • 0.6

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.pieofpiecoefficient]=1>     
    </ej-chart>

    commonSeriesOptions.splitValue string

    Split Value of pieofpie series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.splitvalue]="40">
    </ej-chart>

    commonSeriesOptions.cardinalSplineTension number

    Different values for the tension parameter will produce different curves through a given set of points.Value ranges from 0 to 1.

    Default Value

    • 0.5

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.cardinalSplineTension]= 0.7>
    </ej-chart>

    commonSeriesOptions.splineType enum

    To render the spline series curve in different forms.

    Name Type Description
    Natural string To render the series with natural curve
    Monotonic string To render the series with monotonic curve
    Cardinal string To render the series with cardinal curve
    Clamped string To render the series with clamped curve

    Default Value

    • “natural”

    Example

  • HTML
  • <ej-chart id="container" commonSeriesOptions.splineType="Natural" >
    </ej-chart>

    ### commonSeriesOptions.gapWidth number

    Distance between the two pie’s in pieOfPie series.

    Default Value

    • 50

    Example

    commonSeriesOptions.pointColorMappingName string

    Name of the property in the datasource that contains fill color for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.pointColorMappingName]="colorFieldName">     
    </ej-chart>

    commonSeriesOptions.pyramidMode enum

    Specifies the mode of the pyramid series.

    Name Type Description
    Linear string Specifies the pyramid mode to linear.
    Surface string Specifies the pyramid mode to surface.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.pyramidMode="linear">     
    </ej-chart>

    commonSeriesOptions.startAngle number

    Start angle from where the pie/doughnut series renders. By default it starts from 0.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.startAngle]=150>
    </ej-chart>

    commonSeriesOptions.cornerRadius object

    Options for customizing the corner radius. cornerRadius property also takes the numeric input and applies it for all the four corners of the column.

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius]=20>    
    </ej-chart>

    commonSeriesOptions.cornerRadius.topLeft number

    Specifies the radius for the top left corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.topLeft]=20>     
    </ej-chart>

    commonSeriesOptions.cornerRadius.topRight number

    Specifies the radius for the top right corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.topRight]=20>    
    </ej-chart>

    commonSeriesOptions.cornerRadius.bottomLeft number

    Specifies the radius for the bottom left corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.bottomLeft]=20>     
    </ej-chart>

    commonSeriesOptions.cornerRadius.bottomRight number

    Specifies the radius for the bottom right corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.cornerRadius.bottomRight]=20>    
    </ej-chart>

    commonSeriesOptions.tooltip object

    Options for customizing the tooltip of chart.

    commonSeriesOptions.tooltip.border object

    Options for customizing the border of the tooltip.

    commonSeriesOptions.tooltip.border.color string

    Border color of the tooltip.

    Default Value

    • null

    Example

  • TS
  • this.tooltip = {    
           visible:true,
           border:{color:'green'}    
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
    </ej-chart>

    commonSeriesOptions.tooltip.border.width number

    Border width of the tooltip.

    Default Value

    • 1

    Example

  • TS
  • this.tooltip = {    
           visible:true,
           border:{width:2}    
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
    </ej-chart>

    commonSeriesOptions.tooltip.rx number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="{rx: 10}">
    </ej-chart>

    commonSeriesOptions.tooltip.ry number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="{ry: 10}">
    </ej-chart>

    commonSeriesOptions.tooltip.duration string

    Specifies the duration, the tooltip has to be displayed.

    Default Value

    • “500ms”

    Example

  • TS
  • this.tooltip = {           
           duration:"300ms"   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
    </ej-chart>

    commonSeriesOptions.tooltip.enableAnimation boolean

    Enables/disables the animation of the tooltip when moving from one point to other.

    Default Value

    • true

    Example

  • TS
  • this.tooltip = {           
          enableAnimation: false
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
    </ej-chart>

    commonSeriesOptions.tooltip.fill string

    Background color of the tooltip.

    Default Value

    • null

    Example

  • TS
  • this.tooltip = {           
          fill: 'green'
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
    </ej-chart>

    commonSeriesOptions.tooltip.format string

    Format of the tooltip content.

    Default Value

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

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="{format:'#point.x# : #point.y#%'}" >
    </ej-chart>

    commonSeriesOptions.tooltip.opacity number

    Opacity of the tooltip.

    Default Value

    • 0.5

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="{opacity: 0.5}" >
    </ej-chart>

    commonSeriesOptions.tooltip.template string

    Custom template to format the tooltip content. Use “point.x” and “point.y” as a placeholder text to display the corresponding data point’s x and y value.

    Default Value

    • null

    Example

  • HTML
  • <body>   
        <!-- Create Tooltip template here -->
        <div id="Tooltip" style="display: none;">
            <div id="icon"> 
                <div id="eficon"> </div>  
            </div>
            <div id="value">
                <div>
                   <label id="efpercentage">&nbsp;#point.y#% </label>
                   <label id="ef">Efficiency </label>
                </div>
            </div>
        </div>
    
    <ej-chart id="chart" [commonSeriesOptions.tooltip]="{template:'Tooltip'}">        
    </ej-chart>
    
    </body>

    commonSeriesOptions.tooltip.visible boolean

    Controls the visibility of the tooltip.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart" [commonSeriesOptions.tooltip.visible]="true">        
    </ej-chart>

    commonSeriesOptions.type enum

    Specifies the type of the series to render in chart.

    Name Type Description
    Area string Specifies the series type as area.
    Line string Specifies the series type as line.
    Spline string Specifies the series type as spline.
    Column string Specifies the series type as column.
    Scatter string Specifies the series type as scatter.
    Bubble string Specifies the series type as bubble.
    SplineArea string Specifies the series type as splinearea.
    StepArea string Specifies the series type as steparea.
    StepLine string Specifies the series type as stepline.
    Pie string PSpecifies the series type as pie.
    HiLo string Specifies the series type as HiLo.
    HiLoOpenClose string Specifies the series type as HiLoOpenClose.
    Candle string Specifies the series type as candle.
    Bar string Specifies the series type as bar.
    StackingArea string Specifies the series type as stackingarea.
    StackingArea100 string Specifies the series type as stackingarea100.
    RangeColumn string Specifies the series type as rangecolumn.
    StackingColumn string Specifies the series type as stackingcolumn.
    StackingColumn100 string Specifies the series type as stackingcolumn100.
    StackingBar string Specifies the series type as stackingbar.
    StackingBar100 string Specifies the series type as stackingbar100.
    Pyramid string Specifies the series type as pyramid.
    Funnel string Specifies the series type as funnel.
    Doughnut string Specifies the series type as doughnut.
    Polar string Specifies the series type as polar.
    Radar string Specifies the series type as radar.
    RangeArea string Specifies the series type as rangearea.

    Default Value

    • “column”. See Type

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.type = "spline">    
    </ej-chart>

    commonSeriesOptions.xAxisName string

    Specifies the name of the x-axis that has to be associated with this series. Add an axis instance with this name to axes collection.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.xAxisName = "xAxis">    
    </ej-chart>

    commonSeriesOptions.xName string

    Name of the property in the datasource that contains x value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.xName = "XValue">    
    </ej-chart>

    commonSeriesOptions.yAxisName string

    Specifies the name of the y-axis that has to be associated with this series. Add an axis instance with this name to axes collection.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.yAxisName = "yAxis">    
    </ej-chart>

    commonSeriesOptions.yName string

    Name of the property in the datasource that contains y value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.yName = "yValue">    
    </ej-chart>

    commonSeriesOptions.high string

    Name of the property in the datasource that contains high value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.high="high">   
    
    </ej-chart>

    commonSeriesOptions.low string

    Name of the property in the datasource that contains low value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container"  commonSeriesOptions.low="" >
    </ej-chart>

    commonSeriesOptions.open string

    Name of the property in the datasource that contains open value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container" commonSeriesOptions.open="" >
    </ej-chart>

    commonSeriesOptions.close string

    Name of the property in the datasource that contains close value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.close="close">
    </ej-chart>

    commonSeriesOptions.zOrder number

    Z-order of the series.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.zOrder]="1">    
    </ej-chart>

    commonSeriesOptions.size string

    Name of the property in the datasource that contains the size value for the bubble series.

    Default Value

    • null

    Example

    commonSeriesOptions.emptyPointSettings object

    Options for customizing the empty point in the series.

    commonSeriesOptions.emptyPointSettings.visible boolean

    Controls the visibility of the empty point.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.emptyPointSettings.visible]="true">    
      </ej-chart>

    commonSeriesOptions.emptyPointSettings.displayMode enum

    Specifies the mode of empty point.

    Name Type Description
    Gap string Display the gap for empty point.
    Zero string Set zero has empty point value.
    Average string Set the average of the adjacent point to empty point.

    Default Value

    • “gap”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.emptyPointSettings.displayMode ="average">    
      </ej-chart>

    See Mode.

    commonSeriesOptions.emptyPointSettings.style object

    Options for customizing the color and border of the empty point in the series.

    commonSeriesOptions.emptyPointSettings.style.color string

    Color of the empty point.

    Default Value

    • ””

    Example

  • TS
  • this.emptyStyle = {
        color: "#ffa000",    
    };
  • HTML
  • <ej-chart id="chartcontainer"  [commonSeriesOptions.emptyPointSettings.visible]="true" [commonSeriesOptions.emptyPointSettings.style]="emptyStyle"></ej-chart>

    commonSeriesOptions.emptyPointSettings.style.border object

    Options for customizing border of the empty point in the series.

    commonSeriesOptions.emptyPointSettings.style.border.color string

    Border color of the empty point.

    Default Value

    • ””

    Example

  • TS
  • this.emptyStyle = {
        color: "#ffa000",
        border: {
            color: "gray",       
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"  [commonSeriesOptions.emptyPointSettings.visible]="true" [commonSeriesOptions.emptyPointSettings.style]="emptyStyle"></ej-chart>

    commonSeriesOptions.emptyPointSettings.style.border.width number

    Border width of the empty point.

    Default Value

    • 1

    Example

  • TS
  • this.emptyStyle = {
        color: "#ffa000",
        border: {
            color: "gray",
            width: 2
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"  [commonSeriesOptions.emptyPointSettings.visible]="true" [commonSeriesOptions.emptyPointSettings.style]="emptyStyle"></ej-chart>

    commonSeriesOptions.positiveFill string

    Fill color for the positive column of the waterfall.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.positiveFill="red">     
    </ej-chart>

    commonSeriesOptions.connectorLine object

    Options for customizing the waterfall connector line.

    commonSeriesOptions.connectorLine.width number

    Width of the connector line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.connectorLine.width]="2">     
    </ej-chart>

    commonSeriesOptions.connectorLine.color string

    Color of the connector line.

    Default Value

    • “#565656”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.connectorLine.color="#333000">     
    </ej-chart>

    commonSeriesOptions.connectorLine.dashArray string

    DashArray of the connector line.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.connectorLine.dashArray="3,2">     
    </ej-chart>

    commonSeriesOptions.connectorLine.opacity number

    DashArray of the connector line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.connectorLine.opacity]="0.5">   
    </ej-chart>

    commonSeriesOptions.dragSettings object

    Options to customize the drag and drop in series.

    commonSeriesOptions.dragSettings.enable boolean

    drag/drop the series

    Default Value

    • “false”

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.dragSettings.enable]="true">        
    </ej-chart>

    commonSeriesOptions.dragSettings.type string

    Specifies the type of drag settings.

    Default Value

    • “xy”

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.dragSettings.type]="x">        
    </ej-chart>

    commonSeriesOptions.errorBar object

    Options to customize the error bar in series.

    commonSeriesOptions.errorBar.visibility boolean

    Show/hides the error bar

    Default Value

    • “visible”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.errorBar.visibility="visible">     
    </ej-chart>

    commonSeriesOptions.errorBar.type enum

    Specifies the type of error bar.

    Name Type Description
    FixedValue string Set the type of the error bar as FixedValue.
    Percentage string Set the type of the error bar as Percentage.
    StandardDeviation string Set the type of the error bar as StandardDeviation.
    StandardError string Set the type of the error bar as StandardError.

    Default Value

    • “FixedValue”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.errorBar.type="Percentage">     
    </ej-chart>

    commonSeriesOptions.errorBar.mode enum

    Specifies the mode of error bar.

    Name Type Description
    Both string Place the annotation to the top of the chart.
    Vertical string Place the annotation to the bottom of the chart.
    Horizontal string Place the annotation to the middle of the chart.

    Default Value

    • “vertical”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.errorBar.mode ="Horizontal">     
    </ej-chart>

    commonSeriesOptions.errorBar.direction enum

    Specifies the direction of error bar.

    Name Type Description
    Both string Set the direction to both.
    Plus string Set the direction to plus.
    Minus string Set the direction to minus.

    Default Value

    • “both”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.errorBar.direction="plus">     
    </ej-chart>

    commonSeriesOptions.errorBar.verticalErrorValue number

    Value of vertical error bar.

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.verticalErrorValue]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.horizontalErrorValue number

    Value of horizontal error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.horizontalErrorValue]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.horizontalPositiveErrorValue number

    Value of positive horizontal error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.horizontalPositiveErrorValue]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.horizontalNegativeErrorValue number

    Value of negative horizontal error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.horizontalNegativeErrorValue]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.verticalPositiveErrorValue number

    Value of positive vertical error bar.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.verticalPositiveErrorValue]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.verticalNegativeErrorValue number

    Value of negative vertical error bar.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.verticalNegativeErrorValue]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.fill string

    Fill color of the error bar.

    Default Value

    • “#000000”

    Example

  • HTML
  • <ej-chart id="chartcontainer" commonSeriesOptions.errorBar.fill="red">     
    </ej-chart>

    commonSeriesOptions.errorBar.width number

    Width of the error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.width]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.cap object

    Options for customizing the error bar cap.

    commonSeriesOptions.errorBar.cap.visible boolean

    Show/Hides the error bar cap.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.visible]="true">     
    </ej-chart>

    commonSeriesOptions.errorBar.cap.width number

    Width of the error bar cap.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.width]=1>     
    </ej-chart>

    commonSeriesOptions.errorBar.cap.length number

    Length of the error bar cap.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.length]=10>     
    </ej-chart>

    commonSeriesOptions.errorBar.cap.fill string

    Color of the error bar cap.

    Default Value

    • “#000000”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.errorBar.cap.fill]="red">     
    </ej-chart>

    commonSeriesOptions.trendlines array

    Option to add the trendlines to chart.

    commonSeriesOptions.trendlines.visibility boolean

    Show/hides the trendline.

    Default Value

    • ””

    Example

  • TS
  • this.ChartTrendlines= [{    
       visibility:'visible'
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.visibleOnLegend string

    Show/hides the trendline legend.

    Default Value

    • visible

    Example

  • TS
  • this.ChartTrendlines= [{    
       visibleOnLegend:'hidden'
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.type string

    Specifies the type of the trendline for the series.

    Default Value

    Example

  • TS
  • this.ChartTrendlines= [{    
       type:'linear'
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.name string

    Name for the trendlines that is to be displayed in the legend text.

    Default Value

    • “trendline”

    Example

  • TS
  • this.ChartTrendlines= [{    
        name:'Trendline' 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.fill string

    Fill color of the trendlines.

    Default Value

    • “#0000FF”

    Example

  • TS
  • this.ChartTrendlines= [{    
       fill:'#0000FF'
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.width number

    Width of the trendlines.

    Default Value

    • 1

    Example

  • TS
  • this.ChartTrendlines= [{    
       width: 1
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.opacity number

    Opacity of the trendline.

    Default Value

    • 1

    Example

  • TS
  • this.ChartTrendlines= [{    
        opacity: 0.5 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.dashArray string

    Pattern of dashes and gaps used to stroke the trendline.

    Default Value

    • ””

    Example

  • TS
  • this.ChartTrendlines= [{    
        dashArray: '2,3'
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.forwardForecast number

    Future trends of the current series.

    Default Value

    • 0

    Example

  • TS
  • this.ChartTrendlines= [{    
       forwardForeCast: 2
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.backwardForecast number

    Past trends of the current series.

    Default Value

    • 0

    Example

  • TS
  • this.ChartTrendlines= [{    
        backwardForeCast: 2
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.polynomialOrder number

    Specifies the order of the polynomial trendlines.

    Default Value

    • 0

    Example

  • TS
  • this.ChartTrendlines= [{    
        polynomialOrder: 2 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.period number

    Specifies the moving average starting period value.

    Default Value

    • 2

    Example

  • TS
  • this.ChartTrendlines= [{    
        period: 3 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip object

    Options for customizing the tooltip of the trendlines in the chart.

    commonSeriesOptions.trendlines.tooltip.border object

    Options for customizing the border of the trendline tooltip.

    commonSeriesOptions.trendlines.tooltip.border.color string

    Border color of the trendline tooltip.

    Default Value

    • null

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            border:'green'
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.border.width number

    Border width of the trendline tooltip.

    Default Value

    • 1

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            width: 2
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.rx number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
          rx: 10
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.ry number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
          ry: 10
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.duration string

    Specifies the duration, the tooltip has to be displayed.

    Default Value

    • “500ms”

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            duration: "300ms"
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.enableAnimation boolean

    Enables/disables the animation of the trendline tooltip when moving from one point to other.

    Default Value

    • true

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            enableAnimation: true
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.fill string

    Background color of the trendline tooltip.

    Default Value

    • null

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            fill: 'green'
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.format string

    Format of the tooltip content displayed in the trendlines.

    Default Value

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

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            format: "#point.x# : #point.y#%"
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.tooltip.opacity number

    Opacity of the trendline tooltip.

    Default Value

    • 0.5

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
           opacity: 0.5
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.trendlines.intercept number

    Specifies the intercept value of the trendlines.

    Default Value

    • null

    Example

  • TS
  • this.ChartTrendlines= [{    
       intercept :10
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines">    
    </ej-chart>

    commonSeriesOptions.highlightSettings object

    Options for customizing the appearance of the series or data point while highlighting.

    commonSeriesOptions.highlightSettings.enable boolean

    Enables/disables the ability to highlight the series or data point interactively.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true'}" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.mode enum

    Specifies whether the series or data point has to be highlighted.

    Name Type Description
    Series string Highlight/Select the series of the chart.
    Point string Highlight/Select the point in the series.
    Cluster string Highlight/Select the points all series of same index.
    Range string Select the data points by mouse dragging in the chart area.

    Default Value

    • “series”. See Mode

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', mode:'point' }" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.color string

    Color of the series/point on highlight.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', color:'red' }" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.opacity number

    Opacity of the series/point on highlight.

    Default Value

    • 0.6

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', opacity:1 }" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.border object

    Options for customizing the border of series on highlight.

    commonSeriesOptions.highlightSettings.border.color string

    Border color of the series/point on highlight.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', border:{color:'black'} }" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.border.width string

    Border width of the series/point on highlight.

    Default Value

    • 2

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', border:{width: 1} }" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.pattern string

    Specifies the pattern for the series/point on highlight.

    Default Value

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', pattern:'chessboard' }" >
    </ej-chart>

    commonSeriesOptions.highlightSettings.customPattern string

    Custom pattern for the series on highlight.

    Default Value

    • ””

    Example

  • HTML
  • <body>
        <svg>
         <pattern id="dots_a" patternUnits="userSpaceOnUse" width="6" height="6">
            <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="black" opacity="1">
            </rect>
            <path d='M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9'stroke-width="1" stroke="white">
            </path>
         </pattern>
        </svg>
    
    <ej-chart id="container" [commonSeriesOptions.highlightSettings]="{enable:'true', pattern: "custom", 
                                                     customPattern: 'dots_a' }" >        
    </ej-chart>    
    </body>

    commonSeriesOptions.selectionSettings object

    Options for customizing the appearance of the series/data point on selection.

    commonSeriesOptions.selectionSettings.enable boolean

    Enables/disables the ability to select a series/data point interactively.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true'}" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.type enum

    Specifies the type of selection.

    Name Type Description
    Single string It will be select the single series / point of the chart.
    Multiple string It will be select the multiple series / point of the chart.

    Default Value

    • “single”

    See. Type

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', type:'multiple' }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.mode enum

    Specifies whether the series or data point has to be selected.

    Default Value

    • “series”. See Mode

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', mode:'point' }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.rangeType enum

    Specifies the drawn rectangle type.

    Name Type Description
    XY string It will be draw a range rectangle in both horizontal and vertically.
    X string It will be draw a range rectangle in horizontally.
    Y string It will be draw a range rectangle in vertically.

    Default Value

    • “xy”

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', rangeType:'x' }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.color string

    Color of the series/point on selection.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', color:'red' }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.opacity number

    Opacity of the series/point on selection.

    Default Value

    • 0.6

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', opacity:1 }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.border object

    Options for customizing the border of the series on selection.

    commonSeriesOptions.selectionSettings.border.color string

    Border color of the series/point on selection.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', border:{color:'black'} }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.border.width string

    Border width of the series/point on selection.

    Default Value

    • 2

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', border:{width: 1} }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.pattern string

    Specifies the pattern for the series/point on selection.

    Default Value

    Example

  • HTML
  • <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', pattern:'chessboard' }" >
    </ej-chart>

    commonSeriesOptions.selectionSettings.customPattern string

    Custom pattern for the series on selection.

    Default Value

    • ””

    Example

  • HTML
  • <body>
        <svg>
         <pattern id="dots_a" patternUnits="userSpaceOnUse" width="6" height="6">
            <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="black" opacity="1">
            </rect>
            <path d='M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9'stroke-width="1" stroke="white">
            </path>
         </pattern>
        </svg>
    
    <ej-chart id="container" [commonSeriesOptions.selectionSettings]="{enable:'true', pattern: "custom", 
                                                     customPattern: 'dots_a' }" >        
    </ej-chart>    
    </body>

    selectedDataPointIndexes array

    Options for displaying the chart along with selected points while loading

    Default Value

    • [ ]

    Example

  • HTML
  • <ej-chart id="chartcontainer" [selectedDataPointIndexes]="[
                   { seriesIndex:0 , pointIndex:2 },
                   { seriesIndex:1 , pointIndex:4 }
               ]">    
    </ej-chart>

    crosshair object

    Options for displaying and customizing the crosshair.

    crosshair.trackballTooltipSettings object

    Options for customizing the trackball tooltip.

    crosshair.trackballTooltipSettings.border object

    Options for customizing the trackball tooltip border.

    crosshair.trackballTooltipSettings.border.width number

    Border width of the trackball tooltip.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{border: {width:2}}" >    
    </ej-chart>

    crosshair.trackballTooltipSettings.border.color string

    Border color of the trackball tooltip.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{border: {color:'green'}}" >    
    </ej-chart>

    crosshair.trackballTooltipSettings.fill string

    Background color of the trackball tooltip.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{fill:'red'}" >    
    </ej-chart>

    crosshair.trackballTooltipSettings.rx number

    Rounded corner x value of the trackball tooltip.

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{rx:5}" >    
    </ej-chart>

    crosshair.trackballTooltipSettings.ry number

    Rounded corner y value of the trackball tooltip.

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{ry:5}" >    
    </ej-chart>

    crosshair.trackballTooltipSettings.opacity number

    Opacity value of the trackball tooltip.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{opacity:0.5}" >    
    </ej-chart>

    crosshair.trackballTooltipSettings.mode enum

    Specifies the mode of the trackball tooltip.

    Name Type Description
    Float string Shown the trackball tooltip as float mode.
    Grouping string Shown the trackball tooltip as grouping mode.

    Default Value

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.trackballTooltipSettings]="{mode:'grouping'}" >    
    </ej-chart>

    crosshair.marker object

    Options for customizing the marker in crosshair.

    crosshair.marker.border object

    Options for customizing the border.

    crosshair.marker.border.width number

    Border width of the marker.

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.marker]="{border:{width:2}}" >
    
    </ej-chart>

    crosshair.marker.opacity boolean

    Opacity of the marker.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.marker]="{opacity:0.5}" >
    
    </ej-chart>

    crosshair.marker.size object

    Options for customizing the size of the marker.

    crosshair.marker.size.height number

    Height of the marker.

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.marker]="{size:{height:15}}" >
    
    </ej-chart>

    crosshair.marker.size.width number

    Width of the marker.

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.marker]="{size:{width:15}}" >
    
    </ej-chart>

    crosshair.marker.visible boolean

    Show/hides the marker.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.marker]="{visible:'true'}" >
    </ej-chart>

    crosshair.line object

    Options for customizing the crosshair line.

    crosshair.line.color string

    Color of the crosshair line.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chart" 
            crosshair.line.color="red" >        
    </ej-chart>

    crosshair.line.width number

    Width of the crosshair line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chart" 
            [crosshair.line.width]=2 >        
    </ej-chart>

    crosshair.type enum

    Specifies the type of the crosshair. It can be trackball or crosshair

    Name Type Description
    Crosshair string View the value of an axis at mouse position.
    Trackball string Track a data point close to the mouse position.

    Default Value

    Example

  • HTML
  • <ej-chart id="chart"       
            crosshair.type="trackball" >    
    </ej-chart>

    crosshair.visible boolean

    Show/hides the crosshair/trackball visibility.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart"       
            [crosshair.visible]="true" >    
    </ej-chart>

    depth number

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

    Default Value

    • 100

    Example

  • HTML
  • <ej-chart id="chart" [depth]=100>    
    </ej-chart>

    enable3D boolean

    Controls whether 3D view has to be enabled or not. 3D view is supported only for column, bar. Stacking column, stacking bar, pie and doughnut series types.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart" [enable3D]="true">    
    </ej-chart>

    enableCanvasRendering boolean

    Controls whether Chart has to be rendered as Canvas or SVG. Canvas rendering supports all functionalities in SVG rendering except 3D Charts.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart" [enableCaanvasRendering]="true">    
    </ej-chart>

    initSeriesRender boolean

    Controls whether the series has to be rendered at initial loading of chart, this will be useful in scenarios where chart is placed at the bottom of the web page and we need to render the series only when the chart is visible while scrolling to the top.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [initSeriesRender]="false">
    </ej-chart>

    enableRotation boolean

    Controls whether 3D view has to be rotated on dragging. This property is applicable only for 3D view.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart" [enableRotation]="true">    
    </ej-chart>

    indicators array

    Options to customize the technical indicators.

    indicators.dPeriod number

    The dPeriod value for stochastic indicator.

    Default Value

    • 3

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        dPeriod: 4
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.enableAnimation boolean

    Enables/disables the animation.

    Default Value

    • false

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        enableAnimation: true
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.fill string

    Color of the technical indicator.

    Default Value

    • “#00008B”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        fill: "#ff0000"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.histogram object

    Options to customize the histogram in MACD indicator.

    indicators.histogram.border object

    Options to customize the histogram border in MACD indicator.

    indicators.histogram.border.color string

    Color of the histogram border in MACD indicator.

    Default Value

    • “#9999ff”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        histogram:{
            border:{
                color:"#ff0000"
            }
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.histogram.border.width number

    Controls the width of histogram border line in MACD indicator.

    Default Value

    • 1

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        histogram:{
            border:{
                width: 2
            }
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.histogram.fill string

    Color of histogram columns in MACD indicator.

    Default Value

    • “#ccccff”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        histogram:{
            fill:"#ff0000"
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.histogram.opacity number

    Opacity of histogram columns in MACD indicator.

    Default Value

    • 1

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        histogram:{
            opacity: 0.5
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.kPeriod number

    Specifies the k period in stochastic indicator.

    Default Value

    • 3

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        histogram:{
            kPeriod: 4
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.longPeriod number

    Specifies the long period in MACD indicator.

    Default Value

    • 26

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{   
            longPeriod: 14
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.lowerLine object

    Options to customize the lower line in indicators.

    indicators.lowerLine.fill string

    Color of lower line.

    Default Value

    • “#008000”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
       lowerLine:{
           fill:"#ff0000"
       }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.lowerLine.width number

    Width of the lower line.

    Default Value

    • 2

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
       lowerLine:{
           width:3
       }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.macdLine object

    Options to customize the MACD line.

    indicators.macdLine.fill string

    Color of MACD line.

    Default Value

    • “#ff9933”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
       macdLine:{
           fill:"ff0000"
       }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.macdLine.width number

    Width of the MACD line.

    Default Value

    • 2

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
       macdLine:{
           width:2
       }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.macdType string

    Specifies the type of the MACD indicator.

    Default Value

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
       macdType:"both"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.period number

    Specifies period value in indicator.

    Default Value

    • 14

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
      period:20
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.periodLine object

    Options to customize the period line in indicators.

    indicators.periodLine.fill string

    Color of period line in indicator.

    Default Value

    • “blue”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
      periodLine:{
          fill:"ff0000"
      }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.periodLine.width number

    Width of the period line in indicators.

    Default Value

    • 2

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
      periodLine:{
          width:2
      }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.seriesName string

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

    Default Value

    • ””

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     seriesName :"rsi"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.shortPeriod number

    Specifies the short period in MACD indicator.

    Default Value

    • 13

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     shortPeriod : 14
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.standardDeviations number

    Specifies the standard deviation value for Bollinger band indicator.

    Default Value

    • 2

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     standardDeviations : 3
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip object

    Options to customize the tooltip.

    indicators.tooltip.border object

    Option to customize the border of indicator tooltip.

    indicators.tooltip.border.color string

    Border color of indicator tooltip.

    Default Value

    • null

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         border:{
             color:"0000ff"
         }
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.border.width number

    Border width of indicator tooltip.

    Default Value

    • 1

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         border:{
             width: 2
         }
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.duration string

    Specifies the animation duration of indicator tooltip.

    Default Value

    • “500ms”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         duration:"300ms"
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.enableAnimation boolean

    Enables/disables the tooltip animation.

    Default Value

    • true

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         enableAnimation : true
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.format string

    Format of indicator tooltip. Use “point.x” and “point.y” as a placeholder text to display the corresponding data point’s x and y value.

    Default Value

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

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         format : "#point.x#"
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.fill string

    Background color of indicator tooltip.

    Default Value

    • null

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         fill : "#FFF000"
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.opacity number

    Opacity of indicator tooltip.

    Default Value

    • 0.95

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         opacity : 0.5
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.tooltip.visible boolean

    Controls the visibility of indicator tooltip.

    Default Value

    • false

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
     tooltip :{
         visible : true
     }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.trigger number

    Trigger value of MACD indicator.

    Default Value

    • 9

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
    trigger : 14
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.visibility string

    Specifies the visibility of indicator.

    Default Value

    • “visible”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        visibility :"visible"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.type string

    Specifies the type of indicator that has to be rendered.

    Default Value

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        type : "momentum"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.upperLine object

    Options to customize the upper line in indicators

    indicators.upperLine.fill string

    Fill color of the upper line in indicators

    Default Value

    • “#ff9933”

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        upperLine : {
            fill:"#ff0000"
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.upperLine.width number

    Width of the upper line in indicators.

    Default Value

    • 2

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        upperLine : {
            width: 3
        }
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.width number

    Width of the indicator line.

    Default Value

    • 2

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        width : 3
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.xAxisName string

    Name of the horizontal axis used for indicator. Primary X axis is used when x axis name is not specified.

    Default Value

    • ””

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        xAxisName : "xAxis"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    indicators.yAxisName string

    Name of the vertical axis used for indicator. Primary Y axis is used when y axis name is not specified

    Default Value

    • ””

    Example

  • TS
  • //Initializing Indicators    
    this.chartindicators = [{
        yAxisName : "yAxis"
        //  ...
    }];
  • HTML
  • <ej-chart id="chartcontainer" [indicators]="chartindicators">
    </ej-chart>

    isResponsive boolean

    Controls whether Chart has to be responsive while resizing.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [isResponsive]="true">
    </ej-chart>

    legend object

    Options to customize the legend items and legend title.

    legend.alignment enum

    Horizontal alignment of the legend.

    Name Type Description
    Center string Align the legend as center to the chart
    Near string Align the legend as near to the chart
    Far string Align the legend as far to the chart

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.alignment]="far">
    </ej-chart>

    legend.background string

    Background for the legend. Use this property to add a background image or background color for the legend.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.background]="green url('flower.png')">
    </ej-chart>

    legend.border object

    Options for customizing the legend border.

    legend.border.color string

    Border color of the legend.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" legend.border.color="green">
    </ej-chart>

    legend.border.width number

    Border width of the legend.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.border.width]= 2>
    </ej-chart>

    legend.columnCount number

    Number of columns to arrange the legend items.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.columnCount]=2>
    </ej-chart>

    legend.enableScrollbar boolean

    Controls whether legend has to use scrollbar or not. When enabled, scroll bar appears depending upon size and position properties of legend.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.enableScrollbar]="true">
    </ej-chart>

    legend.fill string

    Fill color for the legend items. By using this property, it displays all legend item shapes in same color.
    Legend items representing invisible series is displayed in gray color.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" legend.fill="green">
    </ej-chart>

    legend.font object

    Options to customize the font used for legend item text.

    legend.font.fontFamily string

    Font family for legend item text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.legendFont= { 
        fontFamily: 'Segoe UI' 
    };
  • HTML
  • <ej-chart id="chartcontainer" [legend.font]="legendFont"> 
    </ej-chart>

    legend.font.fontStyle enum

    Font style for legend item text.

    Default Value

    Example

  • TS
  • this.legendFont= { 
         fontStyle: 'Normal'
    };
  • HTML
  • <ej-chart id="chartcontainer" [legend.font]="legendFont"> 
    </ej-chart>

    legend.font.fontWeight enum

    Font weight for legend item text.

    Default Value

    Example

  • TS
  • this.legendFont= { 
         fontWeight: 'lighter'
    };
  • HTML
  • <ej-chart id="chartcontainer" [legend.font]="legendFont"> 
    </ej-chart>

    legend.font.size string

    Font size for legend item text.

    Default Value

    • “12px”

    Example

  • TS
  • this.legendFont= { 
         size: "14px"
    };
  • HTML
  • <ej-chart id="chartcontainer" [legend.font]="legendFont"> 
    </ej-chart>

    legend.itemPadding number

    Gap or padding between the legend items.

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.itemPadding]=15> 
    </ej-chart>

    legend.itemStyle object

    Options to customize the style of legend items.

    legend.itemStyle.border object

    Options for customizing the border of legend items.

    legend.itemStyle.border.color string

    Border color of the legend items.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.itemStyle]="{border: { color: 'green' } }">
    </ej-chart>

    legend.itemStyle.border.width number

    Border width of the legend items.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.itemStyle]="{border: { width: 2 } }">
    </ej-chart>

    legend.itemStyle.height number

    Height of the shape in legend items.

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.itemStyle]="{height:20}">
    </ej-chart>

    legend.itemStyle.width number

    Width of the shape in legend items.

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.itemStyle]="{width:15}">
    </ej-chart>

    legend.location object

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

    legend.location.x number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.location]="{x:20}">
    </ej-chart>

    legend.location.y number

    Y value or vertical offset to position the legend.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.location]="{y:100}">
    </ej-chart>

    legend.opacity number

    Opacity of the legend.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.opacity]=0.5>
    </ej-chart>

    legend.position enum

    Places the legend at specified position. Legend can be placed at left, right, top or bottom of the chart area.
    To manually specify the location of legend, set custom as value to this property.

    Name Type Description
    Left string Legend will be placed left side of the chart area
    Right string Legend will be placed right side of the chart area
    Top string Legend will be placed top of the chart area
    Bottom string Legend will be placed bottom of the chart area

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer"  legend.position="top">
    </ej-chart>

    legend.rowCount number

    Number of rows to arrange the legend items.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [legend.rowCount]=4>
    </ej-chart>

    legend.shape enum

    Shape of the legend items. Default shape for pie and doughnut series is circle and all other series uses rectangle.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer"  legend.shape="seriesType">
    </ej-chart>

    legend.size object

    Options to customize the size of the legend.

    legend.size.height string

    Height of the legend. Height can be specified in either pixel or percentage.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  legend.size.height="20%" > 
    </ej-chart>

    legend.size.width string

    Width of the legend. Width can be specified in either pixel or percentage.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  legend.size.width="20%" > 
    </ej-chart>

    legend.title object

    Options to customize the legend title.

    legend.title.font object

    Options to customize the font used for legend title

    legend.title.font.fontFamily string

    Font family for the text in legend title.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.titleFont= { 
        fontFamily: 'Segoe UI'
    };
  • HTML
  • <ej-chart id="chartcontainer"  [legend.title.font]="titleFont"> 
    </ej-chart>

    legend.title.font.fontStyle enum

    Font style for legend title.

    Default Value

    Example

  • TS
  • this.titleFont= { 
        fontStyle: 'Italic', 
    };
  • HTML
  • <ej-chart id="chartcontainer"  [legend.title.font]="titleFont"> 
    </ej-chart>

    legend.title.font.fontWeight enum

    Font weight for legend title.

    Default Value

    Example

  • TS
  • this.titleFont= { 
        fontWeight: 'Bold'
    };
  • HTML
  • <ej-chart id="chartcontainer"  [legend.title.font]="titleFont"> 
    </ej-chart>

    legend.title.font.size string

    Font size for legend title.

    Default Value

    • “12px”

    Example

  • TS
  • this.titleFont= { 
         size: '12px' 
    };
  • HTML
  • <ej-chart id="chartcontainer"  [legend.title.font]="titleFont"> 
    </ej-chart>

    legend.title.text string

    Text to be displayed in legend title.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer" legend.title.text="Countries">
    </ej-chart>

    legend.title.textAlignment enum

    Alignment of the legend title.

    Name Type Description
    Center string Legend Title will be aligned as center of the legends
    Near string Legend Title will be aligned as near
    Far string Legend Title will be aligned as far

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" legend.title.textAlignment="center" > 
    </ej-chart>

    legend.textOverflow enum

    Specifies the action taken when the legend width is more than the textWidth.

    Name Type Description
    None string No action will be performed
    Trim string Legend text will be Trimmed
    Wrap string Legend text will be Wrap by word
    WrapAndTrim string Legend text will be wrap with trim action

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" legend.textOverflow="trim"> 
    </ej-chart>

    legend.textWidth number

    Text width for legend item.

    Default Value

    • 34

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.textWidth]=34> 
    </ej-chart>

    legend.visible boolean

    Controls the visibility of the legend.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.visible]="true"> 
    </ej-chart>

    legend.toggleSeriesVisibility boolean

    Controls the selection through the legend.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [legend.toggleSeriesVisibility]="false"> 
    </ej-chart>

    locale string

    Name of the culture based on which chart should be localized. Number and date time values are localized with respect to the culture name.
    String type properties like title text are not localized automatically. Provide localized text as value to string type properties.

    Default Value

    • “en-US”

    Example

  • HTML
  • <ej-chart id="chartcontainer" locale='fr-FR'>
    </ej-chart>

    palette array

    Palette is used to store the series fill color in array and apply the color to series collection in the order of series index.

    Default value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [palette]="['red','blue']">
    </ej-chart>

    Margin object

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

    margin.left number

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

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer" [margin.left]=10>
    </ej-chart>

    margin.right number

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

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer" [margin.right]=10>
    </ej-chart>

    margin.top number

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

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer" [margin.top]=10>
    </ej-chart>

    margin.bottom number

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

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer" [margin.bottom]=10>
    </ej-chart>

    perspectiveAngle number

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

    Default Value

    • 90

    Example

  • HTML
  • <ej-chart id="chartcontainer" [perspectiveAngle]=60>
    </ej-chart>

    primaryXAxis object

    This is a horizontal axis that contains options to configure axis and it is the primary x axis for all the series in series array. To override x axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s xAxisName property to link both axis and series.

    primaryXAxis.alternateGridBand object

    Options for customizing horizontal axis alternate grid band.

    primaryXAxis.alternateGridBand.even object

    Options for customizing even grid band.

    primaryXAxis.alternateGridBand.even.fill string

    Fill color for the even grid bands.

    Default Value

    • transparent

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.alternateGridBand]="{even: {fill: '#A7A9AB'}}">    
    </ej-chart>

    primaryXAxis.alternateGridBand.even.opacity number

    Opacity of the even grid band.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.alternateGridBand]="{opacity: 0.1}">    
    </ej-chart>

    primaryXAxis.alternateGridBand.odd object

    Options for customizing odd grid band.

    primaryXAxis.alternateGridBand.odd.fill string

    Fill color of the odd grid bands

    Default Value

    • transparent

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.alternateGridBand]="{odd: {fill: '#A7A9AB'}}">    
    </ej-chart>

    primaryXAxis.alternateGridBand.odd.opacity number

    Opacity of odd grid band

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryxAxis.alternateGridBand]="{opacity: 0.1}">    
    </ej-chart>

    primaryXAxis.crossesAt number

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

    Default Value

    • null

    Example

  • HTML
  • <!--Crosses primary Y axis at 0 -->
    <ej-chart id="chartcontainer" [primaryXAxis.crossesAt]=0>
       <!-- Write series code here -->
    </ej-chart>

    primaryXAxis.crossesInAxis string

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

    Default Value

    • null

    Example

  • TS
  • //  Creating a secondary axis
    this.chartAxes = [{name:"secondaryYAxis"}];
  • HTML
  • <ej-chart id="chartcontainer"
           primaryXAxis.crossesInAxis="secondaryYAxis" [axes]="chartAxes">
    </ej-chart>

    primaryXAxis.isIndexed boolean

    Category axis can also plot points based on index value of data points. Index based plotting can be enabled by setting ‘isIndexed’ property to true.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.isIndexed]="true">  
    </ej-chart>

    primaryXAxis.enableAutoIntervalOnZoomingboolean

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

    Default Value

    • true

    Example

    primaryXAxis.axisLine object

    Options for customizing the axis line.

    primaryXAxis.axisLine.dashArray string

    Pattern of dashes and gaps to be applied to the axis line.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.axisLine]="{dashArray: '2,3'}">    
    </ej-chart>

    primaryXAxis.axisLine.offset number

    Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.axisLine]="{offset: 5}">    
    </ej-chart>

    primaryXAxis.axisLine.visible boolean

    Show/hides the axis line.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.axisLine]="{visible: true}">    
    </ej-chart>

    primaryXAxis.axisLine.color string

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.axisLine]="{color: 'red'}">    
    </ej-chart>

    primaryXAxis.axisLine.width number

    Width of axis line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.axisLine]="{width: 2}">    
    </ej-chart>

    primaryXAxis.columnIndex number

    Specifies the index of the column where the axis is associated, when the chart area is divided into multiple plot areas by using columnDefinitions.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.columnIndex]="2">    
    </ej-chart>

    primaryXAxis.columnSpan number

    Specifies the number of columns or plot areas an axis has to span horizontally.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.columnSpan]=2>    
    </ej-chart>

    primaryXAxis.crosshairLabel object

    Options to customize the crosshair label.

    primaryXAxis.crosshairLabel.visible boolean

    Show/hides the crosshair label associated with this axis.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart" [crosshair.visible]="true" 
                 [primaryXAxis.crosshairLabel.visible]="true">
    </ej-chart>

    primaryXAxis.desiredIntervals number

    With this setting, you can request axis to calculate intervals approximately equal to your desired interval.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.desireIntervals]=5>    
    </ej-chart>

    primaryXAxis.labelPlacement enum

    Specifies the placement of labels.

    Name Type Description
    OnTicks string Labels will be placed on tick
    BetweenTicks string Labels will be placed between ticks

    Default Value

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

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelPlacement="onticks">
      <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.edgeLabelPlacement enum

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

    Name Type Description
    None string no action will be perform
    Shift string Perform shift action to the edge labels
    Hide string The edge label will be hidden

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.edgeLabelPlacement="shift">
      <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.enableTrim boolean

    Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.enableTrim]="true">    
    </ej-chart>

    primaryXAxis.font object

    Options for customizing the font of the axis Labels.

    primaryXAxis.font.fontFamily string

    Font family of labels.

    Default Value

    • “Segoe UI”

    Example

  • HTML
  • <ej-chart id="chartcontainer"
              primaryXAxis.font.fontFamily="Segoe UI">
      <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.font.fontStyle enum

    Font style of labels.

    Default Value

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

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.font.fontStyle="Bold" >
      <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.font.fontWeight enum

    Font weight of the label.

    Default Value

    • ej.datavisualization.Chart.FontWeight.Regular. See FontWeight

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.font.fontWeight="bold">
    </ej-chart>

    primaryXAxis.font.opacity number

    Opacity of the axis labels.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" 
              [primaryXAxis.font.opacity]="0.8">
      <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.font.size string

    Font size of the axis labels.

    Default Value

    • “13px”

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.font.size="16px" >
    <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.intervalType enum

    Specifies the type of interval in date time axis.

    Name Type Description
    Days string Specify the interval type as days
    Hours string Specify the interval type as hours
    Seconds string Specify the interval type as seconds
    Milliseconds string Specify the interval type as milliseconds
    Minutes string Specify the interval type as minutes
    Months string Specify the interval type as months
    Years string Specify the interval type as years

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.intervalType="years">
     </ej-chart>

    primaryXAxis.isInversed boolean

    Specifies whether to inverse the axis.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.isInversed]="true" >      
    </ej-chart>

    primaryXAxis.labelFormat string

    Custom formatting for axis label and supports all standard formatting type of numerical and date time values.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelFormat="c">   
    </ej-chart>

    primaryXAxis.labelIntersectAction enum

    Specifies the action to take when the axis labels are overlapping with each other.

    Name Type Description
    None string no action will be perform in axis labels
    Rotate90 string Displays axis labels with 90 degree
    Rotate45 string Displays axis labels with 45 degree
    Wrap string Axis labels will be Wrap
    WrapByword string Axis labels will be Wrap by word
    Trim string Axis labels will be trimmed
    Hide string Axis labels will be hide when overlap to others
    MultipleRows string Axis labels will display the next line when overlap to others

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelIntersectAction="multipleRows">     
    </ej-chart>

    primaryXAxis.labelPosition enum

    Specifies the position of the axis labels.

    Name Type Description
    Inside string The axis labels area visible inside the axis line
    OutSide string The axis labels area visible outside the axis line

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelPosition="inside">
    </ej-chart>

    primaryXAxis.alignment enum

    Specifies the position of the axis labels.

    Name Type Description
    Near string The axis labels placed as near
    Far string The axis labels placed as far
    Center string The axis labels placed as center

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.alignment="far">
    </ej-chart>

    primaryXAxis.labelRotation number

    Angle in degrees to rotate the axis labels.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelRotation="90">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.logBase number

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

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.logBase]=2>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorGridLines object

    Options for customizing major gird lines.

    primaryXAxis.majorGridLines.dashArray string

    Pattern of dashes and gaps used to stroke the major grid lines.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.majorGridLines.dashArray='2,3'>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorGridLines.color string

    Color of the major grid line.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.majorGridLines.color="blue">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorGridLines.opacity number

    Opacity of major grid lines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.majorGridLines.opacity]="0.5">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorGridLines.visible boolean

    Show/hides the major grid lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" 
                [primaryXAxis.majorGridLines.visible]="true">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorGridLines.width number

    Width of the major grid lines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.majorGridLines.width]=1>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorTickLines object

    Options for customizing the major tick lines.

    primaryXAxis.majorTickLines.size number

    Length of the major tick lines.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.majorTickLines.size]=10>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorTickLines.visible boolean

    Show/hides the major tick lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.majorTickLines.visible]="false">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.majorTickLines.width number

    Width of the major tick lines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.majorTickLines.width]=1 >
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.maximumLabels number

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

    Default Value

    • 3

    Example

    primaryXAxis.maximumLabelWidth number

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

    Default Value

    • 34

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.maximumLabelWidth]="34.5" >
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorGridLines object

    Options for customizing the minor grid lines.

    primaryXAxis.minorGridLines.dashArray string

    Patterns of dashes and gaps used to stroke the minor grid lines.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.minorGridLines.dashArray='2,3'>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorGridLines.visible boolean

    Show/hides the minor grid lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" 
                [primaryXAxis.minorGridLines.visible]="true">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorGridLines.width number

    Width of the minorGridLines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.minorGridLines.width]=1>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorTickLines object

    Options for customizing the minor tick lines.

    primaryXAxis.minorTickLines.size number

    Length of the minor tick lines.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.minorTickLines.size]=10>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorTickLines.visible boolean

    Show/hides the minor tick lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.minorTickLines.visible]="false">
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorTickLines.width number

    Width of the minor tick line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.minorTickLines.width]=1 >
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.minorTicksPerInterval number

    Specifies the number of minor ticks per interval.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.minorTicksPerInterval]=0>
       <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.name string

    Unique name of the axis. To associate an axis with the series, you have to set this name to the xAxisName/yAxisName property of the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  primaryXAxis.name="">    
    </ej-chart>

    primaryXAxis.opposedPosition boolean

    Specifies whether to render the axis at the opposite side of its default position.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.opposedPosition]="true" >
         <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.orientation enum

    Specifies the orientation of the axis line

    Name Type Description
    Horizontal string The axis line is displayed in horizontal direction
    Vertical string The axis line is displayed in vertical direction

    Default Value

    • Horizontal

    Example

  • TS
  • //  Creating a secondary axis
    this.chartAxes = [{name:"secondaryYAxis", orientation: "vertical"}];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="chartAxes"></ej-chart>

    primaryXAxis.plotOffset number

    Specifies the padding for the plot area.

    Default Value

    • 10

    Example

    primaryXAxis.range object

    Options to customize the range of the axis.

    primaryXAxis.range.min number

    Minimum value of the axis range.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.range.min]=0></ej-chart>

    primaryXAxis.range.max number

    Maximum value of the axis range.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.range.max]=60></ej-chart>

    primaryXAxis.range.interval number

    Interval of the axis range.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.range.interval]=5></ej-chart>

    primaryXAxis.rangePadding enum

    Specifies the padding for the axis range.

    Name Type Description
    Additional string Interval of the axis is added as padding to the minimum and maximum values of the range
    Normal string Padding is applied to the axis based on the range calculation
    None string Padding cannot be applied to the axis
    Round string Axis range is rounded to the nearest possible value divided by the interval

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.rangePadding="normal"></ej-chart>

    primaryXAxis.roundingPlaces number

    Rounds the number to the given number of decimals.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.roundingPlaces]="3"></ej-chart>

    primaryXAxis.multiLevelLabels array

    Options for customizing the multi level labels.

    Default Value

    • [ ]

    primaryXAxis.multiLevelLabels.visible boolean

    Visibility of the multi level labels.

    Default Value

    • false

    Example

  • TS
  • this.multiLabels = [{ 
           visible: true
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.text string

    Text of the multi level labels.

    Default Value

    • ””

    Example

  • TS
  • this.multiLabels = [{        
            text: "Quater1",                       
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.start number

    Starting value of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{         
            start: 1,        
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.end number

    Ending value of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{         
            end: 4,        
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.level number

    Specifies the level of multi level labels.

    Default Value

    • 0

    Example

  • TS
  • this.multiLabels = [{        
            level: 2,                       
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.maximumTextWidth number

    Specifies the maximum width of the text in multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{ 
            visible: true,
            start: -0.5,
            end: 2.5,
            text: "Quater1",                         
            maximumtextWidth: 40 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.textAlignment enum

    Specifies the alignment of the text in multi level labels.

    Default Value

    Example

  • TS
  • this.multiLabels = [{ 
            // customizing the text alignment
            textAlignment: "near",
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.textOverflow enum

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

    Default Value

    Example

  • TS
  • this.multiLabels = [{ 
           // customizing the text overflow  
           textOverflow: trim", 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.font object

    Options for customizing the font of the text.

    primaryXAxis.multiLevelLabels.font.color string

    Font color of the multi level labels text.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{              
            font:{        
             color: "green"                            
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.font.fontFamily string

    Font family of the multi level labels text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.multiLabels = [{            
            font:{
             fontFamily: "Algerian",                                    
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.font.fontStyle enum

    Font style of the multi level labels text.

    Default Value

    • “Normal”

    Example

  • TS
  • this.multiLabels = [{              
            font:{        
             fontStyle: "Bold",                                
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.font.fontWeight string

    Font weight of the multi level label text.

    Default Value

    • “regular”

    Example

  • TS
  • this.multiLabels = [{              
            font:{        
             fontWeight:"lighter",                                             
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.font.opacity number

    Opacity of the multi level label text.

    Default Value

    • 1

    Example

  • TS
  • this.multiLabels = [{        
            font:{        
             opacity: 0.5,                           
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.font.size string

    Font size of the multi level label text.

    Default Value

    • “12px”

    Example

  • TS
  • this.multiLabels = [{               
            font:{          
             size: "12px",                                   
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.border object

    Options for customizing the border of the series.

    primaryXAxis.multiLevelLabels.border.color string

    Border color of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{        
            border:{          
               color: "green"
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.border.width number

    Border width of the multi level labels.

    Default Value

    • 1

    Example

  • TS
  • this.multiLabels = [{        
            border:{            
               width: 2,                   
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.multiLevelLabels.border.type enum

    Border type of the multi level labels.

    Name Type Description
    Rectangle string To render rectangle border.
    None string No border will be rendered.
    WithoutTopAndBottom string Border will be rendered only on left and right side of the labels.
    Brace string To render brace border style.
    CurlyBrace string To render curly brace border style.

    Default Value

    • “rectangle”. See Type

    Example

  • TS
  • this.multiLabels = [{        
            border:{  
               type: "brace",                   
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
           <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.showNextToAxisLine boolean

    Specifies whether the axis elements need to be placed nearby the axis line, while crossing.

    Default Value

    • true

    Example

  • HTML
  • <!--Crosses horizontal axis at category value "zero" -->
    <ej-chart id="chartcontainer" primaryXAxis.showNextToAxisLine="false"></ej-chart>

    primaryXAxis.stripLine array

    Options for customizing the strip lines.

    Default Value

    • [ ]

    primaryXAxis.stripLine.borderColor string

    Border color of the strip line.

    Default Value

    • “gray”

    Example

  • TS
  • this.Strip = [{                                                                                                           
        borderColor: 'gray',    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.color string

    Background color of the strip line.

    Default Value

    • “gray”

    Example

  • TS
  • this.Strip = [{                                                                                                             
        color: 'green',    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.end number

    End value of the strip line.

    Default Value

    • null

    Example

  • TS
  • this.Strip = [{   
        end: 5,                                                                                                                 
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.font object

    Options for customizing the font of the text.

    primaryXAxis.stripLine.font.color string

    Font color of the strip line text.

    Default Value

    • “black”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: { color: 'green' },    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.font.fontFamily string

    Font family of the strip line text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: { 
            fontFamily:"Algerian"
        },    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.font.fontStyle enum

    Font style of the strip line text.

    Default Value

    • “Normal”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: {fontStyle:'Italic'},    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.font.fontWeight string

    Font weight of the strip line text.

    Default Value

    • “regular”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{  
        font: {
            fontWeight: "lighter"
        },    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.font.opacity number

    Opacity of the strip line text.

    Default Value

    • 1

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: {opacity:0.5},    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.font.size string

    Font size of the strip line text.

    Default Value

    • “12px”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: {size: "16px"},    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.start number

    Start value of the strip line.

    Default Value

    • null

    Example

  • TS
  • this.Strip = [{
        start: 2,  
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.startFromAxis boolean

    Indicates whether to render the strip line from the minimum/start value of the axis. This property does not work when start property is set.

    Default Value

    • false

    Example

  • TS
  • this.Strip = [{    
        startFromAxis:true
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.text string

    Specifies text to be displayed inside the strip line.

    Default Value

    • “stripLine”

    Example

  • TS
  • this.Strip = [{    
        text: 'High Temperature',                                                                                           
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.textAlignment enum

    Specifies the alignment of the text inside the strip line.

    Name Type Description
    MiddleTop string The text has been aligned top of the stripline
    MiddleCenter string The text has been aligned in center of the stripline
    MiddleBottom string The text has been aligned bottom of the stripline

    Default Value

    Example

  • TS
  • this.Strip = [{  
        textAlignment: 'middletop',                                                                                          
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.visible boolean

    Show/hides the strip line.

    Default Value

    • false

    Example

  • TS
  • this.Strip = [{                                                                                         
        visible: true
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.width number

    Width of the strip line.

    Default Value

    • 0

    Example

  • TS
  • this.Strip = [{   
        width:0
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.stripLine.zIndex enum

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

    Name Type Description
    Inside string Displays the stripline inside the series
    Over string Displays the stripline over the series

    Default Value

    Example

  • TS
  • this.Strip = [{    
        zIndex: 'behind',    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.stripLine]="Strip"></ej-chart>

    primaryXAxis.tickLinesPosition enum

    Specifies the position of the axis tick lines.

    Name Type Description
    Inside string The tick lines are placed inside of the axis line
    Outside string The tick lines are placed outside of the axis line

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.tickLinesPosition="inside"></ej-chart>

    primaryXAxis.labelBorder object

    Options for customizing the border of the labels.

    primaryXAxis.labelBorder.color string

    Specifies the color of the label border.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelBorder.color="green" >
          <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.labelBorder.width number

    Specifies the width of the label border.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.labelBorder.width="2" >
          <!-- Write series code here-->
    </ej-chart>

    primaryXAxis.title object

    Options for customizing the axis title.

    primaryXAxis.title.enableTrim boolean

    Specifies whether to trim the axis title when it exceeds the chart area or the maximum width of the title.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer"[primaryXAxis.enableTrim]="true">  
    </ej-chart>

    primaryXAxis.title.font object

    Options for customizing the title font.

    primaryXAxis.title.font.fontFamily string

    Font family of the title text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • //Customize title font style
    this.titleFont={
        fontFamily:"Segoe UI", 
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont">
    </ej-chart>

    primaryXAxis.title.font.fontStyle enum

    Font style of the title text.

    Default Value

    • ej.datavisualization.Chart.FontStyle.Normal

    Example

  • TS
  • //Customize title font style
    this.titleFont={
        fontStyle:'Italic'
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>

    primaryXAxis.title.font.fontWeight enum

    Font weight of the title text.

    Default Value

    • ej.datavisualization.Chart.FontWeight.Regular. See FontWeight

    Example

  • TS
  • //Customize title font style
    this.titleFont={
         fontWeight: "bold"
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>

    primaryXAxis.title.font.opacity number

    Opacity of the axis title text.

    Default Value

    • 1

    Example

  • TS
  • //Customize title font style
    this.titleFont={
        opacity:0.8
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>

    primaryXAxis.title.font.size string

    Font size of the axis title.

    Default Value

    • “16px”

    Example

  • TS
  • //Customize title font style
    this.titleFont={ 
        size: "16px"
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.font]="titleFont"></ej-chart>

    primaryXAxis.title.maximumTitleWidth number

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

    Default Value

    • 34

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.title.maximumTitleWidth=null></ej-chart>

    primaryXAxis.title.text string

    Title for the axis.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.title.text="Month"></ej-chart>

    primaryXAxis.title.visible boolean

    Controls the visibility of axis title.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.visible]="false"></ej-chart>

    primaryXAxis.title.offset number

    offset value for axis title.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.title.offset]=10></ej-chart>

    primaryXAxis.title.position enum

    Specifies the position of the axis title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.title.position="inside"></ej-chart>

    primaryXAxis.title.alignment enum

    Specifies the position of the axis title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.title.alignment="near"></ej-chart>

    primaryXAxis.valueType enum

    Specifies the type of data the axis is handling.

    Name Type Description
    Double string Specify the numeric axis
    Category string Specify the category axis
    DateTime string Specify the datetime axis
    Logarithmic string Specify the logarithmic axis

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryXAxis.valueType="category"></ej-chart>

    primaryXAxis.visible boolean

    Show/hides the axis.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.visible]="false" ></ej-chart>

    primaryXAxis.zoomFactor number

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

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.zoomFactor]=0.5>    
    </ej-chart>

    primaryXAxis.zoomPosition number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryXAxis.zoomPosition]=0.5>    
    </ej-chart>

    primaryXAxis.scrollbarSettings object

    Options for customizing the axis scrollbar

    primaryXAxis.scrollbarSettings.visible boolean

    Specifies to enables or disables the scroll bar.

    Default Value

    • false

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {              
            visible: true,
    
    
         
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>

    primaryXAxis.scrollbarSettings.canResize boolean

    Controls whether scrollbar has to be responsive in the chart.

    Default Value

    • false

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {       
            // enable the resize option 
            canResize: true,       
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>

    primaryXAxis.scrollbarSettings.range object

    Options to customize the range for the scrollbar in the axis.

    primaryXAxis.scrollbarSettings.range.min number

    Minimum value of the scrollbar range.

    Default Value

    • null

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {                     
    
    
    range: {
    
    
    
    min: 10
    
    
    
    
    
    
    }
          
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>

    primaryXAxis.scrollbarSettings.range.max number

    Maximum value for the scrollbar range .

    Default Value

    • null

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {                      
    
    
    range: {
    
    
    
    max: 100
    
    
    
    
    
    
    }
          
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>

    primaryXAxis.scrollbarSettings.pointsLength number

    The maximum number of points to be displayed in the scrollbar.

    Default Value

    • null

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {              
            pointsLength: 50       
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis]="axis"></ej-chart>

    axes array

    To override x axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s xAxisName property to link both axis and series.

    axes.alternateGridBand object

    Options for customizing axis alternate grid band.

    axes.alternateGridBand.even object

    Options for customizing even grid band.

    axes.alternateGridBand.even.fill string

    Fill color for the even grid bands.

    Default Value

    • transparent

    Example

  • TS
  • this.axes = [{
        alternateGridBand:{
            even:{
                fill:'green'
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.alternateGridBand.even.opacity number

    Opacity of the even grid band.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        alternateGridBand:{
            even:{
                opacity:0.5
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.alternateGridBand.odd object

    Options for customizing odd grid band.

    axes.alternateGridBand.odd.fill string

    Fill color of the odd grid bands

    Default Value

    • transparent

    Example

  • TS
  • this.axes = [{
        alternateGridBand:{
            odd:{
                fill:'green'
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.alternateGridBand.odd.opacity number

    Opacity of odd grid band

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        alternateGridBand:{
            odd:{
                opacity:0.5
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.crossesAt number

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

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
       crossesAt: 0
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

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

    Default Value

    • null

    Example

    axes.isIndexed boolean

    Category axis can also plot points based on index value of data points. Index based plotting can be enabled by setting ‘isIndexed’ property to true.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
      isIndexed: true
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.axisLine object

    Options for customizing the axis line.

    axes.axisLine.dashArray string

    Pattern of dashes and gaps to be applied to the axis line.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        axisLine:{
            dashArray:'2,3'
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.axisLine.offset number

    Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        axisLine:{
            offset: 5
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.axisLine.visible boolean

    Show/hides the axis line.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
        axisLine:{
            visible: true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.axisLine.color string

    Color of axis line.

    Default Value

    • ””

    Example

  • TS
  • this.axes = [{
        axisLine:{
            color:'red'
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.axisLine.width number

    Width of axis line.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        axisLine:{
            width: 2
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.columnIndex number

    Specifies the index of the column where the axis is associated, when the chart area is divided into multiple plot areas by using columnDefinitions.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
       columnIndex:2
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.columnSpan number

    Specifies the number of columns or plot areas an axis has to span horizontally.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
       columnSpan:2
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.crosshairLabel object

    Options to customize the crosshair label.

    axes.crosshairLabel.visible boolean

    Show/hides the crosshair label associated with this axis.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
       crosshairLabel: {
           visible:true
       }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.desiredIntervals number

    With this setting, you can request axis to calculate intervals approximately equal to your desired interval.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
       desiredIntervals: 5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.labelPlacement enum

    Specifies the placement of labels.

    Default Value

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

    Example

  • TS
  • this.axes = [{
      labelPlacement :"onTicks"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.edgeLabelPlacement enum

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

    Default Value

    Example

  • TS
  • this.axes = [{
       edgeLabelPlacement : 'shift'
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.enableTrim boolean

    Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
       enableTrim : true
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.enableAutoIntervalOnZooming boolean

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

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
       enableAutoIntervalOnZooming  : true
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.font object

    Options for customizing the font of the axis Labels.

    axes.font.fontFamily string

    Font family of labels.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.axes = [{
       font : {
           fontFamily:'Algerian'
       }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.font.fontStyle enum

    Font style of labels.

    Default Value

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

    Example

  • TS
  • this.axes = [{
       font : {
           fontStyle:'Italic'
       }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.font.fontWeight enum

    Font weight of the label.

    Default Value

    • ej.datavisualization.Chart.FontWeight.Regular. See FontWeight

    Example

  • TS
  • this.axes = [{
       font : {
           fontWeight:'lighter'
       }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.font.opacity number

    Opacity of the axis labels.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
       font : {
           opacity: 0.5
       }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.font.size string

    Font size of the axis labels.

    Default Value

    • “13px”

    Example

  • TS
  • this.axes = [{
       font : {
           size: "12px"
       }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.intervalType enum

    Specifies the type of interval in date time axis.

    Default Value

    Example

  • TS
  • this.axes = [{
      intervalType:"days"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.isInversed boolean

    Specifies whether to inverse the axis.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
      isInversed: true
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.labelFormat string

    Custom formatting for axis label and supports all standard formatting type of numerical and date time values.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
      labelFormat:"{value}%"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.labelIntersectAction enum

    Specifies the action to take when the axis labels are overlapping with each other.

    Default Value

    Example

  • TS
  • this.axes = [{
      labelIntersectAction :"multipleRows"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.labelPosition enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • TS
  • this.axes = [{
      labelPosition :"inside"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.alignment enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • TS
  • this.axes = [{
        alignment: "far"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.labelRotation number

    Angle in degrees to rotate the axis labels.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
      labelRotation : 90
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.logBase number

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

    Default Value

    • 10

    Example

  • TS
  • this.axes = [{
      logBase : 5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorGridLines object

    Options for customizing major gird lines.

    axes.majorGridLines.dashArray string

    Pattern of dashes and gaps used to stroke the major grid lines.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
      majorGridLines : {
        dashArray:'2,3'
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorGridLines.color string

    Color of the major grid line.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
      majorGridLines : {
        color:"red"
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorGridLines.opacity number

    Opacity of major grid lines.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
      majorGridLines : {
        opacity:0.5
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorGridLines.visible boolean

    Show/hides the major grid lines.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
      majorGridLines : {
        visible:true
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorGridLines.width number

    Width of the major grid lines.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
      majorGridLines : {
        width:2
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorTickLines object

    Options for customizing the major tick lines.

    axes.majorTickLines.size number

    Length of the major tick lines.

    Default Value

    • 5

    Example

  • TS
  • this.axes = [{
      majorTickLines : {
        size:2
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorTickLines.visible boolean

    Show/hides the major tick lines.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
      majorTickLines : {
        visible: true
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.majorTickLines.width number

    Width of the major tick lines.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
      majorTickLines : {
        width: 2
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.maximumLabels number

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

    Default Value

    • 3

    Example

  • TS
  • this.axes = [{
      maximumLabels: 5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.maximumLabelWidth number

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

    Default Value

    • 34

    Example

  • TS
  • this.axes = [{
      maximumLabelWidth : 34.5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorGridLines object

    Options for customizing the minor grid lines.

    axes.minorGridLines.dashArray string

    Patterns of dashes and gaps used to stroke the minor grid lines.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
     minorGridLines:{
         dashArray:'2,3'
     }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorGridLines.visible boolean

    Show/hides the minor grid lines.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
     minorGridLines:{
         visible:true
     }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorGridLines.width number

    Width of the minorGridLines.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
     minorGridLines:{
         width: 2
     }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorTickLines object

    Options for customizing the minor tick lines.

    axes.minorTickLines.size number

    Length of the minor tick lines.

    Default Value

    • 5

    Example

  • TS
  • this.axes = [{
     minorTickLines:{
         size: 2
     }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorTickLines.visible boolean

    Show/hides the minor tick lines.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
     minorTickLines:{
         visible: true
     }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorTickLines.width number

    Width of the minor tick line.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
     minorTickLines:{
         width: 2
     }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.minorTicksPerInterval number

    Specifies the number of minor ticks per interval.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        minorTicksPerInterval: 5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.name string

    Unique name of the axis. To associate an axis with the series, you have to set this name to the xAxisName/yAxisName property of the series.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        name:"xAxis"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.opposedPosition boolean

    Specifies whether to render the axis at the opposite side of its default position.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        opposedPosition: true
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.orientation enum

    Specifies the orientation of the axis line in the chart.

    Default Value

    • ‘horizontal’

    Example

  • TS
  • this.axes = [{
        orientation: "vertical"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.plotOffset number

    Specifies the padding for the plot area.

    Default Value

    • 10

    Example

  • TS
  • this.axes = [{
        plotOffset: 10
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.range object

    Options to customize the range of the axis.

    axes.range.min number

    Minimum value of the axis range.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        range:{
            min: 10
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.range.max number

    Maximum value of the axis range.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        range:{
            max: 100
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.range.interval number

    Interval of the axis range.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        range:{
            interval: 10
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.rangePadding enum

    Specifies the padding for the axis range.

    Default Value

    Example

  • TS
  • this.axes = [{
        rangePadding :"normal"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.roundingPlaces number

    Rounds the number to the given number of decimals.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        roundingPlaces : 3
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels array

    Options for customizing the multi level labels.

    Default Value

    • [ ]

    axes.multiLevelLabels.visible boolean

    Visibility of the multi level labels.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           visible: true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.text string

    Text of the multi level labels.

    Default Value

    • ””

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           text: "2016"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.start number

    Starting value of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           start: 1
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.end number

    Ending value of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           end: 4
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.level number

    Specifies the level of multi level labels.

    Default Value

    • 0

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           level: 2
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.maximumTextWidth number

    Specifies the maximum width of the text in multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           maximumTextWidth: 30
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.textAlignment enum

    Specifies the alignment of the text in multi level labels.

    Default Value

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           textAlignment: "near"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.textOverflow enum

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

    Default Value

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           textOverflow: "trim"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.font object

    Options for customizing the font of the text.

    axes.multiLevelLabels.font.color string

    Font color of the multi level labels text.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           font: {
               color:"green"
           }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.font.fontFamily string

    Font family of the multi level labels text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           font: {
               fontFamily:"Algerian"
           }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.font.fontStyle enum

    Font style of the multi level labels text.

    Default Value

    • “Normal”

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           font: {
               fontStyle:"Bold"
           }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.font.fontWeight string

    Font weight of the multi level label text.

    Default Value

    • “regular”

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           font: {
               fontWeight:"lighter"
           }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.font.opacity number

    Opacity of the multi level label text.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           font: {
               opacity:0.5
           }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.font.size string

    Font size of the multi level label text.

    Default Value

    • “12px”

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
           font: {
               opacity:"15px"
           }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.border object

    Options for customizing the border of the series.

    axes.multiLevelLabels.border.color string

    Border color of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
            border:{
                color:"green"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.border.width number

    Border width of the multi level labels.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
            border:{
                width: 2
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.multiLevelLabels.border.type enum

    Border type of the multi level labels.

    Default Value

    • “rectangle”. See Type

    Example

  • TS
  • this.axes = [{
        multiLevelLabels: {
            border:{
                type:"brace"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.showNextToAxisLine boolean

    Specifies whether the axis elements need to be placed nearby the axis line, while crossing.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
        showNextToAxisLine : false
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine array

    Options for customizing the strip lines.

    Default Value

    • [ ]

    axes.stripLine.borderColor string

    Border color of the strip line.

    Default Value

    • “gray”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            borderColor:"green"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.color string

    Background color of the strip line.

    Default Value

    • “gray”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            color:"green"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.end number

    End value of the strip line.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        stripLine : {
            end: 5
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.font object

    Options for customizing the font of the text.

    axes.stripLine.font.color string

    Font color of the strip line text.

    Default Value

    • “black”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            font: {
                color:"green"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.font.fontFamily string

    Font family of the strip line text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            font: {
                fontFamily:"Algerian"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.font.fontStyle enum

    Font style of the strip line text.

    Default Value

    • “Normal”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            font: {
                fontStyle:"Bold"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.font.fontWeight string

    Font weight of the strip line text.

    Default Value

    • “regular”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            font: {
                fontWeight:"lighter"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.font.opacity number

    Opacity of the strip line text.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        stripLine : {
            font: {
                opacity: 0.5
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.font.size string

    Font size of the strip line text.

    Default Value

    • “12px”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            font: {
                size: "15px"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.start number

    Start value of the strip line.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        stripLine : {
            start: 2
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.startFromAxis boolean

    Indicates whether to render the strip line from the minimum/start value of the axis. This property does not work when start property is set.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        stripLine : {
            startFromAxis : true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.text string

    Specifies text to be displayed inside the strip line.

    Default Value

    • “stripLine”

    Example

  • TS
  • this.axes = [{
        stripLine : {
            text : "Empty Point"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.textAlignment enum

    Specifies the alignment of the text inside the strip line.

    Default Value

    Example

  • TS
  • this.axes = [{
        stripLine : {
            textAlignment  :  "middletop"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.visible boolean

    Show/hides the strip line.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        stripLine : {
            visible  :  true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.width number

    Width of the strip line.

    Default Value

    • 0

    Example

  • TS
  • this.axes = [{
        stripLine : {
            width  :  2
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.stripLine.zIndex enum

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

    Default Value

    Example

  • TS
  • this.axes = [{
        stripLine : {
            zIndex  :  "behind"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.tickLinesPosition enum

    Specifies the position of the axis tick lines.

    Default Value

    Example

    axes.labelBorder object

    Options for customizing the border of the labels.

    axes.labelBorder.color string

    Specifies the color of the label border.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
      labelBorder: {
          color:"green"
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.labelBorder.width number

    Specifies the width of the label border.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
      labelBorder: {
          width:2
      }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title object

    Options for customizing the axis title.

    axes.title.enableTrim boolean

    Specifies whether to trim the axis title when it exceeds the chart area or the maximum width of the title.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        title : {
            enableTrim  : true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.font object

    Options for customizing the title font.

    axes.title.font.fontFamily string

    Font family of the title text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.axes = [{
        title : {
            font  : {
                fontFamily:"Algerain"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.font.fontStyle enum

    Font style of the title text.

    Default Value

    • ej.datavisualization.Chart.FontStyle.Normal

    Example

  • TS
  • this.axes = [{
        title : {
            font  : {
                fontStyle:"Italic"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.font.fontWeight enum

    Font weight of the title text.

    Default Value

    • ej.datavisualization.Chart.FontWeight.Regular. See FontWeight

    Example

  • TS
  • this.axes = [{
        title : {
            font  : {
                fontWeight:"lighter"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.font.opacity number

    Opacity of the axis title text.

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        title : {
            font  : {
                opacity:0.5
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.font.size string

    Font size of the axis title.

    Default Value

    • “16px”

    Example

  • TS
  • this.axes = [{
        title : {
            font  : {
                size:"14px"
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.maximumTitleWidth number

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

    Default Value

    • 34

    Example

  • TS
  • this.axes = [{
        title : {
            maximumTitleWidth: null
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.text string

    Title for the axis.

    Default Value

    • ””

    Example

  • TS
  • this.axes = [{
        title : {
            text: "Year" 
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.visible boolean

    Controls the visibility of axis title.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
        title : {
            visible: true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.offset number

    offset value for axis title.

    Default Value

    • 0

    Example

  • TS
  • this.axes = [{
        title : {
            offset: 0
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.position enum

    Specifies the position of the axis title.

    Default Value

    Example

  • TS
  • this.axes = [{
        title : {
            position: "inside"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.title.alignment enum

    Specifies the position of the axis title.

    Default Value

    Example

  • TS
  • this.axes = [{
        title : {
            alignment  :  "near"
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.valueType enum

    Specifies the type of data the axis is handling.

    Default Value

    Example

  • TS
  • this.axes = [{
        valueType: "double"
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.visible boolean

    Show/hides the axis.

    Default Value

    • true

    Example

  • TS
  • this.axes = [{
        visible: true
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.zoomFactor number

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

    Default Value

    • 1

    Example

  • TS
  • this.axes = [{
        zoomFactor: 0.5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.zoomPosition number

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

    Default Value

    • 0

    Example

  • TS
  • this.axes = [{
        zoomPosition: 0.5
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.scrollbarSettings object

    Options for customizing the axis scrollbar.

    axes.scrollbarSettings.visible boolean

    Specifies to enable or disable the scrollbar.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        scrollbarSettings : {
            visible: true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.scrollbarSettings.canResize boolean

    Controls whether scrollbar has to be responsive in the chart.

    Default Value

    • false

    Example

  • TS
  • this.axes = [{
        scrollbarSettings : {
            canResize: true
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.scrollbarSettings.range object

    Options to customize the range for the scrollbar in the axis.

    axes.scrollbarSettings.range.min number

    Minimum value of the scrollbar range.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        scrollbarSettings : {
            range : {
                min: 10
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.scrollbarSettings.range.max number

    Maximum value for the scrollbar range .

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        scrollbarSettings : {
            range : {
                max: 100
            }
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    axes.scrollbarSettings.pointsLength number

    The maximum number of points to be displayed in the scrollbar.

    Default Value

    • null

    Example

  • TS
  • this.axes = [{
        scrollbarSettings : {
            pointsLength : 50
        }
    }];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="axes">
    </ej-chart>

    primaryYAxis object

    This is a vertical axis that contains options to configure axis. This is the primary y axis for all the series in series array. To override y axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s yAxisName property to link both axis and series.

    primaryYAxis.alternateGridBand object

    Options for customizing vertical axis alternate grid band.

    primaryYAxis.alternateGridBand.even object

    Options for customizing even grid band.

    primaryYAxis.alternateGridBand.even.fill string

    Fill color for the even grid bands.

    Default Value

    • transparent

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.alternateGridBand]="{even: {fill: '#A7A9AB'}}">    
    </ej-chart>

    primaryYAxis.alternateGridBand.even.opacity number

    Opacity of the even grid band.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.alternateGridBand]="{even: {fill: '#A7A9AB',opacity: 0.1}}">    
    </ej-chart>

    primaryYAxis.alternateGridBand.odd object

    Options for customizing odd grid band.

    primaryYAxis.alternateGridBand.odd.fill string

    Fill color of the odd grid bands.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.alternateGridBand]="{odd: {fill: '#A7A9AB'}}">    
    </ej-chart>

    primaryYAxis.alternateGridBand.odd.opacity number

    Opacity of odd grid band.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.alternateGridBand]="{odd: {fill: '#A7A9AB',opacity: 0.1}}">    
    </ej-chart>

    primaryYAxis.enableAutoIntervalOnZoomingboolean

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

    Default Value

    • true

    Example

    primaryYAxis.axisLine object

    Options for customizing the axis line.

    primaryYAxis.axisLine.dashArray string

    Pattern of dashes and gaps to be applied to the axis line.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.axisLine]="{dashArray: '2,3'}">    
    </ej-chart>

    primaryYAxis.axisLine.offset number

    Padding for axis line. Normally, it is used along with plotOffset to pad the plot area.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.axisLine]="{offset: 5}">    
    </ej-chart>

    primaryYAxis.axisLine.visible boolean

    Show/hides the axis line.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.axisLine]="{visible: true}">    
    </ej-chart>

    primaryYAxis.axisLine.color string

    Color of axis line.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.axisLine]="{color: 'red'}">    
    </ej-chart>

    primaryYAxis.axisLine.width number

    Width of axis line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.axisLine]="{width: 2}">    
    </ej-chart>

    primaryYAxis.crossesAt number

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

    Default Value

    • null

    Example

  • HTML
  • <!--Crosses primary x axis at 0 -->
    <ej-chart id="chartcontainer" [primaryYAxis.crossesAt]=0>
       <!-- Write series code here -->
    </ej-chart>

    primaryYAxis.crossesInAxis string

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

    Default Value

    • null

    Example

  • TS
  • //  Creating a secondary axis
    this.chartAxes = [{name:"secondaryXAxis"}];
  • HTML
  • <ej-chart id="chartcontainer"
           primaryYAxis.crossesInAxis="secondaryXAxis" [axes]="chartAxes">
    </ej-chart>

    primaryYAxis.crosshairLabel object

    Options to customize the crosshair label.

    primaryYAxis.crosshairLabel.visible boolean

    Show/hides the crosshair label associated with this axis.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart" [crosshair.visible]="true" 
                 [primaryYAxis.crosshairLabel.visible]="true">
    </ej-chart>

    primaryYAxis.desiredIntervals number

    With this setting, you can request axis to calculate intervals approximately equal to your desired interval.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.desiredIntervals]=2>    
    </ej-chart>

    primaryYAxis.labelPlacement enum

    Specifies the placement of labels.

    Default Value

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

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.labelPlacement="onticks">
    </ej-chart>

    primaryYAxis.edgeLabelPlacement enum

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

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.edgeLabelPlacement="shift">
    </ej-chart>

    primaryYAxis.enableTrim boolean

    Specifies whether to trim the axis label when the width of the label exceeds the maximumLabelWidth.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.enableTrim]="true">    
    </ej-chart>

    primaryYAxis.font object

    Options for customizing the font of the axis Labels.

    primaryYAxis.font.fontFamily string

    Font family of labels.

    Default Value

    • “Segoe UI”

    Example

  • HTML
  • <ej-chart id="chartcontainer"
              primaryYAxis.font.fontFamily="Segoe UI">
    </ej-chart>

    primaryYAxis.font.fontStyle enum

    Font style of labels.

    Default Value

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

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.font.fontStyle="Bold" >
    </ej-chart>

    primaryYAxis.font.fontWeight enum

    Font weight of the label.

    Default Value

    • ej.datavisualization.Chart.FontWeight.Regular. See FontWeight

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.font.fontWeight="bold">
    </ej-chart>

    primaryYAxis.font.opacity number

    Opacity of the axis labels.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" 
              [primaryYAxis.font.opacity]="0.8">
    </ej-chart>

    primaryYAxis.font.size string

    Font size of the axis labels.

    Default Value

    • “13px”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.font.size]="16px" >
    </ej-chart>

    primaryYAxis.intervalType enum

    Specifies the type of interval in date time axis.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.intervalType="years">
     </ej-chart>

    primaryYAxis.isInversed boolean

    Specifies whether to inverse the axis.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.isInversed]="true" >
    </ej-chart>

    primaryYAxis.labelFormat string

    Custom formatting for axis label and supports all standard formatting type of numerical and date time values.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.labelFormat="c">
    </ej-chart>

    primaryYAxis.labelIntersectAction enum

    Specifies the action to take when the axis labels are overlapping with each other.

    Default Value

    • ej.datavisualization.Chart.LabelIntersectAction.None

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.labelIntersectAction="multipleRows">
    </ej-chart>

    primaryYAxis.labelPosition enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.labelPosition="inside">
    </ej-chart>

    primaryYAxis.alignment enum

    Specifies the position of the axis labels.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer"  primaryYAxis.alignment="far">    
    </ej-chart>

    primaryYAxis.logBase number

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

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.logBase]=2>
    </ej-chart>

    primaryYAxis.majorGridLines object

    Options for customizing major gird lines.

    primaryYAxis.majorGridLines.dashArray string

    Pattern of dashes and gaps used to stroke the major grid lines.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.majorGridLines.dashArray='2,3'>
    </ej-chart>

    primaryYAxis.majorGridLines.color string

    Color of the major grid lines.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.majorGridLines.color="blue">
    </ej-chart>

    primaryYAxis.majorGridLines.opacity number

    Opacity of major grid lines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.majorGridLines.opacity]="0.5">
    </ej-chart>

    primaryYAxis.majorGridLines.visible boolean

    Show/hides the major grid lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" 
                [primaryYAxis.majorGridLines.visible]="true">
    </ej-chart>

    primaryYAxis.majorGridLines.width number

    Width of the major grid lines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.majorGridLines.width]=1>
    </ej-chart>

    primaryYAxis.majorTickLines object

    Options for customizing the major tick lines.

    primaryYAxis.majorTickLines.size number

    Length of the major tick lines.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.majorTickLines.size]=10>
    </ej-chart>

    primaryYAxis.majorTickLines.visible boolean

    Show/hides the major tick lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.majorTickLines.visible]="false">
    </ej-chart>

    primaryYAxis.majorTickLines.width number

    Width of the major tick lines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.majorTickLines.width]=1 >
    </ej-chart>

    primaryYAxis.maximumLabels number

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

    Default Value

    • 3

    Example

    primaryYAxis.maximumLabelWidth number

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

    Default Value

    • ej.datavisualization.Chart.maximumLabelWidth type {int}

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.maximumLabelWidth]="34.5" >
    </ej-chart>

    primaryYAxis.minorGridLines object

    Options for customizing the minor grid lines.

    primaryYAxis.minorGridLines.dashArray string

    Patterns of dashes and gaps used to stroke the minor grid lines.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.minorGridLines.dashArray='2,3'>
    </ej-chart>

    primaryYAxis.minorGridLines.visible boolean

    Show/hides the minor grid lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" 
                [primaryYAxis.minorGridLines.visible]="true">
    </ej-chart>

    primaryYAxis.minorGridLines.width number

    Width of the minorGridLines.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.minorGridLines.width]=1>
    </ej-chart>

    primaryYAxis.minorTickLines object

    Options for customizing the minor tick lines.

    primaryYAxis.minorTickLines.size number

    Length of the minor tick lines.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.minorTickLines.size]=10>
    </ej-chart>

    primaryYAxis.minorTickLines.visible boolean

    Show/hides the minor tick lines.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.minorTickLines.visible]="false">
    </ej-chart>

    primaryYAxis.minorTickLines.width number

    Width of the minor tick line

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.minorTickLines.width]=1 >
    </ej-chart>

    primaryYAxis.minorTicksPerInterval number

    Specifies the number of minor ticks per interval.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.minorTicksPerInterval]=0>
    </ej-chart>

    primaryYAxis.name string

    Unique name of the axis. To associate an axis with the series, you have to set this name to the xAxisName/yAxisName property of the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.name="" >
    </ej-chart>

    primaryYAxis.opposedPosition boolean

    Specifies whether to render the axis at the opposite side of its default position.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.opposedPosition]="true" >
    </ej-chart>

    primaryYAxis.orientation enum

    Specifies the orientation of the axis line in the chart.

    Default Value

    • Vertical

    Example

  • TS
  • //  Creating a secondary axis
    this.chartAxes = [{name:"secondaryXAxis", orientation: "horizontal"}];
  • HTML
  • <ej-chart id="chartcontainer" [axes]="chartAxes"></ej-chart>

    primaryYAxis.plotOffset number

    Specifies the padding for the plot area.

    Default Value

    • 10

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.plotOffset]=10>    
    </ej-chart>

    primaryYAxis.range object

    Options to customize the range of the axis.

    primaryYAxis.range.min number

    Minimum value of the axis range.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.range.min]=0></ej-chart>

    primaryYAxis.range.max number

    Maximum value of the axis range.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.range.max]=60></ej-chart>

    primaryYAxis.range.interval number

    Interval for the range.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.range.interval]=5></ej-chart>

    primaryYAxis.rangePadding enum

    Specifies the padding for the axis range.

    Default Value

    • ej.datavisualization.Chart.RangePadding.None. See RangePadding

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.rangePadding="normal"></ej-chart>

    primaryYAxis.roundingPlaces number

    Rounds the number to the given number of decimals.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.roundingPlaces]="3"></ej-chart>

    primaryYAxis.rowIndex number

    Specifies the index of the row to which the axis is associated, when the chart area is divided into multiple plot areas by using rowDefinitions.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.rowIndex]=2>    
    </ej-chart>

    primaryYAxis.rowSpan number

    Specifies the number of row or plot areas an axis has to span vertically.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.rowSpan]=2>    
    </ej-chart>

    primaryYAxis.multiLevelLabels array

    Options for customizing the multi level labels.

    Default Value

    • [ ]

    primaryYAxis.multiLevelLabels.visible boolean

    Visibility of the multi level labels.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.multiLevelLabels.visible]="true">    
    </ej-chart>

    primaryYAxis.multiLevelLabels.text string

    Text of the multi level labels.

    Default Value

    • ””

    Example

  • TS
  • this.multiLabels = [{       
            text: "Quater1",                       
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.start number

    Starting value of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{       
            start: 1,        
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.end number

    Ending value of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{        
            end: 4,        
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.level number

    Specifies the level of multi level labels.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.multiLevelLabels.level]=2>    
    </ej-chart>

    primaryYAxis.multiLevelLabels.maximumTextWidth number

    Specifies the maximum width of the text in multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{                               
            maximumtextWidth: 40 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.textAlignment enum

    Specifies the alignment of the text in multi level labels.

    Default Value

    Example

  • TS
  • this.multiLabels = [{ 
            // customizing the text alignment
            textAlignment: "near",
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">       
    </ej-chart>

    primaryYAxis.multiLevelLabels.textOverflow enum

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

    Default Value

    Example

  • TS
  • this.multiLabels = [{ 
           // customizing the text overflow  
           textOverflow: trim", 
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">       
    </ej-chart>

    primaryYAxis.multiLevelLabels.font object

    Options for customizing the font of the text.

    primaryYAxis.multiLevelLabels.font.color string

    Font color of the multi level labels text.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{           
            font:{         
             color: "green"                            
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.font.fontFamily string

    Font family of the multi level labels text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • this.multiLabels = [{            
            font:{
             fontFamily: "Algerian",                                     
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.font.fontStyle enum

    Font style of the multi level labels text.

    Default Value

    • “Normal”

    Example

  • TS
  • this.multiLabels = [{              
            font:{   
             fontStyle: "Bold",         
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">       
    </ej-chart>

    primaryYAxis.multiLevelLabels.font.fontWeight string

    Font weight of the multi level label text.

    Default Value

    • “regular”

    Example

  • TS
  • this.multiLabels = [{           
            font:{         
             fontWeight:"lighter",                                              
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.font.opacity number

    Opacity of the multi level label text.

    Default Value

    • 1

    Example

  • TS
  • this.multiLabels = [{               
            font:{         
             opacity: 0.5,                           
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.font.size string

    Font size of the multi level label text.

    Default Value

    • “12px”

    Example

  • TS
  • this.multiLabels = [{        
            font:{          
             size: "12px",         
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.border object

    Options for customizing the border of the series.

    primaryYAxis.multiLevelLabels.border.color string

    Border color of the multi level labels.

    Default Value

    • null

    Example

  • TS
  • this.multiLabels = [{       
            border:{          
               color: "green"
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.border.width number

    Border width of the multi level labels.

    Default Value

    • 1

    Example

  • TS
  • this.multiLabels = [{        
            border:{             
               width: 2,                   
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryXAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.multiLevelLabels.border.type enum

    Border type of the multi level labels.

    Default Value

    • “rectangle”. See Type

    Example

  • TS
  • this.multiLabels = [{       
            border:{  
               type: "brace",                   
            }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.multiLevelLabels]="multiLabels">
    </ej-chart>

    primaryYAxis.showNextToAxisLine boolean

    Specifies whether the axis elements need to be placed nearby the axis line, while crossing.

    Default Value

    • true

    Example

  • HTML
  • <!--Crosses horizontal axis at category value "zero" -->
    <ej-chart id="chartcontainer"  primaryYAxis.showNextToAxisLine="false"></ej-chart>

    primaryYAxis.scrollbarSettings object

    Options for customizing the axis scrollbar.

    primaryYAxis.scrollbarSettings.visible boolean

    Specifies to enable or disable the scrollbar.

    Default Value

    • false

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {              
            visible: true,
    
    
    
          
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis]="axis"></ej-chart>

    primaryYAxis.scrollbarSettings.canResize boolean

    Controls whether scrollbar has to be responsive in the chart.

    Default Value

    • false

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {       
            // enable the resize option 
            canResize: true,       
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis]="axis"></ej-chart>

    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

  • TS
  • this.axis = {
        scrollbarSettings: {                     
    
    
    range: {
    
    
    
    min: 10
    
    
    
    
    
    
    }
          
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis]="axis"></ej-chart>

    primaryYAxis.scrollbarSettings.range.max number

    Maximum value for the scrollbar range .

    Default Value

    • null

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {                       
    
    
    range: {
    
    
    
    max: 100
    
    
    
    
    
    
    }
          
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis]="axis"></ej-chart>

    primaryYAxis.scrollbarSettings.pointsLength number

    The maximum number of points to be displayed in the scrollbar.

    Default Value

    • null

    Example

  • TS
  • this.axis = {
        scrollbarSettings: {             
            pointsLength: 50       
        }
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis]="axis"></ej-chart>

    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

  • TS
  • this.Strip = [{                                                                                                             
        borderColor: 'gray',    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.color string

    Background color of the strip line.

    Default Value

    • “gray”

    Example

  • TS
  • this.Strip = [{                                                                                                        
        color: 'green',    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.end number

    End value of the strip line.

    Default Value

    • null

    Example

  • TS
  • this.Strip = [{  
        end: 5,                                                                                                                 
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    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

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: { color: 'green' },
        visible: true
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.font.fontFamily string

    Font family of the strip line text.

    Default Value

    • “Segoe UI”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: { fontFamily:"Algerian"},    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.font.fontStyle enum

    Font style of the strip line text.

    Default Value

    • “Normal”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: {
            fontStyle:"Italic"
        },    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.font.fontWeight string

    Font weight of the strip line text.

    Default Value

    • “regular”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: {
            fontWeight: "lighter"
            },    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.font.opacity number

    Opacity of the strip line text.

    Default Value

    • 1

    Example

  • TS
  • //Customize title font style
    this.Strip = [{  
        font: {opacity:0.5},    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.font.size string

    Font size of the strip line text.

    Default Value

    • “12px”

    Example

  • TS
  • //Customize title font style
    this.Strip = [{   
        font: {
            size: "16px"
        },    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.start number

    Start value of the strip line.

    Default Value

    • null

    Example

  • TS
  • this.Strip = [{
        start: 2,   
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    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

  • TS
  • this.Strip = [{  
        startFromAxis:true
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.text string

    Specifies text to be displayed inside the strip line.

    Default Value

    • “stripLine”

    Example

  • TS
  • this.Strip = [{  
        text: 'High Temperature',                                                                                           
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.textAlignment enum

    Specifies the alignment of the text inside the strip line.

    Default Value

    Example

  • TS
  • this.Strip = [{   
        textAlignment: 'middletop',                                                                                          
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.visible boolean

    Show/hides the strip line.

    Default Value

    • false

    Example

  • TS
  • this.Strip = [{                                                                                       
        visible: true
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.stripLine.width number

    Width of the strip line.

    Default Value

    • 0

    Example

  • TS
  • this.Strip = [{   
        width:0
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    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

  • TS
  • this.Strip = [{   
        zIndex: 'behind',    
    }]
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.stripLine]="Strip"></ej-chart>

    primaryYAxis.tickLinesPosition enum

    Specifies the position of the axis tick lines.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.tickLinesPosition="inside"></ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.labelBorder.color="green" >
          <!-- Write series code here-->
    </ej-chart>

    primaryYAxis.labelBorder.width number

    Specifies the width of the label border.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.labelBorder.width]="2" >
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.enableTrim]="true">    
    </ej-chart>

    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

  • TS
  • //Customize title font style
    this.titleFont={
        fontFamily:"Segoe UI"
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.title.font]="titleFont"></ej-chart>

    primaryYAxis.title.font.fontStyle enum

    Font style of the title text.

    Default Value

    • ej.datavisualization.Chart.FontStyle.Normal

    Example

  • TS
  • //Customize title font style
    this.titleFont={
        fontStyle:"italic"
    };
  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.title.font]="titleFont"></ej-chart>

    primaryYAxis.title.font.fontWeight enum

    Font weight of the title text.

    Default Value

    • ej.datavisualization.Chart.FontWeight.Regular. See FontWeight

    Example

  • TS
  • //Customize title font style
    this.titleFont={
         fontWeight: "bold"
    };
  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.title.font]="titleFont"></ej-chart>

    primaryYAxis.title.font.opacity number

    Opacity of the axis title text.

    Default Value

    • 1

    Example

  • TS
  • //Customize title font style
    this.titleFont={
         opacity:0.8
         };
  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.title.text="Month" [primaryYAxis.title.font]="titleFont"></ej-chart>

    primaryYAxis.title.font.size string

    Font size of the axis title.

    Default Value

    • “16px”

    Example

  • TS
  • //Customize title font style
    this.titleFont={
         size: "16px"
        };
  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.title.text="Month" [primaryYAxis.title.font]="titleFont"></ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.title.maximumTitleWidth=null></ej-chart>

    primaryYAxis.title.text string

    Title for the axis.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.title.text="Month"></ej-chart>

    primaryYAxis.title.visible boolean

    Controls the visibility of axis title.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.title.visible]="false"></ej-chart>

    primaryYAxis.title.offset number

    offset value for axis title.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.title.offset]=10></ej-chart>

    primaryYAxis.title.position enum

    Specifies the position of the axis title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.title.position="inside"></ej-chart>

    primaryYAxis.title.alignment enum

    Specifies the position of the axis title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer"  primaryYAxis.title.alignment="near"></ej-chart>

    primaryYAxis.valueType enum

    Specifies the type of data the axis is handling.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" primaryYAxis.valueType="category"></ej-chart>

    primaryYAxis.visible boolean

    Show/hides the axis.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [primaryYAxis.visible]="false" ></ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.zoomFactor]=0.5>    
    </ej-chart>

    primaryYAxis.zoomPosition number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer"  [primaryYAxis.zoomPosition]=0.5>    
    </ej-chart>

    rotation number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer" [rotation]=45>    
    </ej-chart>

    rowDefinitions array

    Options to split Chart into multiple plotting areas horizontally. Each object in the collection represents a plotting area in Chart.

    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

  • HTML
  • <ej-chart id="chartcontainer" [roeDefinitions]="{unit:'percentage'}">    
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" [rowDefinitions]="{rowHeight:50}">    
    </ej-chart>

    rowDefinitions.lineColor string

    Color of the line that indicates the starting point of the row in plotting area.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [rowDefinitions]="{lineColor:'green'}">    
    </ej-chart>

    rowDefinitions.lineWidth number

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

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [roeDefinitions]="{lineWidth:2}">    
    </ej-chart>

    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

    SERIES.BEARFILLCOLOR

    series.border object

    Options for customizing the border of the series.

    series.border.color string

    Border color of the series.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series border.color="green"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.border.width number

    Border width of the series.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="container">
        <e-seriescollection>
            <e-series [border.width]="2"></e-series>
        </e-seriescollection>
    </ej-chart>

    series.border.dashArray string

    DashArray for border of the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series border.dashArray='2,3'></e-series>
         </e-seriescollection>
    </ej-chart>

    series.bullFillColor string

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

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series bullFillColor="green"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.columnFacet enum

    To render the column and bar type series in rectangle/cylinder shape. See ColumnFacet

    Default Value

    • “rectangle”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series columnFacet="cylinder"></e-series>
         </e-seriescollection>
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [columnWidth]=0.2></e-series>
         </e-seriescollection>
    </ej-chart>

    series.columnSpacing number

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

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [columnSpacing]=0.2></e-series>
         </e-seriescollection>
    </ej-chart>

    series.stackingGroup string

    To group the series of stacking collection.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series stackingGroup =" "> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.dashArray string

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

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series dashArray="2,3"></e-series>
         </e-seriescollection>
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [dataSource]="data"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.doughnutCoefficient number

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

    Default Value

    • 0.4

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [doughnutCoefficient]=0.5></e-series>
         </e-seriescollection>
    </ej-chart>

    series.doughnutSize number

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

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [doughnutSize]=0.6></e-series>
         </e-seriescollection>
    </ej-chart>

    series.drawType enum

    Type of series to be drawn in radar or polar series.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series drawType ="column"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.enableAnimation boolean

    Enable/disable the animation of series.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [enableAnimation]="true"> </e-series>
    </e-seriescollection>    
    
    </ej-chart>

    series.enableSmartLabels number

    To avoid overlapping of data labels smartly.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
                visible: true,
                shape: 'none',
                connectorLine: { type: 'bezier', color: 'black' },
                font: { size: '14px' }
        }};
  • HTML
  • <ej-chart id="chartcontainer">  
     <e-seriescollection>
            <e-series [enableSmartLabels]="true" marker="dataMarker"> </e-series>
        </e-seriescollection>  
    
    </ej-chart>

    series.endAngle number

    End angle of pie/doughnut series. For a complete circle, it has to be 360, by default.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [endAngle]=270> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.explode boolean

    Explodes the pie/doughnut slices on mouse move.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series [explode]="true"> </e-series>
        </e-seriescollection>     
    </ej-chart>

    series.explodeAll boolean

    Explodes all the slice of pie/doughnut on render.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series [explodeAll]="true"> </e-series>
        </e-seriescollection>     
    </ej-chart>

    series.explodeIndex number

    Index of the point to be exploded from pie/doughnut/pyramid/funnel.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [explodeIndex]=2> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.explodeOffset number

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

    Default Value

    • 25

    Example

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series [explodeOffset]=20> </e-series>
        </e-seriescollection>     
    </ej-chart>

    series.fill string

    Fill color of the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series fill="green"> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.font object

    Options for customizing the series font.

    series.font.color string

    Font color of the series text.

    Default Value

    • “#707070”

    Example

    series.font.fontFamily string

    Font Family of the series.

    Default Value

    • “Segoe UI”

    Example

  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [font]="{fontFamily:'Algerian'}"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.font.fontStyle enum

    Font Style of the series.

    Default Value

    • “Normal”

    Example

  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [font]="{fontStyle:'italic'}"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.font.fontWeight enum

    Font weight of the series.

    Default Value

    • “Regular”

    Example

  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [font]="{fontWeight:'lighter'}"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.font.opacity number

    Opacity of series text.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [font]="{opacity:0.5}"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.font.size string

    Size of the series text.

    Default Value

    • “12px”

    Example

    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

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series funnelHeight="40%"> </e-series>
        </e-seriescollection>     
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series funnelWidth="40%"> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.gapRatio number

    Gap between the slices of pyramid/funnel series.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series [gapRatio]=0.5> </e-series>
        </e-seriescollection>     
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [isClosed]="false"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.isStacking boolean

    Specifies whether to stack the column series in polar/radar charts.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [isStacking]="true"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.isTransposed boolean

    Renders the chart vertically. This is applicable only for Cartesian type series.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [isTransposed]="false"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series showMedian="true"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series labelPosition="outside"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    ### series.splitMode enum

    Specifies the mode for splitting the data points in pieOfPie series.

    Default Value

    Example

    series.boxPlotMode enum

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

    Default Value

    • “exclusive”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series boxPlotMode="inclusive"></e-series>
         </e-seriescollection>
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series bubbleOptions.radiusMode="minMax"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.bubbleOptions.minRadius number

    Used for the setting the minimum radius of the bubble

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [bubbleOptions.minRadius]=1></e-series>
         </e-seriescollection>
    </ej-chart>

    series.bubbleOptions.maxRadius number

    Used for setting the maximum radius of the bubble

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [bubbleOptions.maxRadius]=7></e-series>
         </e-seriescollection>
    </ej-chart>

    series.lineCap enum

    Specifies the line cap of the series.

    Default Value

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series lineCap="butt"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.lineJoin enum

    Specifies the type of shape to be used where two lines meet.

    Default Value

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series lineJoin="round"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        visible:true,
    
    border:{color:'green'},    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.border.width number

    Border width of the marker shape.

    Default Value

    • 3

    Example

  • TS
  • this.dataMarker = {
        visible:true,
    
    border:{width:2},    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            angle:90
    
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.maximumLabelWidth number

    Maximum label width of the data label.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
           maximumLabelWidth:90    
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.enableWrap boolean

    Enable the wrap option to the data label.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{        
            enableWrap:true,        
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{        
            border:{color:'green'}
    
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.border.width number

    Border width of the data label.

    Default Value

    • 0.1

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
            border:{width:2}
    
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{        
             connectorLine: { type: 'bezier' }
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.connectorLine.width number

    Width of the connector.

    Default Value

    • 0.5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{        
             connectorLine: { width: 2 }
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.connectorLine.color string

    Color of the connector.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
             connectorLine: { color: 'black' }
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    ### series.marker.dataLabel.connectorLine.height number

    Height of the connector.

    Default Value

    • null

    Example

    series.marker.dataLabel.fill string

    Background color of the data label.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
            fill:'green',        
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{        
            font: { fontFamily: 'Algerian' }       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker" > </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.font.color string

    Font color of the data label text.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{        
            font: { color: 'red' }       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { fontStyle: 'italic' }       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
            visible:true,
            font: { fontWeight: 'lighter' }       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{        
            font: { opacity: 0.5 }       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.font.size string

    Font size of the data label.

    Default Value

    • “12px”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{        
            font: { size: '14px' }       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.horizontalTextAlignment enum

    Horizontal alignment of the data label.

    Default Value

    • “center”

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{        
            horizontalTextAlignment:"far"       
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{       
           margin:{bottom:10}     
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.margin.left number

    Left margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
           margin:{left:10}     
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.margin.right number

    Right margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
           margin:{right:10}     
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.margin.top number

    Top margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
           margin:{top:10}     
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.opacity number

    Opacity of the data label.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
           opacity:0.5
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{       
           shape:'circle'
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.dataLabel.textMappingName string

    Name of a field in data source where datalabel text is displayed.

    Default Value

    • ””

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{      
           textMappingName:'TextFieldName'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{
          textPosition:'bottom'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
         
    </ej-chart>

    series.marker.dataLabel.verticalTextAlignment enum

    Vertical alignment of the data label.

    Default Value

    • ‘center’

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          verticalTextAlignment: 'far'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
         
    </ej-chart>

    series.marker.dataLabel.visible boolean

    Controls the visibility of the data labels.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          visible: true
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
       
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{       
           template:'LabelTemplateID'
        }   
    };
  • HTML
  • <div id="LabelTemplateID">
         <div id="left">
    
    <img src="../images/chart/icon_investments.png"/>
         </div>
         <div id="right">
              <div id="point">#point.y#%</div>
         </div>
    </div>
    
    <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    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

    series.marker.dataLabel.offset.y number

    Y value or vertical offset to position the labels.

    Default Value

    • 0

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{       
           offset:{y:10}
        }   
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.fill string

    Color of the marker shape.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        fill: "green"
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
         imageUrl: "../images/sample.png"
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.marker.opacity number

    Opacity of the marker.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        opacity: 0.5
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.marker.shape enum

    Specifies the shape of the marker.

    Default Value

    • “circle”. See Shape

    Example

  • TS
  • this.dataMarker = {
        shape: "rectangle"
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    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

  • TS
  • this.dataMarker = {    
          size:{height:5}    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.size.width number

    Width of the marker.

    Default Value

    • 6

    Example

  • TS
  • this.dataMarker = {    
          size:{width:5}    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.marker.visible boolean

    Controls the visibility of the marker shape.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        visible: true  
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.name string

    Name of the series, that is to be displayed in the legend.

    Default Value

    Add a comment to this line

    • ””

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series name=""> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.opacity number

    Opacity of the series.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [opacity]=0.5> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.outlierSettings = {
        shape:"rectangle"   
    };
  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [outlierSettings]="outlierSettings"> </e-series>
    </e-seriescollection>   
       
    </ej-chart>

    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

  • TS
  • this.outlierSettings = {
        size:{
          height: 5
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [outlierSettings]="outlierSettings"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.outlierSettings.size.width number

    Width of the outlier shape.

    Default Value

    • 6

    Example

  • TS
  • this.outlierSettings = {
        size:{
          width: 2
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [outlierSettings]="outlierSettings"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.palette string

    Name of a field in data source where fill color for all the data points is generated.

    Default Value

    • ””

    Example

    series.pieCoefficient number

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

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [pieCoefficient]=1> </e-series>
    </e-seriescollection>   
         
    </ej-chart>

    series.pieOfPieCoefficient number

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

    Default Value

    • 0.6

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [pieofpiecoefficient]=1> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    ### series.splitValue string

    Split Value of pieofpie series.

    Default Value

    • null

    Example

    series.splineType enum

    To render spline series curves in different forms.

    Default Value

    • “natural”

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series splineType="Natural"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.cardinalSplineTension number

    Different values for the tension parameter will produce different curves through a given set of points.Value ranges from 0 to 1.

    Default Value

    • 0.5

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [cardinalSplineTension]="0.5"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.gapWidth number

    Distance between the two pie’s in pieOfPie series.

    Default Value

    • 50

    Example

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series [gapWidth]=300> </e-series>
        </e-seriescollection>     
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">
      <e-seriescollection>
            <e-series [emptyPointSettings.visible]="true"> </e-series>
        </e-seriescollection>    
      </ej-chart>

    series.emptyPointSettings.displayMode enum

    Specifies the mode of empty point.

    Default Value

    • “gap”

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
      <e-seriescollection>
            <e-series emptyPointSettings.displayMode ="average"></e-series>
         </e-seriescollection>   
      </ej-chart>

    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

  • TS
  • this.emptyStyle = {
        color: "#ffa000",   
    };
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [emptyPointSettings.visible]="true" emptyPointSettings.style="emptyStyle"> </e-series>
        </e-seriescollection>
    </ej-chart>

    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

  • TS
  • this.emptyStyle = {
        color: "#ffa000",
        border: {
            color: "gray",       
        }
    };
  • HTML
  • <ej-chart id="chartcontainer">
        <e-seriescollection>
            <e-series [emptyPointSettings.visible]="true" emptyPointSettings.style="emptyStyle"> </e-series>
         </e-seriescollection>
    </ej-chart>

    series.emptyPointSettings.style.border.width number

    Border width of the empty point.

    Default Value

    • 1

    Example

  • TS
  • this.emptyStyle = {   
        border: {        
            width: 2
        }
    };
  • HTML
  • <ej-chart id="chartcontainer">
        <e-seriescollection>
            <e-series [emptyPointSettings.visible]="true" emptyPointSettings.style="emptyStyle"> </e-series>
        </e-seriescollection>
    </ej-chart>

    series.positiveFill string

    Fill color for the positive column of the waterfall.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series positiveFill="red"> </e-series>
    </e-seriescollection>     
    </ej-chart>

    series.connectorLine object

    Options for customizing the waterfall connector line.

    series.connectorLine.width number

    Width of the connector line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [connectorLine.width]=1></e-series>
         </e-seriescollection>
    </ej-chart>

    series.connectorLine.color string

    Color of the connector line.

    Default Value

    • “#565656”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series connectorLine.color="grey"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.connectorLine.dashArray string

    DashArray of the connector line.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series connectorLine.dashArray="2,3"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.connectorLine.opacity number

    Opacity of the connector line.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [connectorLine.opacity]=0.5></e-series>
         </e-seriescollection>
    </ej-chart>

    series.dragSettings object

    Options to customize the drag and drop in series.

    series.dragSettings.enable boolean

    drag/drop the series

    Default Value

    • “false”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [dragSettings.enable]="true"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.dragSettings.type string

    Specifies the type of drag settings.

    Default Value

    • “xy”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [dragSettings.type]="x"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.errorBar object

    Options to customize the error bar in series.

    series.errorBar.visibility boolean

    Show/hides the error bar

    Default Value

    • “visible”

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series errorBar.visibility="visible"> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.errorBar.type enum

    Specifies the type of error bar.

    Default Value

    • “FixedValue”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series errorBar.type="Percentage"> </e-series>
        </e-seriescollection>      
    </ej-chart>

    series.errorBar.mode enum

    Specifies the mode of error bar.

    Default Value

    • “vertical”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series errorBar.mode ="Horizontal"> </e-series>
        </e-seriescollection>      
    </ej-chart>

    series.errorBar.direction enum

    Specifies the direction of error bar.

    Default Value

    • “both”

    Example

  • HTML
  • <ej-chart id="chartcontainer">   
    <e-seriescollection>
            <e-series errorBar.direction="plus"> </e-series>
        </e-seriescollection>   
    </ej-chart>

    series.errorBar.verticalErrorValue number

    Value of vertical error bar.

    Default Value

    • 3

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [errorBar.verticalErrorValue]=1> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.errorBar.horizontalErrorValue number

    Value of horizontal error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [errorBar.horizontalErrorValue]=1> </e-series>
        </e-seriescollection>      
    </ej-chart>

    series.errorBar.horizontalPositiveErrorValue number

    Value of positive horizontal error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [errorBar.horizontalPositiveErrorValue]=1> </e-series>
        </e-seriescollection>     
    </ej-chart>

    series.errorBar.horizontalNegativeErrorValue number

    Value of negative horizontal error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [endAnerrorBar.horizontalNegativeErrorValue]=1> </e-series>
        </e-seriescollection>      
    </ej-chart>

    series.errorBar.verticalPositiveErrorValue number

    Value of positive vertical error bar.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer">
     <e-seriescollection>
            <e-series [errorBar.verticalPositiveErrorValue]=1> </e-series>
        </e-seriescollection>     
    </ej-chart>

    series.errorBar.verticalNegativeErrorValue number

    Value of negative vertical error bar.

    Default Value

    • 5

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [errorBar.verticalNegativeErrorValue]=1> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.errorBar.fill string

    Fill color of the error bar.

    Default Value

    • “#000000”

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series errorBar.fill="red"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    series.errorBar.width number

    Width of the error bar.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [errorBar.width]=1> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.errorBar.cap object

    Options for customizing the error bar cap.

    series.errorBar.cap.visible boolean

    Show/Hides the error bar cap.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [errorBar.cap.visible]="true"> </e-series>
        </e-seriescollection>      
    </ej-chart>

    series.errorBar.cap.width number

    Width of the error bar cap.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [errorBar.cap.width]=1> </e-series>
        </e-seriescollection>     
    </ej-chart>

    series.errorBar.cap.length number

    Length of the error bar cap.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [errorBar.cap.length]=10> </e-series>
        </e-seriescollection>    
    </ej-chart>

    series.errorBar.cap.fill string

    Color of the error bar cap.

    Default Value

    • “#000000”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [errorBar.cap.fill]="red"> </e-series>
        </e-seriescollection>      
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series points.border.color="green"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.border.width number

    Border width of the point.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [points.border.width]=2> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.visibleOnLegend string

    Enables or disables the visibility of legend item.

    Default Value

    • “visible”

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series points.visibleOnLegend="hidden"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.showIntermediateSum boolean

    To show/hide the intermediate summary from the last intermediate point.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [points.showIntermediateSum]="true"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.showTotalSum boolean

    To show/hide the total summary of the waterfall series.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [points.showTotalSum]="true"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.close number

    Close value of the point. Close value is applicable only for financial type series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series points.close="close"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.size number

    Size of a bubble in the bubble series. This is applicable only for the bubble series.

    Default Value

    • null

    Example

    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

    SERIES.POINTS.FILL

    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

    SERIES.POINTS.HIGH

    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

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series points.low="low"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        border: {
            color:"red"
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.border.width number

    Border width of the marker shape.

    Default Value

    • 3

    Example

  • TS
  • this.dataMarker = {
        border: {
            width: 2
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel: {
            angle: 90
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel: {
            border: {
                color:"red"
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.border.width number

    Border width of the data label.

    Default Value

    • 0.1

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            border: {
                width:2
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel: {
            connectorLine: {
                type:"bezier"
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.connectorLine.width number

    Width of the connector.

    Default Value

    • 0.5

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            connectorLine: {
                width:2
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.fill string

    Background color of the data label.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            fill:"green"
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel: {
            font:{
                fontFamily:"algerian"
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.font.fontStyle enum

    Font style of the data label.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            font:{
                fontStyle:"italic"
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.font.fontWeight enum

    Font weight of the data label.

    Default Value

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            font:{
                fontWeight:"lighter"
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.font.opacity number

    Opacity of the text.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            font:{
                opacity: 0.5
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.font.size string

    Font size of the data label.

    Default Value

    • “12px”

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            font:{
                size: "15px"
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.horizontalTextAlignment enum

    Horizontal alignment of the data label.

    Default Value

    • “center”

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            horizontalTextAlignment:"far"
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel: {
            margin:{
                bottom:10
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

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

    Left margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            margin:{
                left:10
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

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

    Right margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            margin:{
                right:10
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

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

    Top margin of the text.

    Default Value

    • 5

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            margin:{
                top:10
            }
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.dataLabel.opacity number

    Opacity of the data label.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        dataLabel: {
            opacity:0.5
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel: {
            shape:"rectangle"
        }
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{
          textPosition:'bottom'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
         
    </ej-chart>

    series.points.marker.dataLabel.verticalTextAlignment enum

    Vertical alignment of the data label.

    Default Value

    • ‘center’

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          verticalTextAlignment: 'far'
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
         
    </ej-chart>

    series.points.marker.dataLabel.visible boolean

    Controls the visibility of the data labels.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        dataLabel:{
          visible: true
        }   
    };
  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
       
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
        dataLabel:{       
           template:'LabelTemplateID'
        }   
    };
  • HTML
  • <div id="LabelTemplateID">
         <div id="left">
    
    <img src="../images/chart/icon_investments.png"/>
         </div>
         <div id="right">
              <div id="point">#point.y#%</div>
         </div>
    </div>
    
    <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.points.marker.dataLabel.offset number

    Moves the label vertically by specified offset.

    Default Value

    • 0

    Example

    series.points.marker.fill string

    Color of the marker shape.

    Default Value

    • null

    Example

  • TS
  • this.dataMarker = {
        fill: "green"
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    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

  • TS
  • this.dataMarker = {
         imageUrl: "../images/sample.png"
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.points.marker.opacity number

    Opacity of the marker.

    Default Value

    • 1

    Example

  • TS
  • this.dataMarker = {
        opacity: 0.5
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    series.points.marker.shape enum

    Specifies the shape of the marker.

    Default Value

    • “circle”. See Shape

    Example

  • TS
  • this.dataMarker = {
        shape: "rectangle"
    };
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    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

  • TS
  • this.dataMarker = {    
          size:{height:5}    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.size.width number

    Width of the marker.

    Default Value

    • 6

    Example

  • TS
  • this.dataMarker = {    
          size:{width:5}    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.marker.visible boolean

    Controls the visibility of the marker shape.

    Default Value

    • false

    Example

  • TS
  • this.dataMarker = {
        visible: true  
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [points.marker]="dataMarker"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.open number

    Open value of the point. This is applicable only for financial type series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series points.open=""> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.text string

    Datalabel text for the point.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [points.text]="20%"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.x number

    X value of the point.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series points.x="x"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.points.y number

    Y value of the point.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series points.y="y"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.pyramidMode enum

    Specifies the mode of the pyramid series.

    Default Value

    • “linear”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series pyramidMode="linear"> </e-series>
    </e-seriescollection>      
    </ej-chart>

    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

    SERIES.QUERY

    series.startAngle number

    Start angle from where the pie/doughnut series renders. It starts from 0, by default.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [startAngle]=150> </e-series>
    </e-seriescollection> 
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [cornerRadius]=10></e-series>
         </e-seriescollection>
    </ej-chart>

    series.cornerRadius.topLeft number

    Specifies the radius for the top left corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [cornerRadius.topLeft]=10></e-series>
         </e-seriescollection>
    </ej-chart>

    series.cornerRadius.topRight number

    Specifies the radius for the top right corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [cornerRadius.topRight]=10></e-series>
         </e-seriescollection>
    </ej-chart>

    series.cornerRadius.bottomLeft number

    Specifies the radius for the bottom left corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [cornerRadius.bottomLeft]=10></e-series>
         </e-seriescollection>
    </ej-chart>

    series.cornerRadius.bottomRight number

    Specifies the radius for the bottom right corner.

    Default Value

    • 0

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series [cornerRadius.bottomRight]=10></e-series>
         </e-seriescollection>
    </ej-chart>

    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

  • TS
  • this.tooltip = {    
           visible:true,
           border:{color:'green'}    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="tooltip"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.border.width number

    Border Width of the tooltip.

    Default Value

    • 1

    Example

  • TS
  • this.tooltip = {    
           visible:true,
           border:{width:2}    
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="tooltip"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.rx number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="{rx: 10}"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.ry number

    Customize the corner radius of the tooltip rectangle.

    Default Value

    0

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="{ry: 10}"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.duration string

    Specifies the duration, the tooltip has to be displayed.

    Default Value

    • “500ms”

    Example

  • TS
  • this.tooltip = {           
           duration:"300ms"   
    };
  • HTML
  • <ej-chart id="container" [commonSeriesOptions.tooltip]="tooltip" >
    <e-seriescollection>
            <e-series [tooltip]="tooltip"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.enableAnimation boolean

    Enables/disables the animation of the tooltip when moving from one point to another.

    Default Value

    • true

    Example

  • TS
  • this.tooltip = {           
          enableAnimation: false
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="tooltip"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.fill string

    Background color of the tooltip.

    Default Value

    • null

    Example

  • TS
  • this.tooltip = {           
          fill: 'green'
    };
  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="tooltip"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.format string

    Format of the tooltip content.

    Default Value

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

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="{format:'#point.x# : #point.y#%'}"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.tooltip.opacity number

    Opacity of the tooltip.

    Default Value

    • 0.95

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [tooltip]="{opacity: 0.5}"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    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

  • HTML
  • <body>   
        <!-- Create Tooltip template here -->
        <div id="Tooltip" style="display: none;">
            <div id="icon"> 
                <div id="eficon"> </div>  
            </div>
            <div id="value">
                <div>
                   <label id="efpercentage">&nbsp;#point.y#% </label>
                   <label id="ef">Efficiency </label>
                </div>
            </div>
        </div>
    
    <ej-chart id="chart">
    <e-seriescollection>
            <e-series [tooltip]="{template:'Tooltip'}"> </e-series>
    </e-seriescollection>         
    </ej-chart>
    
    </body>

    series.tooltip.visible boolean

    Controls the visibility of the tooltip.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chart">        
    <e-seriescollection>
            <e-series [tooltip.visible]="true"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.type enum

    Specifies the type of the series to render in chart.

    Default Value

    • “column”. see Type

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series type = "spline"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.visibility string

    Controls the visibility of the series.

    Default Value

    • “visible”

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series visibility="visibile"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.visibleOnLegend string

    Enables or disables the visibility of legend item.

    Default Value

    • “visible”

    Example

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series visibleOnLegend = "hidden"> </e-series>
    </e-seriescollection>     
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series xAxisName = "xAxis"> </e-series>
    </e-seriescollection>     
    </ej-chart>

    series.xName string

    Name of the property in the datasource that contains x value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series xName = "XValue"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer">   
    <e-seriescollection>
            <e-series yAxisName = "yAxis"> </e-series>
    </e-seriescollection>  
    </ej-chart>

    series.yName string

    Name of the property in the datasource that contains y value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer">   
    <e-seriescollection>
            <e-series yName="yValue"> </e-series>
    </e-seriescollection>   
    </ej-chart>

    series.high string

    Name of the property in the datasource that contains high value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
     <e-seriescollection>
            <e-series high="high"> </e-series>
        </e-seriescollection>   
    
    </ej-chart>

    series.low string

    Name of the property in the datasource that contains low value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series low="low"> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.open string

    Name of the property in the datasource that contains open value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series open=""> </e-series>
    </e-seriescollection>   
    
    </ej-chart>

    series.close string

    Name of the property in the datasource that contains close value for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer">
         <e-seriescollection>
            <e-series close="close"></e-series>
         </e-seriescollection>
    </ej-chart>

    series.pointColorMappingName string

    Name of the property in the datasource that contains fill color for the series.

    Default Value

    • null

    Example

  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [pointColorMappingName]="colorFieldName"> </e-series>
    </e-seriescollection>   
        
    </ej-chart>

    ### series.zOrder number

    Z-order of the series.

    Default Value

    • 0

    Example

    series.size string

    Name of the property in the datasource that contains the size value for the bubble series.

    Default Value

    • null

    Example

    series.trendlines array

    Option to add trendlines to chart.

    series.trendlines.visibility boolean

    Show/hides the trendline.

    Default Value

    • ””

    Example

  • TS
  • this.ChartTrendlines= [{    
       visibility:'visible'
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.type string

    Specifies the type of trendline for the series.

    Default Value

    Example

  • TS
  • this.ChartTrendlines= [{    
       type:'linear'
       }];
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>     
    </ej-chart>

    series.trendlines.name string

    Name for the trendlines that is to be displayed in legend text.

    Default Value

    • “Trendline”

    Example

  • TS
  • this.ChartTrendlines= [{    
        name:'Trendline' 
       }];
  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>   
    </ej-chart>

    series.trendlines.fill string

    Fill color of the trendlines.

    Default Value

    • “#0000FF”

    Example

  • TS
  • this.ChartTrendlines= [{    
       fill:'#0000FF'
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.width number

    Width of the trendlines.

    Default Value

    • 1

    Example

  • TS
  • this.ChartTrendlines= [{    
       width: 1
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.opacity number

    Opacity of the trendline.

    Default Value

    • 1

    Example

  • TS
  • this.ChartTrendlines= [{    
        opacity: 0.5 
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.dashArray string

    Pattern of dashes and gaps used to stroke the trendline.

    Default Value

    • ””

    Example

  • TS
  • this.ChartTrendlines= [{    
        dashArray: '2,3'
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.forwardForecast number

    Future trends of the current series.

    Default Value

    • 0

    Example

  • TS
  • this.ChartTrendlines= [{    
       forwardForeCast: 2
       }];
  • HTML
  • <ej-chart id="chartcontainer" > 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.backwardForecast number

    Past trends of the current series.

    Default Value

    • 0

    Example

  • TS
  • this.ChartTrendlines= [{    
        backwardForeCast: 2
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.polynomialOrder number

    Specifies the order of polynomial trendlines.

    Default Value

    • 0

    Example

  • TS
  • this.ChartTrendlines= [{    
        polynomialOrder: 2 
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.period number

    Specifies the moving average starting period value.

    Default Value

    • 2

    Example

  • TS
  • this.ChartTrendlines= [{    
        period: 3 
       }];
  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>   
    </ej-chart>

    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

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            border:'green'
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer">  
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>   
    </ej-chart>

    series.trendlines.tooltip.border.width number

    Border width of the trendline tooltip.

    Default Value

    • 1

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            width: 2
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.tooltip.rx number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
          rx: 10
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.tooltip.ry number

    Customize the corner radius of the trendline tooltip rectangle.

    Default Value

    0

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
          ry: 10
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer" [commonSeriesOptions.trendlines] = "ChartTrendlines"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.tooltip.duration string

    Specifies the duration of the trendline tooltip to be displayed.

    Default Value

    • “500ms”

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            duration: "300ms"
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.tooltip.enableAnimation boolean

    Enables/disables the animation of the trendline tooltip when moving from one point to other.

    Default Value

    • true

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            enableAnimation: true
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.tooltip.fill string

    Background color of the trendline tooltip.

    Default Value

    • null

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            fill: 'green'
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>     
    </ej-chart>

    series.trendlines.tooltip.format string

    Format of the trendline tooltip content.

    Default Value

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

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
            format: "#point.x# : #point.y#%"
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer">
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>     
    </ej-chart>

    series.trendlines.tooltip.opacity number

    Opacity of the trendline tooltip.

    Default Value

    • 0.5

    Example

  • TS
  • this.ChartTrendlines= [{    
        tooltip:{
           opacity: 0.5
        }
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.visibleOnLegend string

    Show/hides the trendline legend.

    Default Value

    • visible

    Example

  • TS
  • this.ChartTrendlines= [{    
       visibleOnLegend:'hidden'
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    series.trendlines.intercept number

    Specifies the trendline intercept value

    Default Value

    • null

    Example

  • TS
  • this.ChartTrendlines= [{    
       intercept :10
       }];
  • HTML
  • <ej-chart id="chartcontainer"> 
    <e-seriescollection>
            <e-series [trendlines] = "ChartTrendlines"> </e-series>
    </e-seriescollection>    
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true'}"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    series.highlightSettings.mode enum

    Specifies whether series or data point has to be highlighted.

    Default Value

    • “series”. See Mode

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', mode:'point' }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.highlightSettings.color string

    Color of the series/point on highlight.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', color:'red' }"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    series.highlightSettings.opacity number

    Opacity of the series/point on highlight.

    Default Value

    • 0.6

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', opacity:1 }"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container" >
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', border:{color:'black'} }"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    series.highlightSettings.border.width string

    Border width of the series/point on highlight.

    Default Value

    • 2

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', border:{width: 1} }"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    series.highlightSettings.pattern string

    Specifies the pattern for the series/point on highlight.

    Default Value

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', pattern:'chessboard' }"> </e-series>
        </e-seriescollection> 
    </ej-chart>

    series.highlightSettings.customPattern string

    Custom pattern for the series on highlight.

    Default Value

    • ””

    Example

  • HTML
  • <body>
        <svg>
         <pattern id="dots_a" patternUnits="userSpaceOnUse" width="6" height="6">
            <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="black" opacity="1">
            </rect>
            <path d='M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9'stroke-width="1" stroke="white">
            </path>
         </pattern>
        </svg>
    
    <ej-chart id="container"> 
    <e-seriescollection>
            <e-series [highlightSettings]="{enable:'true', pattern: "custom", 
                                                     customPattern: 'dots_a' }"> </e-series>
    </e-seriescollection>                                                         
    </ej-chart>    
    </body>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true'}"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.mode enum

    Specifies whether series or data point has to be selected.

    Default Value

    • “series”. See Mode

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', mode:'point' }" > </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.type enum

    Specifies the type of selection.

    Default Value

    • “single”

    See. Type

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', type:'multiple' }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', rangeType:'x' }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.color string

    Color of the series/point on selection.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', color:'red' }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.opacity number

    Opacity of the series/point on selection.

    Default Value

    • 0.6

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', opacity:1 }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    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

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', border:{color:'black'} }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.border.width string

    Border width of the series/point on selection.

    Default Value

    • 2

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', border:{width: 1} }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.pattern string

    Specifies the pattern for the series/point on selection.

    Default Value

    Example

  • HTML
  • <ej-chart id="container">
    <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', pattern:'chessboard' }"> </e-series>
    </e-seriescollection> 
    </ej-chart>

    series.selectionSettings.customPattern string

    Custom pattern for the series on selection.

    Default Value

    • ””

    Example

  • HTML
  • <body>
        <svg>
         <pattern id="dots_a" patternUnits="userSpaceOnUse" width="6" height="6">
            <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="black" opacity="1">
            </rect>
            <path d='M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9'stroke-width="1" stroke="white">
            </path>
         </pattern>
        </svg>
    
    <ej-chart id="container"> 
        <e-seriescollection>
            <e-series [selectionSettings]="{enable:'true', pattern: "custom", 
                                                     customPattern: 'dots_a' }"> </e-series>
        </e-seriescollection>        
    </ej-chart>    
    </body>

    sideBySideSeriesPlacement boolean

    Controls whether data points has to be displayed side by side or along the depth of the axis.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [sideBySideSeriesPlacement]="true">
    </ej-chart>

    size object

    Options to customize the Chart size.

    size.height string

    Height of the Chart. Height can be specified in either pixel or percentage.

    Default Value

    • ‘450’

    Example

  • HTML
  • <ej-chart id="chartcontainer" [size]="{height:'80%'}">
    </ej-chart>

    size.width string

    Width of the Chart. Width can be specified in either pixel or percentage.

    Default Value

    • ‘450’

    Example

  • HTML
  • <ej-chart id="chartcontainer" [size]="{width:'80%'}">
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" theme ="flatdark">
    </ej-chart>

    tilt number

    Slope angle of 3D Chart. This property is applicable only when 3D view is enabled.

    Default Value

    • 0

    Example

    title object

    Options for customizing the title and subtitle of Chart.

    title.background string

    Background color for the chart title.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{background :'red'}">
    </ej-chart>

    title.border object

    Options to customize the border of the title.

    title.border.width number

    Width of the title border.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{border :{width: 2}}">
    </ej-chart>

    title.border.color string

    color of the title border.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{border :{color:'red'}}">
    </ej-chart>

    title.border.opacity number

    opacity of the title border.

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{border :{opacity: 0.5}}">
    </ej-chart>

    title.border.cornerRadius number

    opacity of the title border.

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{border :{cornerRadius:10}}">
    </ej-chart>

    title.font object

    Options for customizing the font of Chart title.

    title.font.fontFamily string

    Font family for Chart title.

    Default Value

    • “Segoe UI”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{font: {fontFamily:'Algerian'}}">
    </ej-chart>

    title.font.fontStyle enum

    Font style for Chart title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{font: {fontStyle:'italic'}}">
    </ej-chart>

    title.font.fontWeight enum

    Font weight for Chart title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{font: {fontWeight:'lighter'}}">
    </ej-chart>

    title.font.opacity number

    Opacity of the Chart title.

    Default Value

    • 0.5

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{font: {opacity:0.5}}">
    </ej-chart>

    title.font.size string

    Font size for Chart title.

    Default Value

    • “20px”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{font: {size:'22px'}}">
    </ej-chart>

    title.visible boolean

    Controls the visibility of the Chart title

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{visible :'true' }">
    </ej-chart>

    title.enableTrim boolean

    Specifies whether to trim the Chart Title when the width of the title exceeds the maximumWidth.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{enableTrim: true}">
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" [title]="{maximumWidth : 150}">
    </ej-chart>

    title.textOverflow enum

    Specifies the action taken when the Chart width is more than the titleWidth.

    Default Value

    • trim.

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{textOverflow :'trim' }">
    </ej-chart>

    title.subTitle object

    Options to customize the sub title of Chart.

    title.subTitle.font object

    Options for customizing the font of sub title.

    title.subTitle.font.fontFamily string

    Font family of sub title.

    Default Value

    • “Segoe UI”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{font:{fontFamily:'Algerian' } } }">
    </ej-chart>

    title.subTitle.font.fontStyle enum

    Font style for sub title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{font:{fontStyle:'Normal' } } }">
    </ej-chart>

    title.subTitle.font.fontWeight enum

    Font weight for sub title.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{font:{fontWeight:'regular'} } }">
    </ej-chart>

    title.subTitle.font.opacity number

    Opacity of the sub title.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{font:{opacity:0.5} } }">
    </ej-chart>

    title.subTitle.font.size string

    Font size for sub title.

    Default Value

    • “12px”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{font:{size:'14px'} } }">
    </ej-chart>

    title.subTitle.background string

    Background color for the chart subtitle.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{background :'red'}}">
    </ej-chart>

    title.subTitle.border object

    Options to customize the border of the title.

    title.subTitle.border.width number

    Width of the subtitle border.

    Default Value

    • 1

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{border :{width:2} }}">
    </ej-chart>

    title.subTitle.border.color string

    color of the subtitle border.

    Default Value

    • “transparent”

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{border :{color:'red'} }}">
    </ej-chart>

    title.subTitle.border.opacity number

    opacity of the subtitle border.

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{border :{opacity:0.5} }}">
    </ej-chart>

    title.subTitle.border.cornerRadius number

    opacity of the subtitle border.

    Default Value

    • 0.8

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{border :{cornerRadius:10} }}">
    </ej-chart>

    title.subTitle.text string

    Text to be displayed in sub title.

    Default Value

    • ””

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{text:'Performance chart' } }">
    </ej-chart>

    title.subTitle.textAlignment enum

    Alignment of sub title text.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{textAlignment :'near' } }">
    </ej-chart>

    title.subTitle.visible boolean

    Controls the visibility of the Chart SubTitle

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{visible :'true' } }">
    </ej-chart>

    title.subTitle.enableTrim boolean

    Specifies whether to trim the Chart SubTitle when the width of the Subtitle exceeds the maximumWidth.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{enableTrim:'true'} }">
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{maximumWidth:150 } }">
    </ej-chart>

    title.subTitle.textOverflow enum

    Specifies the action taken when the Chart width is more than the SubTitleWidth.

    Default Value

    • trim.

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{subTitle:{textAtextOverflow :'trim' } }">
    </ej-chart>

    title.text string

    Text to be displayed in Chart title.

    Default Value

    • ””

    Example

    title.textAlignment enum

    Alignment of the title text.

    Default Value

    Example

  • HTML
  • <ej-chart id="chartcontainer" [title]="{textAlignment :'near' }">
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" [wallSize]=5>
    </ej-chart>

    zooming object

    Options for enabling zooming feature of chart.

    zooming.enable boolean

    Enables or disables zooming.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [zooming.enable]="true">
    </ej-chart>

    zooming.enablePinching boolean

    Enables or disables pinch zooming.

    Default Value

    • true

    Example

  • HTML
  • <ej-chart id="chartcontainer" [zooming.enablePinching]="true">
    </ej-chart>

    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

  • HTML
  • <ej-chart id="chartcontainer" [zooming.enableDeferredZoom]="true">
    </ej-chart>

    zooming.enableMouseWheel boolean

    Enables/disables the ability to zoom the chart on moving the mouse wheel.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [zooming.enableMouseWheel]="true">
    </ej-chart>

    zooming.type string

    Specifies whether to allow zooming the chart vertically or horizontally or in both ways.

    Default Value

    • ‘x,y’

    Example

  • HTML
  • <ej-chart id="chartcontainer" zooming.type="x,y">
    </ej-chart>

    zooming.enableScrollbar boolean

    Toggles the visibility of the scrollbar, which will be displayed while zooming.

    Default Value

    • false

    Example

  • HTML
  • <ej-chart id="chartcontainer" [zooming.enableScrollbar]="true">
    </ej-chart>

    zooming.toolbarItems array

    To display user specified buttons in zooming toolbar.

    Default Value

    • [“zoomIn”, “zoomOut”, “zoom”, “pan”, “reset”]

    Example

  • HTML
  • <ej-chart id="chartcontainer" [zooming.toolbarItems]= "[“zoomin”]" >
    </ej-chart>

    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
  • TS
  • animate(){
         
         //Do something
         this.chart.widget.animate();
    
    }

    If a series or indicator object is passed to this method, then the specific series or indicator is animated.

    Example,
  • TS
  • animate(){
         
         //Do something
         this.chart.widget.animate(this.chart.widget.model.indicators[0]);
    
    }

    print()

    Prints the rendered chart.

    Returns: void

    Example

    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.

  • TS
  • print(){
         
         //Do something
         this.chart.widget.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
  • TS
  • export(){
         
         //Do something
         this.chart.widget.export(image);
    
    }
    URL string URL of the service, where the chart will be exported to excel.

    Example,
  • TS
  • export(){
         
         //Do something
         this.chart.widget.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,
  • TS
  • export(){
         
         //Do something
         this.chart.widget.export("excel", 'http://js.syncfusion.com/ExportingServices/api/JSChartExport/ExcelExport', true);
    
    }

    redraw()

    Redraws the entire chart. You can call this method whenever you update, add or remove points from the data source or whenever you want to refresh the UI.

    Returns: void

    Example

    REDRAW

  • TS
  • redraw(){
         
         //Do something
         this.chart.widget.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

  • TS
  • onaxeslabelrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (axesLabelRendering)="onaxeslabelrendering($event)"> 
    </ej-chart>
    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

  • TS
  • onaxeslabelinitialize(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (axesLabelInitialize)="onaxeslabelinitialize($event)"> 
    </ej-chart>
    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

  • TS
  • onaxesrangecalculate(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (axesRangeCalculate)="onaxesrangecalculate($event)"> 
    </ej-chart>
    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

  • TS
  • onaxestitlerendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (axesTitleRendering)="onaxestitlerendering($event)"> 
    </ej-chart>
    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

  • TS
  • onchartboundscalculate(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (chartAreaBoundsCalculate)="onchartboundscalculate($event)"> 
    </ej-chart>
    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

  • TS
  • oncreate(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (create)="oncreate($event)"> 
    </ej-chart>
    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

  • TS
  • ondestroy(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (destroy)="ondestroy($event)"> 
    </ej-chart>
    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

  • TS
  • ondisplaytextrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (displayTextRendering)="ondisplaytextrendering($event)"> 
    </ej-chart>
    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

  • TS
  • onlegendboundscalculate(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (legendBoundsCalculate)="onlegendboundscalculate($event)"> 
    </ej-chart>
    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

  • TS
  • onlegenditemclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (legendItemClick)="onlegenditemclick($event)"> 
    </ej-chart>
    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

  • TS
  • onlegenditemmousemove(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (legendItemMouseMove)="onlegenditemmousemove($event)"> 
    </ej-chart>
    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

  • TS
  • onlegenditemrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (legendItemRendering)="onlegenditemrendering($event)"> 
    </ej-chart>
    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

  • TS
  • onload(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (load)="onload($event)"> 
    </ej-chart>
    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

  • TS
  • onzoomed(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (zoomed)="onzoomed($event)"> 
    </ej-chart>
    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

  • TS
  • onrangeselected(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (rangeSelected)="onrangeselected($event)"> 
    </ej-chart>
    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

  • TS
  • onpointregionclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (pointRegionClick)="onpointregionclick($event)"> 
    </ej-chart>
    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

  • TS
  • onpointregionmousemove(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (pointRegionMouseMove)="onpointregionmousemove($event)"> 
    </ej-chart>
    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

  • TS
  • onprerender(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (preRender)="onprerender($event)"> 
    </ej-chart>
    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

  • TS
  • onseriesregionclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (seriesRegionClick)="onseriesregionclick($event)"> 
    </ej-chart>
    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

  • TS
  • onseriesrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (seriesRendering)="onseriesrendering($event)"> 
    </ej-chart>
    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

  • TS
  • onsymbolrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (symbolRendering)="onsymbolrendering($event)"> 
    </ej-chart>
    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

  • TS
  • ontitlerendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (titleRendering)="ontitlerendering($event)"> 
    </ej-chart>
    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

  • TS
  • ontooltipinitialize(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (toolTipInitialize)="ontooltipinitialize($event)"> 
    </ej-chart>
    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

  • TS
  • ontrackaxistooltip(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (trackAxisToolTip)="ontrackaxistooltip($event)"> 
    </ej-chart>
    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

  • TS
  • <ej-chart #events id="events" (trackToolTip)="ontracktooltip($event)"> 
    (sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (trackToolTip)="ontracktooltip($event)"> 
    </ej-chart>
    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

  • TS
  • onaxislabelclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (axisLabelClick)="onaxislabelclick($event)"> 
    </ej-chart>
    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

  • TS
  • onaxislabelmousemove(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (axisLabelMouseMove)="onaxislabelmousemove($event)"> 
    </ej-chart>
    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

  • TS
  • onchartclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (chartClick)="onchartclick($event)"> 
    </ej-chart>
    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

  • TS
  • onmultilevellabelclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (multiLevelLabelClick)="onmultilevellabelclick($event)"> 
    </ej-chart>
    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 multilevellabels.
    • multilevellabel - Multi level label details

    chartMouseMove

    Fires on moving mouse over the chart.

    Example

  • TS
  • onchartmousemove(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (chartMouseMove)="onchartmousemove($event)"> 
    </ej-chart>
    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

  • TS
  • onchartdoubleclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (chartDoubleClick)="onchartdoubleclick($event)"> 
    </ej-chart>
    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

  • TS
  • onchartmouseleave(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (chartMouseLeave)="onchartmouseleave($event)"> 
    </ej-chart>
    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

  • TS
  • onannotationclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (annotationClick)="onannotationclick($event)"> 
    </ej-chart>
    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

  • TS
  • onafterresize(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (afterResize)="onafterresize($event)"> 
    </ej-chart>
    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

  • TS
  • onbeforeresize(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (beforeResize)="onbeforeresize($event)"> 
    </ej-chart>
    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

  • TS
  • onerrorbarrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (errorBarRendering)="onerrorbarrendering($event)"> 
    </ej-chart>
    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

  • TS
  • onmultilevellabelrendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (multiLevelLabelRendering)="onmultilevellabelrendering($event)"> 
    </ej-chart>
    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

  • TS
  • ontrendlinerendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (trendlineRendering)="ontrendlinerendering($event)"> 
    </ej-chart>
    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

  • TS
  • onscrollchanged(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (scrollChanged)="onscrollchanged($event)"> 
    </ej-chart>

    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

  • TS
  • onscrollstart(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (scrollStart)="onscrollstart($event)"> 
    </ej-chart>

    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

  • TS
  • onscrollend(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (scrollEnd)="onscrollend($event)"> 
    </ej-chart>

    dragStart

    Fires when the dragging is started

    Example

  • TS
  • ondragstart(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (dragStart)="ondragstart($event)"> 
    </ej-chart>
    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

  • TS
  • ondragging(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (dragging)="ondragging($event)"> 
    </ej-chart>
    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

  • TS
  • ondragend(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (dragEnd)="ondragend($event)"> 
    </ej-chart>
    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

  • TS
  • onsubtitlerendering(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-chart #events id="events" (subTitleRendering)="onsubtitlerendering($event)"> 
    </ej-chart>
    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