ejCircularGauge

11 Oct 201724 minutes to read

The Circular gauge can be easily configured to the DOM element, such as div. you can create a circular gauge with a highly customizable look and feel.

  • HTML
  • <ej-circularGauge id="circularGauge1">
    </ej-circularGauge>
    Name Type Description
    object For setting the Circular gauge

    Example

    Requires

    • module:jQuery

    • module:ej.common.all

    • module:excanvas.js

    Members

    animationSpeed number

    Specifies animationSpeed of circular gauge

    Default Value

    • 500

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [animationSpeed]="1000" >
    </ej-circularGauge>

    backgroundColor string

    Specifies the background color of circular gauge.

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" backgroundColor="#F234F4" >
    </ej-circularGauge>

    distanceFromCorner number

    Specify distanceFromCorner value of circular gauge

    Default Value

    • center

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [distanceFromCorner]='25' >
    </ej-circularGauge>

    rangeZOrder enum

    Specify range zOrder placement of circular gauge.

    Name Type Description
    Rear string Place the ranges above the ticks of the gauge
    Front string Place the ticks above the ranges of the gauge

    Default Value

    • Rear

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" rangeZOrder="rear" >
    </ej-circularGauge>

    enableAnimation boolean

    Specify animate value of circular gauge

    Default Value

    • true

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [enableAnimation]="true" >
    </ej-circularGauge>

    enableGroupSeparator boolean

    Specify to convert the date object to string, using locale settings.

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [enableGroupSeparator]="true" >
    </ej-circularGauge>

    enableResize boolean

    Controls whether circular gauge has to be responsive while resizing.

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [enableResize]="true" >
    </ej-circularGauge>

    frame object

    Specify the frame of circular gauge

    Default Value

    • Object

    Example

    frame.backgroundImageUrl string

    Specify the URL of the frame background image for circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" frame.backgroundImageUrl="Sun.jpg">
    </ej-circularGauge>

    frame.frameType enum

    Specifies the frameType of circular gauge. See Frame

    Name Type Description
    FullCircle string Specify the full circle frame
    HalfCircle string Specify the half circle frame

    Default Value

    • FullCircle

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" frame.frameType="halfcircle">
    </ej-circularGauge>

    frame.halfCircleFrameEndAngle number

    Specifies the end angle for the half circular frame.

    Default Value

    • 360

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [frame.halfCircleFrameEndAngle]="270">
    </ej-circularGauge>

    frame.halfCircleFrameStartAngle number

    Specifies the start angle for the half circular frame.

    Default Value

    • 180

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [frame.halfCircleFrameStartAngle]='0'>
    </ej-circularGauge>

    gaugePosition enum

    Specify gaugePosition value of circular gauge See GaugePosition

    Name Type Description
    TopLeft string The gauge will be placed TopLeft corner in container
    TopRight string The gauge will be placed TopRight corner in container
    TopCenter string The gauge will be placed in TopCenter
    MiddleLeft string The gauge will be placed in MiddleLeft
    MiddleRight string The gauge will be placed in MiddleRight
    Center string The gauge will be placed center of the container
    BottomLeft string The gauge will be placed BottomLeft corner in container
    BottomRight string he gauge will be placed in BottomRight corner in container
    BottomCenter string he gauge will be placed in BottomCenter

    Default Value

    • center

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" gaugePosition ="center">
    </ej-circularGauge>

    height number

    Specifies the height of circular gauge.

    Default Value

    • 360

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [height]="400" >
    </ej-circularGauge>

    interiorGradient object

    Specifies the interiorGradient of circular gauge.

    Default Value

    • null

    Example

  • TS
  • this.interiorGradient = {    
        colorInfo:[{
           colorStop:1,
           color:'red'
           
        }],    
    };
  • HTML
  • <ej-circulargauge [interiorGradient]="interiorGradient">
    </ej-circulargauge>

    isRadialGradient boolean

    Specify isRadialGradient value of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [isRadialGradient]="true">
    </ej-circularGauge>

    isResponsive boolean

    Specify isResponsive value of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [isResponsive]="true">
    </ej-circularGauge>

    locale string

    Name of the culture based on which circular gauge should be localized.

    Default Value

    • “en-US”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" locale="en-Us">
    </ej-circularGauge>

    maximum number

    Specifies the maximum value of circular gauge.

    Default Value

    • 100

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [maximum]="120">
    </ej-circularGauge>

    minimum number

    Specifies the minimum value of circular gauge.

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [minimum]="10">
    </ej-circularGauge>

    outerCustomLabelPosition enum

    Specify outerCustomLabelPosition value of circular gauge See OuterCustomLabelPosition

    Name Type Description
    Top string Sets the label position as top
    Bottom string Sets the label position as Bottom
    Right string Sets the label position as Right
    Left string Sets the label position as Left

    Default Value

    • bottom

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" outerCustomLabelPosition="right">     
    </ej-circularGauge>

    radius number

    Specifies the radius of circular gauge.

    Default Value

    • 180

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [radius]="100">     
    </ej-circularGauge>

    readOnly boolean

    Specify readonly value of circular gauge

    Default Value

    • true

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [readOnly]="false">     
    </ej-circularGauge>

    scales array

    Specify the pointers, ticks, labels, indicators, ranges of circular gauge

    Default Value

    • null

    Example

    scales.backgroundColor string

    Specify backgroundColor for the scale of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
           <e-scales>
              <e-scale backgroundColor="#1BA1E2"></e-scale>
           </e-scales>
    </ej-circulargauge>

    scales.border object

    Specify border for scales of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
           <e-scales>
              <e-scale [border]="{color: '#1BA1E2', width:2}"></e-scale>
           </e-scales>
    </ej-circulargauge>

    scales.border.color string

    Specify border color for scales of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
           <e-scales>
              <e-scale [border]="{color: '#1BA1E2'}"></e-scale>
           </e-scales>
    </ej-circulargauge>

    scales.border.width number

    Specify border width of circular gauge

    Default Value

    • 1.5

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
           <e-scales>
              <e-scale [border]="{width:2}"></e-scale>
           </e-scales>
    </ej-circulargauge>

    scales.direction enum

    Specify scale direction of circular gauge. See Directions

    Name Type Description
    Clockwise string Specify the clockwise direction
    CounterClockwise string Specify the counterclockwise direction

    Default Value

    • Clockwise

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
        <e-scales>
            <e-scale direction="counterClockwise"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.customLabels Array

    Specify the custom labels for the scales.

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{  }]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.value string

    Value of the custom labels.

    Default Value

    • ””

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{value:'Sports'}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.color string

    Color of the custom labels.

    Default Value

    • ””

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{color:'#333333'}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.position object

    Specify position of custom labels

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{position:{x:10,y:10}}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.position.x number

    Specify x-axis position of label

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{position:{x:10}}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.position.y number

    Specify y-axis position of labels.

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{position:{y:10}}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.textAngle number

    Specify angle for the rotation of the custom labels in degrees.

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels.textAngle]="90"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.font object

    Specify font for custom labels

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[font: {fontFamily:'Arial,'fontStyle: 'Bold',size:'15px'}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.font.fontFamily string

    Specify font fontFamily for custom labels.

    Default Value

    • “Arial”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{font: {fontFamily: 'Arial'}}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.font.fontStyle string

    Specify font Style for custom labels.

    Default Value

    • “Bold”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{font: {fontStyle: 'Bold'}}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.font.size string

    Specify font size for custom labels.

    Default Value

    • “12px”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [customLabels]="[{font: {size:'12px'}}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.customLabels.positionType enum

    Specifies the position of the custom labels. See CustomLabelPositionType

    Name Type Description
    Inner string Sets the Custom label position as Inner
    Outer string Sets the Custom label position as Outer

    Default Value

    • inner

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale customLabels.positionType="outer"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators Array

    Specify representing state of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{position:{x:10} }]">          
    
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.height number

    Specify indicator height of circular gauge

    Default Value

    • 15

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ height: 10 }]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.imageUrl string

    Specify imageUrl of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ imageUrl:'Sun.jpeg' }]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.position object

    Specify position of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{position:{x:10,y:10} }]">          
    
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.position.x number

    Specify x-axis of position of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{position:{x:10} }]">          
    
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.position.y number

    Specify y-axis of position of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{position:{y:10} }]">          
    
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges Array

    Specify the various states of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ endValue:70, borderColor:'Red', backgroundColor: '#5DF243',font:{ size: '11px', fontFamily: 'Arial', fontStyle: 'Bold' } }]}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.backgroundColor string

    Specify backgroundColor for indicator of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ backgroundColor:'#5DF243'}]}]">          
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.borderColor string

    Specify borderColor for indicator of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ borderColor:'Red'}]}]">          
    
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.endValue number

    Specify end value for each specified state of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ endValue:200 }]}]">          
    
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.font object

    Specify value of the font as the indicator when the indicator style is set with the value “text” of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ font:{ size: '11px', fontFamily: 'Arial', fontStyle: 'Bold' } }]}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.startValue number

    Specify start value for each specified state of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ startValue:70 }]}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.text string

    Specify value of the text as the indicator when the indicator style is set with the value “text” of circular gauge

    Default Value

    • ””

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ text:'staterange1' }]}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.stateRanges.textColor string

    Specify value of the textColor as the indicator when the indicator style is set with the value “text” of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ textColor:'Yellow' }]}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.type enum

    Specify indicator style of circular gauge. See IndicatorType

    Name Type Description
    Rectangle string Style of the indicator will be rectangle
    Circle string Style of the indicator will be circle
    Text string Style of the indicator will be text
    RoundedRectangle string Style of the indicator will be roundedrectangle
    Image string Style of the indicator will be image

    Default Value

    • Circle

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ stateRanges:[{ type:'circle' }]}]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.indicators.width number

    Specify indicator width of circular gauge

    Default Value

    • 15

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [indicators]="[{ width: 100 }]"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels Array

    Specify the text values displayed in a meaningful manner alongside the ticks of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label>
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.angle number

    Specify the angle for the labels of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [angle]="30">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.autoAngle boolean

    Specify labels autoAngle value of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [autoAngle]="true">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.color string

    Specify label color of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label color="red">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.distanceFromScale number

    Specify distanceFromScale value for labels of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [distanceFromScale]="10">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.font object

    Specify font for labels of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [font]="{size: '12px', fontFamily: 'Segou', fontStyle: 'Bold' }">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.font.fontFamily string

    Specify font fontFamily for labels of circular gauge

    Default Value

    • “Arial”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [font]="{fontFamily:'Arial'}">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.font.fontStyle string

    Specify font Style for labels of circular gauge

    Default Value

    • “Bold”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [labels]="[{ font : { fontStyle: 'Bold' } }]">
                <e-labels>
                    <e-label [font]="{fontStyle:'Bold'}">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.font.size string

    Specify font size for labels of circular gauge

    Default Value

    • “11px”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [font]="{size:'12px'}">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.includeFirstValue boolean

    Specify includeFirstValue of circular gauge

    Default Value

    • true

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [includeFirstValue]="false">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.opacity number

    Specify opacity value for labels of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label [opacity]="0.5">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.placement enum

    Specify label placement of circular gauge. See LabelPlacement

    </tr>
    Name Type Description
    Near string Specify the label placement as near
    Far string Specify the label placement as far
    Center string Specify the label placement as center

    Default Value

    • Near

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label placement="near">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.type enum

    Specify label Style of circular gauge. See LabelType

    Name Type Description
    Major string Label style will be major
    Minor string Label style will be minor

    Default Value

    • Major

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label type="major">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.unitText string

    Specify unitText of circular gauge

    Default Value

    • ””

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label unitText="kmph">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.labels.unitTextPosition enum

    Specify unitTextPosition of circular gauge. See UnitTextPosition

    Name Type Description
    Back string The unit text will be placed back of the gauge
    Front string The unit text will be placed front of the gauge

    Default Value

    • Back

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-labels>
                    <e-label unitTextPosition="front">
                    </e-label>
                </e-labels>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.majorIntervalValue number

    Specify majorIntervalValue of circular gauge

    Default Value

    • 10

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [majorIntervalValue]="5"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.maximum number

    Specify maximum scale value of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [maximum]="200"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.minimum number

    Specify minimum scale value of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [minimum]="20"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.minorIntervalValue number

    Specify minorIntervalValue of circular gauge

    Default Value

    • 2

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [minorIntervalValue]="1"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.opacity number

    Specify opacity value of circular gauge

    Default Value

    • 1

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale [opacity]="0.5"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointerCap object

    Specify pointer cap of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
        <e-scales>
            <e-scale [pointerCap]="[{ backgroundColor:'red', borderColor:'brown',borderWidth:2}]"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.pointerCap.backgroundColor string

    Specify cap backgroundColor of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
        <e-scales>
            <e-scale pointerCap.backgroundColor="green"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.pointerCap.borderColor string

    Specify cap borderColor of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
        <e-scales>
            <e-scale pointerCap.borderColor="brown"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.pointerCap.borderWidth number

    Specify pointerCap borderWidth value of circular gauge

    Default Value

    • 3

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
        <e-scales>
            <e-scale pointerCap.borderWidth="8"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.pointerCap.interiorGradient object

    Specify cap interiorGradient value of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circulargauge>
        <e-scales>
            <e-scale [pointerCap]="[{ interiorGradient:{colorInfo:[{colorStop:0,color:'red'}]}}]"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.pointerCap.radius number

    Specify pointerCap Radius value of circular gauge

    Default Value

    • 7

    Example

  • HTML
  • <ej-circulargauge  id="CircularGauge1">
        <e-scales>
            <e-scale [pointerCap.radius]="10"></e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.pointers Array

    Specify pointers value of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer  [distanceFromScale]= '0' [showBackNeedle]="false" ></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.backgroundColor string

    Specify backgroundColor for the pointer of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer backgroundColor="#1A1A1A" ></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.backNeedleLength number

    Specify backNeedleLength of circular gauge

    Default Value

    • 10

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [backNeedleLength]="10"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.border object

    Specify the border for pointers of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [border]="{ color: 'green', width:4 }"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.border.color string

    Specify border color for pointer of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [border]="{ color: 'green' }"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.border.width number

    Specify border width for pointers of circular gauge

    Default Value

    • 1.5

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [border]="{ width:4 }"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.distanceFromScale number

    Specify distanceFromScale value for pointers of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [distanceFromScale]="20"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.gradients object

    Specify pointer gradients of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [gradients]="[{colorInfo:{colorStop:0,color:'red'}}]"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.imageUrl string

    Specify pointer image of circular gauge.It is applicable for both marker as well as needle type pointers.

    Default Value

    • NULL

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer ImageUrl="nib.png"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.length number

    Specify pointer length of circular gauge

    Default Value

    • 150

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [length]="50"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.markerType enum

    Specify marker Style value of circular gauge. See MarkerType

    Name Type Description
    Rectangle string Marker style of circular gauge will be rectangle
    Circle string Marker style of circular gauge will be circle
    Triangle string Marker style of circular gauge will be triangle
    Ellipse string Marker style of circular gauge will be ellipse
    Diamond string Marker style of circular gauge will be diamond
    Pentagon string Marker style of circular gauge will be pentagon
    Slider string Marker style of circular gauge will be slider
    Pointer string Marker style of circular gauge will be pointer
    Wedge string Marker style of circular gauge will be wedge
    Trapezoid string Marker style of circular gauge will be trapezoid
    RoundedRectangle string Marker style of circular gauge will be rounded rectangle
    Image string Marker style of circular gauge will be image

    Default Value

    • Rectangle

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer markerType = "rectangle"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.needleType enum

    Specify needle Style value of circular gauge. See NeedleType

    Name Type Description
    Triangle string Needle style of circular gauge will be triangle
    Rectangle string Needle style of circular gauge will be rectangle
    Arrow string Needle style of circular gauge will be arrow
    Image string Needle style of circular gauge will be image
    Trapezoid string Needle style of circular gauge will be trapezoid

    Default Value

    • Triangle

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer  needleType = "triangle" ></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.opacity number

    Specify opacity value for pointer of circular gauge

    Default Value

    • 1

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer [opacity]="0.5"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.radius number

    Specify radius value for pointer of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [radius]='10'>
                    </e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.placement enum

    Specify pointer Placement value of circular gauge. See PointerPlacement

    Default Value

    • Near

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" >
        <e-scales>
            <e-scale>
                <e-pointers>
                    <e-pointer placement = "far"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.pointerValueText object

    Specify pointer value text of circular gauge.

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{angle:70, autoAngle:'false', font:{fontStyle:'Bold',fontFamily:'Arial',size:'12px'}}">
                    </e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.pointerValueText.angle number

    Specify pointer text angle of circular gauge.

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{angle:20}">
                    </e-pointer>
                </e-pointers>
              </e-scale>
           </e-scales>
      </ej-circularGauge>

    scales.pointers.pointerValueText.autoAngle boolean

    Specify pointer text auto angle of circular gauge.

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{autoAngle:true}">
                    </e-pointer>
                </e-pointers>
              </e-scale>
           </e-scales>
      </ej-circularGauge>

    scales.pointers.pointerValueText.color string

    Specify pointer value text color of circular gauge.

    Default Value

    • #8c8c8c

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{color:'red'}">
                    </e-pointer>
                </e-pointers>
              </e-scale>
           </e-scales>
      </ej-circularGauge>

    scales.pointers.pointerValueText.distance number

    Specify pointer value text distance from pointer of circular gauge.

    Default Value

    • 20

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{distance:20}">
                    </e-pointer>
                </e-pointers>
              </e-scale>
           </e-scales>
      </ej-circularGauge>

    scales.pointers.pointerValueText.font object

    Specify pointer value text font option of circular gauge.

    Default Value

    • object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{font:{fontStyle:'Bold',fontFamily:'Arial',size:'12px'}}">
                    </e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.pointerValueText.font.fontFamily string

    Specify pointer value text font family of circular gauge.

    Default Value

    • Arial

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{font:{fontFamily:'Arial'}}">
                    </e-pointer>
                </e-pointers>
              </e-scale>
           </e-scales>
      </ej-circularGauge>

    scales.pointers.pointerValueText.font.fontStyle string

    Specify pointer value text font style of circular gauge.

    Default Value

    • Bold

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{font:{fontStyle:'Arial'}}">
                    </e-pointer>
                </e-pointers>
              </e-scale>
           </e-scales>
      </ej-circularGauge>

    scales.pointers.pointerValueText.font.size string

    Specify pointer value text size of circular gauge.

    Default Value

    • 11px

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
         <e-scales>
              <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{font:{size:'12px'}}"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.pointerValueText.opacity number

    Specify pointer value text opacity of circular gauge.

    Default Value

    • 1

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{opacity:0.5}"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.pointerValueText.showValue boolean

    enable pointer value text visibility of circular gauge.

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [pointerValueText]="{showValue:'true'}">
                    </e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.showBackNeedle boolean

    Specify showBackNeedle value of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [showBackNeedle]="true"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.type enum

    Specify pointer type value of circular gauge. See PointerType

    Name Type Description
    Needle string Specify the pointer type as needle
    Marker string Specify the pointer type as marker

    Default Value

    • Needle

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer type = "marker"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.value number

    Specify value of the pointer of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [value] = "50"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.pointers.width number

    Specify pointer width of circular gauge

    Default Value

    • 7

    Example

  • HTML
  • <ej-CircularGauge id="circularGauge1">
        <e-scales>
            <e-scale>          
    
                <e-pointers>
                    <e-pointer [width] = "7"></e-pointer>
                </e-pointers>
            </e-scale>
        </e-scales>
    </ej-CircularGauge>

    scales.radius number

    Specify scale radius of circular gauge

    Default Value

    • 170

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [radius] = "100"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges Array

    Specify ranges value of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [endValue]='100' [endWidth]='10'></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.backgroundColor string

    Specify backgroundColor for the ranges of circular gauge

    Default Value

    • “#32b3c6”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range backgroundColor = "red"></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.legendText string

    Specify text for the ranges of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range legendText="high"></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.border object

    Specify border for ranges of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [border] = "{color:'red', width:2 }"></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.border.color string

    Specify border color for ranges of circular gauge

    Default Value

    • “#32b3c6”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range borderColor = "red"></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.border.width number

    Specify border width for ranges of circular gauge

    Default Value

    • 1.5

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [border.width]=2></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.distanceFromScale number

    Specify distanceFromScale value for ranges of circular gauge

    Default Value

    • 25

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [distanceFromScale]='2'></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.endValue number

    Specify endValue for ranges of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [endValue]='100'></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.endWidth number

    Specify endWidth for ranges of circular gauge

    Default Value

    • 10

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [endWidth]='10'></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.gradients object

    Specify range gradients of circular gauge

    Default Value

    • null

    Example

    scales.ranges.opacity number

    Specify opacity value for ranges of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [opacity]="0.5"></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.placement enum

    Specify placement of circular gauge. See RangePlacement

    Default Value

    • Near

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range placement="center"></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.size number

    Specify size of the range value of circular gauge

    Default Value

    • 5

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [size]=5></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.startValue number

    Specify startValue for ranges of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [startValue]='0'></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ranges.startWidth number

    Specify startWidth of circular gauge

    Default Value

    • [Array.number] scale.ranges.startWidth = 10

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ranges>
                    <e-range [startWidth]='10'></e-range>
                </e-ranges>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.shadowOffset number

    Specify shadowOffset value of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [shadowOffset]='1'>            
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.showIndicators boolean

    Specify showIndicators of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [showIndicators]="false">            
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.showLabels boolean

    Specify showLabels of circular gauge

    Default Value

    • true

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [showLabels]="true">            
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.showPointers boolean

    Specify showPointers of circular gauge

    Default Value

    • true

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [showPointers]="true">            
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.showRanges boolean

    Specify showRanges of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [showRanges]="true"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.showScaleBar boolean

    Specify showScaleBar of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [showScaleBar]="true">            
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.showTicks boolean

    Specify showTicks of circular gauge

    Default Value

    • true

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [showTicks]="true">            
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.size number

    Specify scaleBar size of circular gauge

    Default Value

    • 6

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [size]='6'></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.startAngle number

    Specify startAngle of circular gauge

    Default Value

    • 115

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale [startAngle]="90"></e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.subGauges Array

    Specify subGauge of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [subGauges]="[{ position:{x:10,y:30},height:250,width:200 }]" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.subGauges.height number

    Specify subGauge Height of circular gauge

    Default Value

    • 150

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [subGauges]="[{ height:250 }]" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.subGauges.position object

    Specify position for sub-gauge of circular gauge

    Default Value

    • Object

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [subGauges]="[{ position:{x:10,y:30} }]" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.subGauges.position.x number

    Specify x-axis position for sub-gauge of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [subGauges]="[{ position:{x:10} }]" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.subGauges.position.y number

    Specify y-axis position for sub-gauge of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [subGauges]="[{ position:{y:10} }]" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.subGauges.width number

    Specify subGauge Width of circular gauge

    Default Value

    • 150

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [subGauges]="[{ width:20 }]" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.sweepAngle number

    Specify sweepAngle of circular gauge

    Default Value

    • 310

    Example

  • HTML
  • <ej-circulargauge  id="Gauge1">
        <e-scales>
           <e-scale [sweepAngle]="200" >           
           </e-scale>
        </e-scales>
    </ej-circulargauge>

    scales.ticks Array

    Specify ticks of circular gauge

    Default Value

    • Array

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick [distanceFromScale]='10' [height]='16'></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.angle number

    Specify the angle for the ticks of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick [angle]='10'></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.color string

    Specify tick color of circular gauge

    Default Value

    • null

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick color='#777777'></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.distanceFromScale number

    Specify distanceFromScale value for ticks of circular gauge

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick [distanceFromScale]='10'></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.height number

    Specify tick height of circular gauge

    Default Value

    • 16

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick [height]='16'></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.placement enum

    Specify tick placement of circular gauge. See TickPlacement

    Default Value

    • Near

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick placement="near"></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.type enum

    Specify tick Style of circular gauge. See TickType

    Default Value

    • Major

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick type="major"></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    scales.ticks.width number

    Specify tick width of circular gauge

    Default Value

    • 3

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1">
        <e-scales>
            <e-scale>
                <e-ticks>
                    <e-tick [width]='2'></e-tick>
                </e-ticks>
            </e-scale>
        </e-scales>
    </ej-circularGauge>

    theme string

    Specify the theme of circular gauge.

    Default Value

    • “flatlight”

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" theme="flatlight">    
    </ej-circularGauge>

    legend object

    Options to customize the legend.

    legend.visible boolean

    Toggles the visibility of the legend.

    Default Value

    • false

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.visible]="true">    
    </ej-circularGauge>

    legend.toggleVisibility boolean

    Toggles the visibility of the ranges.

    Default Value

    • true

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.toggleVisibility]="flase">    
    </ej-circularGauge>

    legend.alignment enum

    Specifies the alignment of the legend.

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

    Default Value

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" legend.alignment="far">    
    </ej-circularGauge>

    legend.border object

    Options for customizing the legend border.

    legend.border.color string

    Border color of the legend.

    Default Value

    • “transparent”

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.border]="{color:'red'}">    
    </ej-circularGauge>

    legend.border.width number

    Border width of the legend.

    Default Value

    • 1

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.border]="{width:2}">    
    </ej-circularGauge>

    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 ranges is displayed in gray color.

    Default Value

    • null

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" legend.fill="green">    
    </ej-circularGauge>

    legend.itemPadding number

    Gap or padding between the legend items.

    Default Value

    • 20

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.itemPadding]="10">    
    </ej-circularGauge>

    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

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.itemStyle.border]="{color:'red'}">    
    </ej-circularGauge>

    legend.itemStyle.border.width number

    Border width of the legend items.

    Default Value

    • 1

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.itemStyle.border]="{width:2}">    
    </ej-circularGauge>

    legend.itemStyle.height number

    Specifies the height of the legend item shapes.

    Default Value

    • 10

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.itemStyle.height]="120">    
    </ej-circularGauge>

    legend.itemStyle.width number

    Specifies the width of the legend item shapes.

    Default Value

    • 10

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.itemStyle.width]="2">    
    </ej-circularGauge>

    legend.opacity number

    Opacity of the legend.

    Default Value

    • 1

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.opacity]="0.5">    
    </ej-circularGauge>

    legend.position enum

    Places the legend at specified position. Legend can be placed at left, right, top or bottom of the circular gauge.

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

    Default Value

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" legend.position="left">    
    </ej-circularGauge>

    legend.shape enum

    Shape of the legend items.

    </tr>
    Name Type Description
    Rectangle string Legend shape of circular gauge will be rectangle
    Circle string Legend shape of circular gauge will be circle
    Triangle string Legend shape of circular gauge will be triangle
    Ellipse string Legend shape of circular gauge will be ellipse
    Diamond string Legend shape of circular gauge will be diamond
    Pentagon string Legend shape of circular gauge will be pentagon
    Slider string Legend shape of circular gauge will be slider
    Wedge string Legend shape of circular gauge will be wedge
    Trapezoid string Legend shape of circular gauge will be trapezoid
    Line string Legend shape of circular gauge will be line

    Default Value

    • “Circle”. See Shape

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" legend.shape="triangle">    
    </ej-circularGauge>

    legend.size object

    Options to customize the size of the legend.

    legend.size.height string

    Specify the height of the legend. Height can be specified in pixel.

    Default Value

    • null

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.size.height]="100">    
    </ej-circularGauge>

    legend.size.width string

    Specify the width of the legend. Width can be specified in pixel.

    Default Value

    • null

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.size.width]="100">    
    </ej-circularGauge>

    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

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.font]="{fontFamily:'Arial'}">    
    </ej-circularGauge>

    legend.font.fontStyle string

    Font style for legend item text.

    Default Value

    • “Normal”

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.font]="{fontStyle:'Bold'}">    
    </ej-circularGauge>

    legend.font.fontWeight string

    Font weight for legend item text.

    Default Value

    • “Regular”

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.font]="{fontWeight:'lighter'}">    
    </ej-circularGauge>

    legend.font.size string

    Font size for legend item text.

    Default Value

    • “12px”

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.font]="{size:'12px'}">    
    </ej-circularGauge>

    legend.font.color string

    Font color of the text for legend items.

    Default Value

    • null

    Example

  • JS
  • <ej-circularGauge id="circularGauge1" [legend.font]="{color:'red'}">    
    </ej-circularGauge>

    legendItemRender

    Fires before rendering the legend item. This event is fired for each legend item in CircularGauge. You can use this event to customize legend item shape or add custom text to legend item.

    Example

  • TS
  • onLegendItemRender(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (legendItemRender)="onLegendItemRender($event)"> 
    </ej-circulargauge>
    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    object Instance of the circulargauge model object
  • JS
  • type
    string Name of the event
  • JS
  • data
    Object Instance of the legend item object that is about to be rendered

    legendItemClick

    Fires on clicking the legend item.

    Example

  • TS
  • onLegendItemClick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (legendItemClick)="onLegendItemClick($event)"> 
    </ej-circulargauge>
    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    Object Instance of the circulargauge model object
  • JS
  • type
    string Name of the event
  • JS
  • data
    Object Instance of the legend item object that is about to be rendered

    rangeMouseMove

    Fires when mouse moving on ranges.

    Example

  • TS
  • onRangeMouseMove(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (rangeMouseMove)="onRangeMouseMove($event)"> 
    </ej-circulargauge>
    Name Type Description
  • JS
  • cancel
    boolean Set this option to true to cancel the event
  • JS
  • model
    Object Instance of the circulargauge model object
  • JS
  • type
    string Name of the event
  • JS
  • data
    Object Region of ranges

    tooltip object

    Specify tooltip option of circular gauge

    Default Value

    • object

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [tooltip.showCustomLabelTooltip]="true" 
                                             [tooltip.showCustomLabelTooltip]="true">     
    </ej-circularGauge>

    tooltip.showCustomLabelTooltip boolean

    enable showCustomLabelTooltip of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [tooltip.showCustomLabelTooltip]="true">     
    </ej-circularGauge>

    tooltip.showLabelTooltip boolean

    enable showLabelTooltip of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [tooltip.showLabelTooltip]="true">     
    </ej-circularGauge>

    tooltip.templateID string

    Specify tooltip templateID of circular gauge

    Default Value

    • false

    Example

  • HTML
  • <div id="Tooltip" style="height: 60px; display: none;">
        <div id="icon">
            <div id="eficon"></div>
        </div>
        <div id="value">
            <div>
                <label id="efpercentage">&nbsp;#label#</label>
            </div>
        </div>
    </div>
    
    <ej-circularGauge id="circularGauge1" tooltip.templateID="Tooltip">     
    </ej-circularGauge>

    value number

    Specifies the value of circular gauge.

    Default Value

    • 0

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [value]="30">     
    </ej-circularGauge>

    width number

    Specifies the width of circular gauge.

    Default Value

    • 360

    Example

  • HTML
  • <ej-circularGauge id="circularGauge1" [width]="30">     
    </ej-circularGauge>

    Methods

    destroy()

    destroy the circular gauge widget. all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Returns: void

    Example

  • TS
  • destroy(){
         
         //Do something
         this.gauge.widget.destroy();
    
    }

    exportImage()

    To export Image

    Name Type Description
  • HTML
  • argument.fileName
    string fileName for the Image
  • HTML
  • argument.fileType
    string fileType for the Image

    Returns: boolean

    Example

  • TS
  • exportimage(){
         
         //Do something
         this.gauge.widget.exportImage();
    
    }

    getBackNeedleLength()

    To get BackNeedleLength

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getbackneedlelength(){
         
         //Do something
         this.gauge.widget.getBackNeedleLength();
    
    }

    getCustomLabelAngle()

    To get CustomLabelAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.customLabelIndex
    number customLabelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getcustomlabelangle(){
         
         //Do something
         this.gauge.widget.getCustomLabelAngle();
    
    }

    getCustomLabelValue()

    To get CustomLabelValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.customLabelIndex
    number customLabelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getcustomlabelvalue(){
         
         //Do something
         this.gauge.widget.getCustomLabelValue();
    
    }

    getLabelAngle()

    To get LabelAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getlabelangle(){
         
         //Do something
         this.gauge.widget.getLabelAngle();
    
    }

    getLabelDistanceFromScale()

    To get LabelDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getlabeldistancefromscale(){
         
         //Do something
         this.gauge.widget.getLabelDistanceFromScale();
    
    }

    getLabelPlacement()

    To get LabelPlacement

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getlabelplacement(){
         
         //Do something
         this.gauge.widget.getLabelPlacement();
    
    }

    getLabelStyle()

    To get LabelStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getlabelstyle(){
         
         //Do something
         this.gauge.widget.getLabelStyle();
    
    }

    getMajorIntervalValue()

    To get MajorIntervalValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getmajorintervalvalue(){
         
         //Do something
         this.gauge.widget.getMajorIntervalValue();
    
    }

    getMarkerDistanceFromScale()

    To get MarkerDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getmarkerdistancefromscale(){
         
         //Do something
         this.gauge.widget.getMarkerDistanceFromScale();
    
    }

    getMarkerStyle()

    To get MarkerStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getmarkerstyle(){
         
         //Do something
         this.gauge.widget.getMarkerStyle();
    
    }

    getMaximumValue()

    To get MaximumValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getmaximumvalue(){
         
         //Do something
         this.gauge.widget.getMaximumValue();
    
    }

    getMinimumValue()

    To get MinimumValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getminimumvalue(){
         
         //Do something
         this.gauge.widget.getMinimumValue();
    
    }

    getMinorIntervalValue()

    To get MinorIntervalValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getminorintervalvalue(){
         
         //Do something
         this.gauge.widget.getMinorIntervalValue();
    
    }

    getNeedleStyle()

    To get NeedleStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getneedlestyle(){
         
         //Do something
         this.gauge.widget.getNeedleStyle();
    
    }

    getPointerCapBorderWidth()

    To get PointerCapBorderWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointercapborderwidth(){
         
         //Do something
         this.gauge.widget.getPointerCapBorderWidth();
    
    }

    getPointerCapRadius()

    To get PointerCapRadius

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointercapradius(){
         
         //Do something
         this.gauge.widget.getPointerCapRadius();
    
    }

    getPointerLength()

    To get PointerLength

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointerlength(){
         
         //Do something
         this.gauge.widget.getPointerLength();
    
    }

    getPointerNeedleType()

    To get PointerNeedleType

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointerneedletype(){
         
         //Do something
         this.gauge.widget.getPointerNeedleType();
    
    }

    getPointerPlacement()

    To get PointerPlacement

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointerplacement(){
         
         //Do something
         this.gauge.widget.getPointerPlacement();
    
    }

    getPointerValue()

    To get PointerValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointervalue(){
         
         //Do something
         this.gauge.widget.getPointerValue();
    
    }

    getPointerWidth()

    To get PointerWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getpointerwidth(){
         
         //Do something
         this.gauge.widget.getPointerWidth();
    
    }

    getRangeBorderWidth()

    To get RangeBorderWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getrangeborderwidth(){
         
         //Do something
         this.gauge.widget.getRangeBorderWidth();
    
    }

    getRangeDistanceFromScale()

    To get RangeDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getrangedistancefromscale(){
         
         //Do something
         this.gauge.widget.getRangeDistanceFromScale();
    
    }

    getRangeEndValue()

    To get RangeEndValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getrangeendvalue(){
         
         //Do something
         this.gauge.widget.getRangeEndValue();
    
    }

    getRangePosition()

    To get RangePosition

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getrangeposition(){
         
         //Do something
         this.gauge.widget.getRangePosition();
    
    }

    getRangeSize()

    To get RangeSize

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getrangesize(){
         
         //Do something
         this.gauge.widget.getRangeSize();
    
    }

    getRangeStartValue()

    To get RangeStartValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getrangestartvalue(){
         
         //Do something
         this.gauge.widget.getRangeStartValue();
    
    }

    getScaleBarSize()

    To get ScaleBarSize

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getscalebarsize(){
         
         //Do something
         this.gauge.widget.getScaleBarSize();
    
    }

    getScaleBorderWidth()

    To get ScaleBorderWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getscaleborderwidth(){
         
         //Do something
         this.gauge.widget.getScaleBorderWidth();
    
    }

    getScaleDirection()

    To get ScaleDirection

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getscaledirection(){
         
         //Do something
         this.gauge.widget.getScaleDirection();
    
    }

    getScaleRadius()

    To get ScaleRadius

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getscaleradius(){
         
         //Do something
         this.gauge.widget.getScaleRadius();
    
    }

    getStartAngle()

    To get StartAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getstartangle(){
         
         //Do something
         this.gauge.widget.getStartAngle();
    
    }

    getSubGaugeLocation()

    To get SubGaugeLocation

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.GaugeIndex
    number GaugeIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getsubgaugelocation(){
         
         //Do something
         this.gauge.widget.getSubGaugeLocation();
    
    }

    getSweepAngle()

    To get SweepAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getsweepangle(){
         
         //Do something
         this.gauge.widget.getSweepAngle();
    
    }

    getTickAngle()

    To get TickAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the Gauge

    Returns: any

    Example

  • TS
  • gettickangle(){
         
         //Do something
         this.gauge.widget.getTickAngle();
    
    }

    getTickDistanceFromScale()

    To get TickDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the Gauge

    Returns: any

    Example

  • TS
  • getdistancefromscale(){
         
         //Do something
         this.gauge.widget.getDistanceFromScale();
    
    }

    getTickHeight()

    To get TickHeight

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the Gauge

    Returns: any

    Example

  • TS
  • gettickheight(){
         
         //Do something
         this.gauge.widget.getTickHeight();
    
    }

    getTickPlacement()

    To get TickPlacement

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the Gauge

    Returns: any

    Example

  • TS
  • gettickplacement(){
         
         //Do something
         this.gauge.widget.getTickPlacement();
    
    }

    getTickStyle()

    To get TickStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the Gauge

    Returns: any

    Example

  • TS
  • gettickstyle(){
         
         //Do something
         this.gauge.widget.getTickStyle();
    
    }

    getTickWidth()

    To get TickWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the Gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the Gauge

    Returns: any

    Example

  • TS
  • gettickwidth(){
         
         //Do something
         this.gauge.widget.getTickWidth();
    
    }

    includeFirstValue()

    To set includeFirstValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • includefirstvalue(){
         
         //Do something
         this.gauge.widget.includeFirstValue();
    
    }

    redraw()

    Switching the redraw option for the gauge

    Name Type Description
  • HTML
  • argument.value
    string redraw value for the gauge

    Returns: void

    Example

  • TS
  • redraw(){
         
         //Do something
         this.gauge.widget.redraw();
    
    }

    setBackNeedleLength()

    To set BackNeedleLength

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setbackneedlelength(){
         
         //Do something
         this.gauge.widget.setBackNeedleLength();
    
    }

    setCustomLabelAngle()

    To set CustomLabelAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.customLabelIndex
    number customLabelIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setcustomlabelangle(){
         
         //Do something
         this.gauge.widget.setCustomLabelAngle();
    
    }

    setCustomLabelValue()

    To set CustomLabelValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.customLabelIndex
    number customLabelIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setcustomlabelvalue(){
         
         //Do something
         this.gauge.widget.setCustomLabelValue();
    
    }

    setLabelAngle()

    To set LabelAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the gauge
  • HTML
  • argument.angle
    number angle value for the gauge

    Returns: void

    Example

  • TS
  • setlabelangle(){
         
         //Do something
         this.gauge.widget.setLabelAngle();
    
    }

    setLabelDistanceFromScale()

    To set LabelDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setlabeldistancefromscale(){
         
         //Do something
         this.gauge.widget.setLabelDistanceFromScale();
    
    }

    setLabelPlacement()

    To set LabelPlacement

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setlabelplacement(){
         
         //Do something
         this.gauge.widget.setLabelPlacement();
    
    }

    setLabelStyle()

    To set LabelStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.labelIndex
    number labelIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setlabelstyle(){
         
         //Do something
         this.gauge.widget.seLabelStyle();
    
    }

    setMajorIntervalValue()

    To set MajorIntervalValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setmajorintervalvalue(){
         
         //Do something
         this.gauge.widget.setMajorIntervalValue();
    
    }

    setMarkerDistanceFromScale()

    To set MarkerDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setmarkerdistancefromscale(){
         
         //Do something
         this.gauge.widget.setMarkerDistanceFromScale();
    
    }

    setMarkerStyle()

    To set MarkerStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setmarkerstyle(){
         
         //Do something
         this.gauge.widget.setMarkerStyle();
    
    }

    setMaximumValue()

    To set MaximumValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setmaximumvalue(){
         
         //Do something
         this.gauge.widget.setMaximumValue();
    
    }

    setMinimumValue()

    To set MinimumValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setminimumvalue(){
         
         //Do something
         this.gauge.widget.setMinimumValue();
    
    }

    setMinorIntervalValue()

    To set MinorIntervalValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setminorintervalue(){
         
         //Do something
         this.gauge.widget.setMinorInterValue();
    
    }

    setNeedleStyle()

    To set NeedleStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setneedlestyle(){
         
         //Do something
         this.gauge.widget.setNeedleStyle();
    
    }

    setPointerCapBorderWidth()

    To set PointerCapBorderWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setborderwidth(){
         
         //Do something
         this.gauge.widget.setBorderWidth();
    
    }

    setPointerCapRadius()

    To set PointerCapRadius

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setPointerCapRadius(){
         
         //Do something
         this.gauge.widget.setPointerCapRadius();
    
    }

    setPointerLength()

    To set PointerLength

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setpointerlength(){
         
         //Do something
         this.gauge.widget.setPointerLength();
    
    }

    setPointerNeedleType()

    To set PointerNeedleType

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setpointerneedletype(){
         
         //Do something
         this.gauge.widget.setPointerNeedleType();
    
    }

    setPointerPlacement()

    To set PointerPlacement

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setpointerplacement(){
         
         //Do something
         this.gauge.widget.setPointerPlacement();
    
    }

    setPointerValue()

    To set PointerValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setpointervalue(){
         
         //Do something
         this.gauge.widget.setPointerValue();
    
    }

    setPointerWidth()

    To set PointerWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.pointerIndex
    number pointerIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setpointerwidth(){
         
         //Do something
         this.gauge.widget.setPointerWidth();
    
    }

    setRangeBorderWidth()

    To set RangeBorderWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setrangeborderwidth(){
         
         //Do something
         this.gauge.widget.setRangeBorderWidth();
    
    }

    setRangeDistanceFromScale()

    To set RangeDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setrangedistancefromscale(){
         
         //Do something
         this.gauge.widget.setRangeDistanceFromScale();
    
    }

    setRangeEndValue()

    To set RangeEndValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setrangeendvalue(){
         
         //Do something
         this.gauge.widget.setRangeEndValue();
    
    }

    setRangePosition()

    To set RangePosition

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setrangeposition(){
         
         //Do something
         this.gauge.widget.setRangePosition();
    
    }

    setRangeSize()

    To set RangeSize

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setrangesize(){
         
         //Do something
         this.gauge.widget.setRangeSize();
    
    }

    setRangeStartValue()

    To set RangeStartValue

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.rangeIndex
    number rangeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setrangestartvalue(){
         
         //Do something
         this.gauge.widget.setRangeStartValue();
    
    }

    setScaleBarSize()

    To set ScaleBarSize

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setscalebarsize(){
         
         //Do something
         this.gauge.widget.setScaleBarSize();
    
    }

    setScaleBorderWidth()

    To set ScaleBorderWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setscaleborderwidth(){
         
         //Do something
         this.gauge.widget.setScaleBorderWidth();
    
    }

    setScaleDirection()

    To set ScaleDirection

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setscaledirection(){
         
         //Do something
         this.gauge.widget.setScaleDirection();
    
    }

    setScaleRadius()

    To set ScaleRadius

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setscaleradius(){
         
         //Do something
         this.gauge.widget.setScaleRadius();
    
    }

    setStartAngle()

    To set StartAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setstartangle(){
         
         //Do something
         this.gauge.widget.setStartAngle();
    
    }

    setSubGaugeLocation()

    To set SubGaugeLocation

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.GaugeIndex
    number GaugeIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setsubgaugelocation(){
         
         //Do something
         this.gauge.widget.setSubGaugeLocation();
    
    }

    setSweepAngle()

    To set SweepAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setsweepangle(){
         
         //Do something
         this.gauge.widget.setSweepAngle();
    
    }

    setTickAngle()

    To set TickAngle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • settickangle(){
         
         //Do something
         this.gauge.widget.setTickAngle();
    
    }

    setTickDistanceFromScale()

    To set TickDistanceFromScale

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • setdistancefromscale(){
         
         //Do something
         this.gauge.widget.setDistanceFromScale();
    
    }

    setTickHeight()

    To set TickHeight

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • settickheight(){
         
         //Do something
         this.gauge.widget.setTickHeight();
    
    }

    setTickPlacement()

    To set TickPlacement

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • settickplacement(){
         
         //Do something
         this.gauge.widget.setTickPlacement();
    
    }

    setTickStyle()

    To set TickStyle

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • settickstyle(){
         
         //Do something
         this.gauge.widget.setTickStyle();
    
    }

    setTickWidth()

    To set TickWidth

    Name Type Description
  • HTML
  • argument.scaleIndex
    number scaleIndex value for the gauge
  • HTML
  • argument.tickIndex
    number tickIndex value for the gauge
  • HTML
  • argument.value
    number value for the gauge

    Returns: void

    Example

  • TS
  • settickwidth(){
         
         //Do something
         this.gauge.widget.setTickWidth();
    
    }

    Events

    drawCustomLabel

    Triggers while the custom labels are being drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • position
    Object returns the startX and startY of the custom label
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the custom label belongs.
  • HTML
  • style
    string returns the custom label style
  • HTML
  • customLabelElement
    Object returns the current custom label element.
  • HTML
  • customLabelIndex
    number returns the index of the custom label.
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawcustomlabel(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawCustomLabel)="ondrawcustomlabel($event)"> 
    </ej-circulargauge>

    drawIndicators

    Triggers while the indicators are being started to drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • position
    Object returns the startX and startY of the indicator
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the indicator belongs.
  • HTML
  • style
    string returns the indicator style
  • HTML
  • indicatorElement
    Object returns the current indicator element.
  • HTML
  • indicatorIndex
    number returns the index of the indicator.
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawindicators(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawIndicators)="ondrawindicators($event)"> 
    </ej-circulargauge>

    drawLabels

    Triggers while the labels are being drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • position
    Object returns the startX and startY of the labels
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the label belongs.
  • HTML
  • style
    string returns the label style
  • HTML
  • label
    Object returns the label object of the gauge.
    Name Type Description
  • HTML
  • angle
    number returns the angle of the labels.
  • HTML
  • element
    Object returns the current label element.
  • HTML
  • index
    number returns the index of the label.
  • HTML
  • pointerValue
    number returns the value of the label.
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawlabels(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawLabels)="ondrawlabels($event)"> 
    </ej-circulargauge>

    drawPointerCap

    Triggers while the pointer cap is being drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • position
    Object returns the startX and startY of the pointer cap.
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • style
    string returns the pointer cap style
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawpointercap(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawPointerCap)="ondrawpointercap($event)"> 
    </ej-circulargauge>

    drawPointers

    Triggers while the pointers are being drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • position
    Object returns the startX and startY of the pointer
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • HTML
  • style
    string returns the pointer style
  • HTML
  • pointer
    Object returns the pointer object of the gauge.
    Name Type Description
  • HTML
  • angle
    number returns the angle of the pointer.
  • HTML
  • element
    Object returns the current pointer element.
  • HTML
  • index
    number returns the index of the pointer.
  • HTML
  • value
    number returns the value of the pointer.
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawpointers(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawPointers)="ondrawpointers($event)"> 
    </ej-circulargauge>

    drawRange

    Triggers when the ranges begin to be getting drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • position
    Object returns the startX and startY of the range
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the range belongs.
  • HTML
  • style
    string returns the range style
  • HTML
  • rangeElement
    Object returns the current range element.
  • HTML
  • rangeIndex
    number returns the index of the range.
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawrange(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawRange)="ondrawrange($event)"> 
    </ej-circulargauge>

    drawTicks

    Triggers while the ticks are being drawn on the gauge.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • position
    Object returns the startX and startY of the ticks
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the options of the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the tick belongs.
  • HTML
  • style
    string returns the ticks style
  • HTML
  • tick
    Object returns the tick object of the gauge.
    Name Type Description
  • HTML
  • angle
    number returns the angle of the tick.
  • HTML
  • element
    Object returns the current tick element.
  • HTML
  • index
    number returns the index of the tick.
  • HTML
  • pointerValue
    number returns the label value of the tick.
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • ondrawticks(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (drawTicks)="ondrawticks($event)"> 
    </ej-circulargauge>

    load

    Triggers while the gauge start to Load.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • Model
    Object returns the gauge model
  • HTML
  • scaleElement
    Object returns the entire scale element.
  • HTML
  • context
    Object returns the context element
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • onload(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (load)="onload($event)"> 
    </ej-circulargauge>

    mouseClick

    Triggers when the left mouse button is clicked.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • type
    Object returns the name of the event
  • HTML
  • scaleElement
    Object returns the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • HTML
  • context
    Object returns the context element
  • HTML
  • pointer
    Object returns the pointer object
    Name Type Description
  • HTML
  • index
    number returns the pointer Index
  • HTML
  • element
    Object returns the pointer element.
  • HTML
  • value
    number returns the value of the pointer.
  • HTML
  • angle
    number returns the angle of the pointer.
  • HTML
  • style
    string returns the pointer style
  • HTML
  • position
    Object returns the startX and startY of the pointer.

    Example

  • TS
  • onmouseclick(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (mouseClick)="onmouseclick($event)"> 
    </ej-circulargauge>

    mouseClickMove

    Triggers when clicking and dragging the mouse pointer over the gauge pointer.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • type
    Object returns the name of the event
  • HTML
  • scaleElement
    Object returns the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • HTML
  • context
    Object returns the context element
  • HTML
  • pointer
    Object returns the pointer object
    Name Type Description
  • HTML
  • index
    number returns the pointer Index
  • HTML
  • element
    Object returns the pointer element.
  • HTML
  • value
    number returns the value of the pointer.
  • HTML
  • angle
    number returns the angle of the pointer.
  • HTML
  • style
    string returns the pointer style
  • HTML
  • position
    Object returns the startX and startY of the pointer.

    Example

  • TS
  • onmouseclickmove(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (mouseClickMove)="onmouseclickmove($event)"> 
    </ej-circulargauge>

    mouseClickUp

    Triggers when the mouse click is released.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • type
    Object returns the name of the event
  • HTML
  • scaleElement
    Object returns the scale element.
  • HTML
  • scaleIndex
    number returns the scaleIndex to which the pointer belongs.
  • HTML
  • context
    Object returns the context element
  • HTML
  • pointer
    Object returns the pointer object
    Name Type Description
  • HTML
  • index
    number returns the pointer Index
  • HTML
  • element
    Object returns the pointer element.
  • HTML
  • value
    number returns the value of the pointer.
  • HTML
  • angle
    number returns the angle of the pointer.
  • HTML
  • style
    string returns the pointer style
  • HTML
  • position
    Object returns the startX and startY of the pointer.

    Example

  • TS
  • onmouseclickup(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (mouseClickUp)="onmouseclickup($event)"> 
    </ej-circulargauge>

    renderComplete

    Triggers when the rendering of the gauge is completed.

    Name Type Description
  • HTML
  • object
    Object returns the object of the gauge.
  • HTML
  • cancel
    boolean returns the cancel option value
  • HTML
  • context
    Object returns the context element
  • HTML
  • scaleElement
    Object returns the entire scale element.
  • HTML
  • model
    Object returns the gauge model
  • HTML
  • type
    string returns the name of the event

    Example

  • TS
  • onrendercomplete(sender){
         
         //Do something
    
    }
  • HTML
  • <ej-circulargauge id="events" (renderComplete)="onrendercomplete($event)"> 
    </ej-circulargauge>