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.
<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
<ej-circularGauge id="circularGauge1" [animationSpeed]="1000" >
</ej-circularGauge>
backgroundColor string
Specifies the background color of circular gauge.
Default Value
- null
Example
<ej-circularGauge id="circularGauge1" backgroundColor="#F234F4" >
</ej-circularGauge>
distanceFromCorner number
Specify distanceFromCorner value of circular gauge
Default Value
- center
Example
<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
<ej-circularGauge id="circularGauge1" rangeZOrder="rear" >
</ej-circularGauge>
enableAnimation boolean
Specify animate value of circular gauge
Default Value
- true
Example
<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
<ej-circularGauge id="circularGauge1" [enableGroupSeparator]="true" >
</ej-circularGauge>
enableResize boolean
Controls whether circular gauge has to be responsive while resizing.
Default Value
- false
Example
<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
<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
<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
<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
<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
<ej-circularGauge id="circularGauge1" gaugePosition ="center">
</ej-circularGauge>
height number
Specifies the height of circular gauge.
Default Value
- 360
Example
<ej-circularGauge id="circularGauge1" [height]="400" >
</ej-circularGauge>
interiorGradient object
Specifies the interiorGradient of circular gauge.
Default Value
- null
Example
this.interiorGradient = {
colorInfo:[{
colorStop:1,
color:'red'
}],
};
<ej-circulargauge [interiorGradient]="interiorGradient">
</ej-circulargauge>
isRadialGradient boolean
Specify isRadialGradient value of circular gauge
Default Value
- false
Example
<ej-circularGauge id="circularGauge1" [isRadialGradient]="true">
</ej-circularGauge>
isResponsive boolean
Specify isResponsive value of circular gauge
Default Value
- false
Example
<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
<ej-circularGauge id="circularGauge1" locale="en-Us">
</ej-circularGauge>
maximum number
Specifies the maximum value of circular gauge.
Default Value
- 100
Example
<ej-circularGauge id="circularGauge1" [maximum]="120">
</ej-circularGauge>
minimum number
Specifies the minimum value of circular gauge.
Default Value
- 0
Example
<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
<ej-circularGauge id="circularGauge1" outerCustomLabelPosition="right">
</ej-circularGauge>
radius number
Specifies the radius of circular gauge.
Default Value
- 180
Example
<ej-circularGauge id="circularGauge1" [radius]="100">
</ej-circularGauge>
readOnly boolean
Specify readonly value of circular gauge
Default Value
- true
Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
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 | </tr>
Default Value
- Near
Example
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<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
<ej-circularGauge id="circularGauge1" [legend.visible]="true">
</ej-circularGauge>
legend.toggleVisibility boolean
Toggles the visibility of the ranges.
Default Value
- true
Example
<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
- “Center”. See Alignment
Example
<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
<ej-circularGauge id="circularGauge1" [legend.border]="{color:'red'}">
</ej-circularGauge>
legend.border.width number
Border width of the legend.
Default Value
- 1
Example
<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
<ej-circularGauge id="circularGauge1" legend.fill="green">
</ej-circularGauge>
legend.itemPadding number
Gap or padding between the legend items.
Default Value
- 20
Example
<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
<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
<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
<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
<ej-circularGauge id="circularGauge1" [legend.itemStyle.width]="2">
</ej-circularGauge>
legend.opacity number
Opacity of the legend.
Default Value
- 1
Example
<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
- “Bottom”. See Position
Example
<ej-circularGauge id="circularGauge1" legend.position="left">
</ej-circularGauge>
legend.shape enum
Shape of the legend items.
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 | </tr>
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
<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
<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
<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
<ej-circularGauge id="circularGauge1" [legend.font]="{fontFamily:'Arial'}">
</ej-circularGauge>
legend.font.fontStyle string
Font style for legend item text.
Default Value
- “Normal”
Example
<ej-circularGauge id="circularGauge1" [legend.font]="{fontStyle:'Bold'}">
</ej-circularGauge>
legend.font.fontWeight string
Font weight for legend item text.
Default Value
- “Regular”
Example
<ej-circularGauge id="circularGauge1" [legend.font]="{fontWeight:'lighter'}">
</ej-circularGauge>
legend.font.size string
Font size for legend item text.
Default Value
- “12px”
Example
<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
<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
onLegendItemRender(sender){
//Do something
}
<ej-circulargauge id="events" (legendItemRender)="onLegendItemRender($event)">
</ej-circulargauge>
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
object | Instance of the circulargauge model object |
|
string | Name of the event |
|
Object | Instance of the legend item object that is about to be rendered |
legendItemClick
Fires on clicking the legend item.
Example
onLegendItemClick(sender){
//Do something
}
<ej-circulargauge id="events" (legendItemClick)="onLegendItemClick($event)">
</ej-circulargauge>
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
Object | Instance of the circulargauge model object |
|
string | Name of the event |
|
Object | Instance of the legend item object that is about to be rendered |
rangeMouseMove
Fires when mouse moving on ranges.
Example
onRangeMouseMove(sender){
//Do something
}
<ej-circulargauge id="events" (rangeMouseMove)="onRangeMouseMove($event)">
</ej-circulargauge>
Name | Type | Description |
---|---|---|
|
boolean | Set this option to true to cancel the event |
|
Object | Instance of the circulargauge model object |
|
string | Name of the event |
|
Object | Region of ranges |
tooltip object
Specify tooltip option of circular gauge
Default Value
- object
Example
<ej-circularGauge id="circularGauge1" [tooltip.showCustomLabelTooltip]="true"
[tooltip.showCustomLabelTooltip]="true">
</ej-circularGauge>
tooltip.showCustomLabelTooltip boolean
enable showCustomLabelTooltip of circular gauge
Default Value
- false
Example
<ej-circularGauge id="circularGauge1" [tooltip.showCustomLabelTooltip]="true">
</ej-circularGauge>
tooltip.showLabelTooltip boolean
enable showLabelTooltip of circular gauge
Default Value
- false
Example
<ej-circularGauge id="circularGauge1" [tooltip.showLabelTooltip]="true">
</ej-circularGauge>
tooltip.templateID string
Specify tooltip templateID of circular gauge
Default Value
- false
Example
<div id="Tooltip" style="height: 60px; display: none;">
<div id="icon">
<div id="eficon"></div>
</div>
<div id="value">
<div>
<label id="efpercentage"> #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
<ej-circularGauge id="circularGauge1" [value]="30">
</ej-circularGauge>
width number
Specifies the width of circular gauge.
Default Value
- 360
Example
<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
destroy(){
//Do something
this.gauge.widget.destroy();
}
exportImage()
To export Image
Name | Type | Description |
---|---|---|
|
string | fileName for the Image |
|
string | fileType for the Image |
Returns: boolean
Example
exportimage(){
//Do something
this.gauge.widget.exportImage();
}
getBackNeedleLength()
To get BackNeedleLength
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getbackneedlelength(){
//Do something
this.gauge.widget.getBackNeedleLength();
}
getCustomLabelAngle()
To get CustomLabelAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | customLabelIndex value for the Gauge |
Returns: any
Example
getcustomlabelangle(){
//Do something
this.gauge.widget.getCustomLabelAngle();
}
getCustomLabelValue()
To get CustomLabelValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | customLabelIndex value for the Gauge |
Returns: any
Example
getcustomlabelvalue(){
//Do something
this.gauge.widget.getCustomLabelValue();
}
getLabelAngle()
To get LabelAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | labelIndex value for the Gauge |
Returns: any
Example
getlabelangle(){
//Do something
this.gauge.widget.getLabelAngle();
}
getLabelDistanceFromScale()
To get LabelDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | labelIndex value for the Gauge |
Returns: any
Example
getlabeldistancefromscale(){
//Do something
this.gauge.widget.getLabelDistanceFromScale();
}
getLabelPlacement()
To get LabelPlacement
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | labelIndex value for the Gauge |
Returns: any
Example
getlabelplacement(){
//Do something
this.gauge.widget.getLabelPlacement();
}
getLabelStyle()
To get LabelStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | labelIndex value for the Gauge |
Returns: any
Example
getlabelstyle(){
//Do something
this.gauge.widget.getLabelStyle();
}
getMajorIntervalValue()
To get MajorIntervalValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getmajorintervalvalue(){
//Do something
this.gauge.widget.getMajorIntervalValue();
}
getMarkerDistanceFromScale()
To get MarkerDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getmarkerdistancefromscale(){
//Do something
this.gauge.widget.getMarkerDistanceFromScale();
}
getMarkerStyle()
To get MarkerStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getmarkerstyle(){
//Do something
this.gauge.widget.getMarkerStyle();
}
getMaximumValue()
To get MaximumValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getmaximumvalue(){
//Do something
this.gauge.widget.getMaximumValue();
}
getMinimumValue()
To get MinimumValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getminimumvalue(){
//Do something
this.gauge.widget.getMinimumValue();
}
getMinorIntervalValue()
To get MinorIntervalValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getminorintervalvalue(){
//Do something
this.gauge.widget.getMinorIntervalValue();
}
getNeedleStyle()
To get NeedleStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getneedlestyle(){
//Do something
this.gauge.widget.getNeedleStyle();
}
getPointerCapBorderWidth()
To get PointerCapBorderWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getpointercapborderwidth(){
//Do something
this.gauge.widget.getPointerCapBorderWidth();
}
getPointerCapRadius()
To get PointerCapRadius
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getpointercapradius(){
//Do something
this.gauge.widget.getPointerCapRadius();
}
getPointerLength()
To get PointerLength
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getpointerlength(){
//Do something
this.gauge.widget.getPointerLength();
}
getPointerNeedleType()
To get PointerNeedleType
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getpointerneedletype(){
//Do something
this.gauge.widget.getPointerNeedleType();
}
getPointerPlacement()
To get PointerPlacement
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getpointerplacement(){
//Do something
this.gauge.widget.getPointerPlacement();
}
getPointerValue()
To get PointerValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getpointervalue(){
//Do something
this.gauge.widget.getPointerValue();
}
getPointerWidth()
To get PointerWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | pointerIndex value for the Gauge |
Returns: any
Example
getpointerwidth(){
//Do something
this.gauge.widget.getPointerWidth();
}
getRangeBorderWidth()
To get RangeBorderWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | rangeIndex value for the Gauge |
Returns: any
Example
getrangeborderwidth(){
//Do something
this.gauge.widget.getRangeBorderWidth();
}
getRangeDistanceFromScale()
To get RangeDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | rangeIndex value for the Gauge |
Returns: any
Example
getrangedistancefromscale(){
//Do something
this.gauge.widget.getRangeDistanceFromScale();
}
getRangeEndValue()
To get RangeEndValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | rangeIndex value for the Gauge |
Returns: any
Example
getrangeendvalue(){
//Do something
this.gauge.widget.getRangeEndValue();
}
getRangePosition()
To get RangePosition
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | rangeIndex value for the Gauge |
Returns: any
Example
getrangeposition(){
//Do something
this.gauge.widget.getRangePosition();
}
getRangeSize()
To get RangeSize
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | rangeIndex value for the Gauge |
Returns: any
Example
getrangesize(){
//Do something
this.gauge.widget.getRangeSize();
}
getRangeStartValue()
To get RangeStartValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | rangeIndex value for the Gauge |
Returns: any
Example
getrangestartvalue(){
//Do something
this.gauge.widget.getRangeStartValue();
}
getScaleBarSize()
To get ScaleBarSize
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getscalebarsize(){
//Do something
this.gauge.widget.getScaleBarSize();
}
getScaleBorderWidth()
To get ScaleBorderWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getscaleborderwidth(){
//Do something
this.gauge.widget.getScaleBorderWidth();
}
getScaleDirection()
To get ScaleDirection
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getscaledirection(){
//Do something
this.gauge.widget.getScaleDirection();
}
getScaleRadius()
To get ScaleRadius
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getscaleradius(){
//Do something
this.gauge.widget.getScaleRadius();
}
getStartAngle()
To get StartAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getstartangle(){
//Do something
this.gauge.widget.getStartAngle();
}
getSubGaugeLocation()
To get SubGaugeLocation
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | GaugeIndex value for the Gauge |
Returns: any
Example
getsubgaugelocation(){
//Do something
this.gauge.widget.getSubGaugeLocation();
}
getSweepAngle()
To get SweepAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
Returns: any
Example
getsweepangle(){
//Do something
this.gauge.widget.getSweepAngle();
}
getTickAngle()
To get TickAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | tickIndex value for the Gauge |
Returns: any
Example
gettickangle(){
//Do something
this.gauge.widget.getTickAngle();
}
getTickDistanceFromScale()
To get TickDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | tickIndex value for the Gauge |
Returns: any
Example
getdistancefromscale(){
//Do something
this.gauge.widget.getDistanceFromScale();
}
getTickHeight()
To get TickHeight
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | labelIndex value for the Gauge |
Returns: any
Example
gettickheight(){
//Do something
this.gauge.widget.getTickHeight();
}
getTickPlacement()
To get TickPlacement
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | tickIndex value for the Gauge |
Returns: any
Example
gettickplacement(){
//Do something
this.gauge.widget.getTickPlacement();
}
getTickStyle()
To get TickStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | tickIndex value for the Gauge |
Returns: any
Example
gettickstyle(){
//Do something
this.gauge.widget.getTickStyle();
}
getTickWidth()
To get TickWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the Gauge |
|
number | tickIndex value for the Gauge |
Returns: any
Example
gettickwidth(){
//Do something
this.gauge.widget.getTickWidth();
}
includeFirstValue()
To set includeFirstValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | labelIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
includefirstvalue(){
//Do something
this.gauge.widget.includeFirstValue();
}
redraw()
Switching the redraw option for the gauge
Name | Type | Description |
---|---|---|
|
string | redraw value for the gauge |
Returns: void
Example
redraw(){
//Do something
this.gauge.widget.redraw();
}
setBackNeedleLength()
To set BackNeedleLength
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setbackneedlelength(){
//Do something
this.gauge.widget.setBackNeedleLength();
}
setCustomLabelAngle()
To set CustomLabelAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | customLabelIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setcustomlabelangle(){
//Do something
this.gauge.widget.setCustomLabelAngle();
}
setCustomLabelValue()
To set CustomLabelValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | customLabelIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setcustomlabelvalue(){
//Do something
this.gauge.widget.setCustomLabelValue();
}
setLabelAngle()
To set LabelAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | labelIndex value for the gauge |
|
number | angle value for the gauge |
Returns: void
Example
setlabelangle(){
//Do something
this.gauge.widget.setLabelAngle();
}
setLabelDistanceFromScale()
To set LabelDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | labelIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setlabeldistancefromscale(){
//Do something
this.gauge.widget.setLabelDistanceFromScale();
}
setLabelPlacement()
To set LabelPlacement
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | labelIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setlabelplacement(){
//Do something
this.gauge.widget.setLabelPlacement();
}
setLabelStyle()
To set LabelStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | labelIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setlabelstyle(){
//Do something
this.gauge.widget.seLabelStyle();
}
setMajorIntervalValue()
To set MajorIntervalValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setmajorintervalvalue(){
//Do something
this.gauge.widget.setMajorIntervalValue();
}
setMarkerDistanceFromScale()
To set MarkerDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setmarkerdistancefromscale(){
//Do something
this.gauge.widget.setMarkerDistanceFromScale();
}
setMarkerStyle()
To set MarkerStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setmarkerstyle(){
//Do something
this.gauge.widget.setMarkerStyle();
}
setMaximumValue()
To set MaximumValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setmaximumvalue(){
//Do something
this.gauge.widget.setMaximumValue();
}
setMinimumValue()
To set MinimumValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setminimumvalue(){
//Do something
this.gauge.widget.setMinimumValue();
}
setMinorIntervalValue()
To set MinorIntervalValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setminorintervalue(){
//Do something
this.gauge.widget.setMinorInterValue();
}
setNeedleStyle()
To set NeedleStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setneedlestyle(){
//Do something
this.gauge.widget.setNeedleStyle();
}
setPointerCapBorderWidth()
To set PointerCapBorderWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setborderwidth(){
//Do something
this.gauge.widget.setBorderWidth();
}
setPointerCapRadius()
To set PointerCapRadius
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setPointerCapRadius(){
//Do something
this.gauge.widget.setPointerCapRadius();
}
setPointerLength()
To set PointerLength
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setpointerlength(){
//Do something
this.gauge.widget.setPointerLength();
}
setPointerNeedleType()
To set PointerNeedleType
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setpointerneedletype(){
//Do something
this.gauge.widget.setPointerNeedleType();
}
setPointerPlacement()
To set PointerPlacement
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setpointerplacement(){
//Do something
this.gauge.widget.setPointerPlacement();
}
setPointerValue()
To set PointerValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setpointervalue(){
//Do something
this.gauge.widget.setPointerValue();
}
setPointerWidth()
To set PointerWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | pointerIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setpointerwidth(){
//Do something
this.gauge.widget.setPointerWidth();
}
setRangeBorderWidth()
To set RangeBorderWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | rangeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setrangeborderwidth(){
//Do something
this.gauge.widget.setRangeBorderWidth();
}
setRangeDistanceFromScale()
To set RangeDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | rangeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setrangedistancefromscale(){
//Do something
this.gauge.widget.setRangeDistanceFromScale();
}
setRangeEndValue()
To set RangeEndValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | rangeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setrangeendvalue(){
//Do something
this.gauge.widget.setRangeEndValue();
}
setRangePosition()
To set RangePosition
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | rangeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setrangeposition(){
//Do something
this.gauge.widget.setRangePosition();
}
setRangeSize()
To set RangeSize
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | rangeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setrangesize(){
//Do something
this.gauge.widget.setRangeSize();
}
setRangeStartValue()
To set RangeStartValue
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | rangeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setrangestartvalue(){
//Do something
this.gauge.widget.setRangeStartValue();
}
setScaleBarSize()
To set ScaleBarSize
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setscalebarsize(){
//Do something
this.gauge.widget.setScaleBarSize();
}
setScaleBorderWidth()
To set ScaleBorderWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setscaleborderwidth(){
//Do something
this.gauge.widget.setScaleBorderWidth();
}
setScaleDirection()
To set ScaleDirection
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setscaledirection(){
//Do something
this.gauge.widget.setScaleDirection();
}
setScaleRadius()
To set ScaleRadius
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setscaleradius(){
//Do something
this.gauge.widget.setScaleRadius();
}
setStartAngle()
To set StartAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setstartangle(){
//Do something
this.gauge.widget.setStartAngle();
}
setSubGaugeLocation()
To set SubGaugeLocation
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | GaugeIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setsubgaugelocation(){
//Do something
this.gauge.widget.setSubGaugeLocation();
}
setSweepAngle()
To set SweepAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setsweepangle(){
//Do something
this.gauge.widget.setSweepAngle();
}
setTickAngle()
To set TickAngle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | tickIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
settickangle(){
//Do something
this.gauge.widget.setTickAngle();
}
setTickDistanceFromScale()
To set TickDistanceFromScale
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | tickIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
setdistancefromscale(){
//Do something
this.gauge.widget.setDistanceFromScale();
}
setTickHeight()
To set TickHeight
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | tickIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
settickheight(){
//Do something
this.gauge.widget.setTickHeight();
}
setTickPlacement()
To set TickPlacement
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | tickIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
settickplacement(){
//Do something
this.gauge.widget.setTickPlacement();
}
setTickStyle()
To set TickStyle
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | tickIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
settickstyle(){
//Do something
this.gauge.widget.setTickStyle();
}
setTickWidth()
To set TickWidth
Name | Type | Description |
---|---|---|
|
number | scaleIndex value for the gauge |
|
number | tickIndex value for the gauge |
|
number | value for the gauge |
Returns: void
Example
settickwidth(){
//Do something
this.gauge.widget.setTickWidth();
}
Events
drawCustomLabel
Triggers while the custom labels are being drawn on the gauge.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the gauge. |
|
boolean | returns the cancel option value |
|
Object | returns the context element |
|
Object | returns the startX and startY of the custom label |
|
Object | returns the gauge model |
|
Object | returns the options of the scale element. |
|
number | returns the scaleIndex to which the custom label belongs. |
|
string | returns the custom label style |
|
Object | returns the current custom label element. |
|
number | returns the index of the custom label. |
|
string | returns the name of the event |
Example
ondrawcustomlabel(sender){
//Do something
}
<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 |
---|---|---|
|
Object | returns the object of the gauge. |
|
boolean | returns the cancel option value |
|
Object | returns the context element |
|
Object | returns the startX and startY of the indicator |
|
Object | returns the gauge model |
|
Object | returns the options of the scale element. |
|
number | returns the scaleIndex to which the indicator belongs. |
|
string | returns the indicator style |
|
Object | returns the current indicator element. |
|
number | returns the index of the indicator. |
|
string | returns the name of the event |
Example
ondrawindicators(sender){
//Do something
}
<ej-circulargauge id="events" (drawIndicators)="ondrawindicators($event)">
</ej-circulargauge>
drawLabels
Triggers while the labels are being drawn on the gauge.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | returns the object of the gauge. | ||||||||||||
|
boolean | returns the cancel option value | ||||||||||||
|
Object | returns the context element | ||||||||||||
|
Object | returns the startX and startY of the labels | ||||||||||||
|
Object | returns the gauge model | ||||||||||||
|
Object | returns the options of the scale element. | ||||||||||||
|
number | returns the scaleIndex to which the label belongs. | ||||||||||||
|
string | returns the label style | ||||||||||||
|
Object | returns the label object of the gauge.
|
||||||||||||
|
number | returns the value of the label. | ||||||||||||
|
string | returns the name of the event |
Example
ondrawlabels(sender){
//Do something
}
<ej-circulargauge id="events" (drawLabels)="ondrawlabels($event)">
</ej-circulargauge>
drawPointerCap
Triggers while the pointer cap is being drawn on the gauge.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the gauge. |
|
boolean | returns the cancel option value |
|
Object | returns the context element |
|
Object | returns the options of the scale element. |
|
Object | returns the startX and startY of the pointer cap. |
|
Object | returns the gauge model |
|
string | returns the pointer cap style |
|
string | returns the name of the event |
Example
ondrawpointercap(sender){
//Do something
}
<ej-circulargauge id="events" (drawPointerCap)="ondrawpointercap($event)">
</ej-circulargauge>
drawPointers
Triggers while the pointers are being drawn on the gauge.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | returns the object of the gauge. | |||||||||||||||
|
boolean | returns the cancel option value | |||||||||||||||
|
Object | returns the context element | |||||||||||||||
|
Object | returns the startX and startY of the pointer | |||||||||||||||
|
Object | returns the gauge model | |||||||||||||||
|
Object | returns the options of the scale element. | |||||||||||||||
|
number | returns the scaleIndex to which the pointer belongs. | |||||||||||||||
|
string | returns the pointer style | |||||||||||||||
|
Object | returns the pointer object of the gauge.
|
|||||||||||||||
|
string | returns the name of the event |
Example
ondrawpointers(sender){
//Do something
}
<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 |
---|---|---|
|
Object | returns the object of the gauge. |
|
boolean | returns the cancel option value |
|
Object | returns the context element |
|
Object | returns the startX and startY of the range |
|
Object | returns the gauge model |
|
Object | returns the options of the scale element. |
|
number | returns the scaleIndex to which the range belongs. |
|
string | returns the range style |
|
Object | returns the current range element. |
|
number | returns the index of the range. |
|
string | returns the name of the event |
Example
ondrawrange(sender){
//Do something
}
<ej-circulargauge id="events" (drawRange)="ondrawrange($event)">
</ej-circulargauge>
drawTicks
Triggers while the ticks are being drawn on the gauge.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | returns the object of the gauge. | ||||||||||||
|
boolean | returns the cancel option value | ||||||||||||
|
Object | returns the context element | ||||||||||||
|
Object | returns the startX and startY of the ticks | ||||||||||||
|
Object | returns the gauge model | ||||||||||||
|
Object | returns the options of the scale element. | ||||||||||||
|
number | returns the scaleIndex to which the tick belongs. | ||||||||||||
|
string | returns the ticks style | ||||||||||||
|
Object | returns the tick object of the gauge.
|
||||||||||||
|
number | returns the label value of the tick. | ||||||||||||
|
string | returns the name of the event |
Example
ondrawticks(sender){
//Do something
}
<ej-circulargauge id="events" (drawTicks)="ondrawticks($event)">
</ej-circulargauge>
load
Triggers while the gauge start to Load.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the gauge. |
|
boolean | returns the cancel option value |
|
Object | returns the gauge model |
|
Object | returns the entire scale element. |
|
Object | returns the context element |
|
string | returns the name of the event |
Example
onload(sender){
//Do something
}
<ej-circulargauge id="events" (load)="onload($event)">
</ej-circulargauge>
mouseClick
Triggers when the left mouse button is clicked.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | returns the object of the gauge. | |||||||||||||||
|
boolean | returns the cancel option value | |||||||||||||||
|
Object | returns the gauge model | |||||||||||||||
|
Object | returns the name of the event | |||||||||||||||
|
Object | returns the scale element. | |||||||||||||||
|
number | returns the scaleIndex to which the pointer belongs. | |||||||||||||||
|
Object | returns the context element | |||||||||||||||
|
Object | returns the pointer object
|
|||||||||||||||
|
string | returns the pointer style | |||||||||||||||
|
Object | returns the startX and startY of the pointer. |
Example
onmouseclick(sender){
//Do something
}
<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 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | returns the object of the gauge. | |||||||||||||||
|
boolean | returns the cancel option value | |||||||||||||||
|
Object | returns the gauge model | |||||||||||||||
|
Object | returns the name of the event | |||||||||||||||
|
Object | returns the scale element. | |||||||||||||||
|
number | returns the scaleIndex to which the pointer belongs. | |||||||||||||||
|
Object | returns the context element | |||||||||||||||
|
Object | returns the pointer object
|
|||||||||||||||
|
string | returns the pointer style | |||||||||||||||
|
Object | returns the startX and startY of the pointer. |
Example
onmouseclickmove(sender){
//Do something
}
<ej-circulargauge id="events" (mouseClickMove)="onmouseclickmove($event)">
</ej-circulargauge>
mouseClickUp
Triggers when the mouse click is released.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Object | returns the object of the gauge. | |||||||||||||||
|
boolean | returns the cancel option value | |||||||||||||||
|
Object | returns the gauge model | |||||||||||||||
|
Object | returns the name of the event | |||||||||||||||
|
Object | returns the scale element. | |||||||||||||||
|
number | returns the scaleIndex to which the pointer belongs. | |||||||||||||||
|
Object | returns the context element | |||||||||||||||
|
Object | returns the pointer object
|
|||||||||||||||
|
string | returns the pointer style | |||||||||||||||
|
Object | returns the startX and startY of the pointer. |
Example
onmouseclickup(sender){
//Do something
}
<ej-circulargauge id="events" (mouseClickUp)="onmouseclickup($event)">
</ej-circulargauge>
renderComplete
Triggers when the rendering of the gauge is completed.
Name | Type | Description |
---|---|---|
|
Object | returns the object of the gauge. |
|
boolean | returns the cancel option value |
|
Object | returns the context element |
|
Object | returns the entire scale element. |
|
Object | returns the gauge model |
|
string | returns the name of the event |
Example
onrendercomplete(sender){
//Do something
}
<ej-circulargauge id="events" (renderComplete)="onrendercomplete($event)">
</ej-circulargauge>