Contents
- Circular gauge dimensions
- Axis Line
- Ticks
- Labels
- Ranges
- Needle Pointer
- Marker Pointer
- Rangebar Pointer
- Annotations
- Appearance
- Events
Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in Angular Circular gauge component
4 Apr 202322 minutes to read
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
Circular gauge dimensions
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Height |
Property: height<ej-circulargauge id="gauge" height="150"> </ej-circulargauge>
|
Property: height<ejs-circulargauge id="gauge" height="150px"></ejs-circulargauge>
|
| Width |
Property: width<ejs-circulargauge id="gauge" width="200"></ej-circulargauge>
|
Property: width<ej-circulargauge id="gauge" width="200px"></ejs-circulargauge>
|
| Height(In Percentage) | Not Applicable |
Property: height<ejs-circulargauge id="gauge" height='70%'> </ejs-circulargauge>
|
| Width(In Percentage) | Not Applicable |
Property: width<ejs-circulargauge id="gauge" width='100%'> </ejs-circulargauge>
|
Axis Line
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Axisline Width |
Property: scales.size<ej-circulargauge id="gauge"><e-scales><e-scale showScaleBar= "true", size= "6" ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.lineStyle.width<ejs-circulargauge id="gauge"><e-axes><e-axis ></e-axis></e-axes></ejs-circulargauge>
|
| Axisline Color |
Property: scales.size<ej-circulargauge id="gauge"><e-scales><e-scale showScaleBar= "true" backgroundColor= "red" ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.lineStyle.width<ejs-circulargauge id="gauge"><e-axes><e-axis ></e-axis></e-axes></ejs-circulargauge>
|
| Axisline BackgroundColor | Not Applicable |
Property: axes.background<ejs-circulargauge id="gauge"><e-axes><e-axis background='red'></e-axis></e-axes></ejs-circulargauge>
|
| Axisline Direction |
Property: scales.direction<ej-circulargauge id="gauge"><e-scales><e-scale direction= "counterclockwise"></e-scale></e-scales></ej-circulargauge>
|
Property: axes.direction<ejs-circulargauge id="gauge"><e-axes><e-axis direction='AntiClockWise'></e-axis></e-axes></ejs-circulargauge>
|
| Axisline Radius |
Property: scales.radius<ej-circulargauge id="gauge"><e-scales><e-scale showScaleBar= "true" radius= "150" ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.radius<ejs-circulargauge id="gauge"><e-axes><e-axis radius='150'></e-axis></e-axes></ejs-circulargauge>
|
| Axisline Startangle |
Property: scales.startAngle<ej-circulargauge id="gauge"><e-scales><e-scale startAngle=80 ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.startAngle<ejs-circulargauge id="gauge"><e-axes><e-axis startAngle=200></e-axis></e-axes></ejs-circulargauge>
|
| Axisline Endangle |
Property: scales.sweepAngle<ej-circulargauge id="gauge"><e-scales><e-scale sweepAngle= 250 ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.endAngle<ejs-circulargauge id="gauge"><e-axes><e-axis endAngle= 150 ></e-axis></e-axes></ejs-circulargauge>
|
| Minimum Axisvalue |
Property: scales.minimum<ej-circulargauge id="gauge"><e-scales><e-scale minimum= 20 ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.minimum<ejs-circulargauge id="gauge"><e-axes><e-axis minimum= 20></e-axis></e-axes></ejs-circulargauge>
|
| Maximum Axisvalue |
Property: scales.maximum<ej-circulargauge id="gauge"><e-scales><e-scale maximum= 200 ></e-scale></e-scales></ej-circulargauge>
|
Property: axes.maximum<ejs-circulargauge id="gauge"><e-axes><e-axis maximum= 200></e-axis></e-axes></ejs-circulargauge>
|
Ticks
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Type of Ticks |
Property: scales.ticks.type<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="major"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.majorTicks.height<ejs-circulargauge id="gauge"><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-circulargauge></br> public majorTicks: Object= { }
|
| Height of Major Ticks |
Property: scales.ticks.height<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="major" height= "8"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.majorTicks.height<ejs-circulargauge id="gauge"><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-circulargauge>public majorTicks: Object= { height: 8 }
|
| Width of Major Ticks |
Property: scales.ticks.width<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="major" width= "5"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.majorTicks.width<ejs-circulargauge id="gauge"><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-circulargauge>public majorTicks: Object= { width: 5 }
|
| Color of Major Ticks |
Property: scales.ticks.color<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="major" color='blue'></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.majorTicks.color<ejs-circulargauge id="gauge"><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-circulargauge>public majorTicks: Object= { color:'blue' }
|
| Offset for Major Ticks |
Property: scales.ticks.distanceFromScale<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="major" [distanceFromScale]="10"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.majorTicks.offset<ejs-circulargauge id="gauge"><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-circulargauge>public majorTicks: Object= { offset : 1 }
|
| Interval of Major Ticks |
Property: scales.majorIntervalValue<ej-circulargauge id="gauge"><e-scales><e-scale majorIntervalValue= "15"></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.majorTicks.interval<ejs-circulargauge id="gauge"><e-axes><e-axis [majorTicks]='majorTicks'></e-axis></e-axes> </ejs-circulargauge>public majorTicks: Object= { interval : 15 }
|
| Angle of Major Ticks |
Property: scales.ticks.angle<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="major" angle= "30"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Not Applicable |
| Height of Minor Ticks |
Property: scales.ticks.height<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="minor" height= "8"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.minorTicks.height<ejs-circulargauge id="gauge"><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-circulargauge>public minorTicks: Object= { height: 8 }
|
| Width of Minor Ticks |
Property: scales.ticks.width<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="minor" width= "5"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.minorTicks.width<ejs-circulargauge id="gauge"><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-circulargauge>public minorTicks: Object= { width: 5 }
|
| Color of Minor Ticks |
Property: scales.ticks.color<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="minor" color='blue'></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.minorTicks.color<ejs-circulargauge id="gauge"><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-circulargauge>public minorTicks: Object= { color:'blue' }
|
| Offset for Major Ticks |
Property: scales.ticks.distanceFromScale<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="minor" [distanceFromScale]="10"></e-tick></e-ticks></e-scale></e-scales></ej-circulargauge>
|
Property: axes.minorTicks.offset<ejs-circulargauge id="gauge"><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-circulargauge>public minorTicks: Object= { offset : 1 }
|
| Interval of Minor Ticks |
Property: scales.majorIntervalValue<ej-circulargauge id="gauge"><e-scales><e-scale minorIntervalValue= "15"></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.minorTicks.interval<ejs-circulargauge id="gauge"><e-axes><e-axis [minorTicks]='minorTicks'></e-axis></e-axes> </ejs-circulargauge>public minorTicks: Object= { interval : 15 }
|
| Angle of Minor Ticks |
Property: scales.ticks.angle<ej-circulargauge id="gauge"><e-scales><e-scale><e-ticks><e-tick type="minor" angle= "30"></e-tick></e-ticks></e-scale></e-scales> </ej-circulargauge>
|
Not Applicable |
Labels
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Autoangle |
Property: scales.labels.autoAngle<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ showLabels: true,autoAngle: true}]
|
Property: axes.labelStyle.autoAngle<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { autoAngle: true }
|
| Angle |
Property: scales.labels.angle<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ showLabels: true,angle: 10}]
|
Not Applicable |
| Offset |
Property: scales.labels.distanceFromScale<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ showLabels: true,distanceFromScale: { x: 0, y: 60 } }]
|
Property: axes.labelStyle.offset<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { offset : 3 }
|
| Format |
Property: scales.labels.unitText<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ unitText: "F"}]
|
Property: axes.labelStyle.format<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { format: 'c' }
|
| Unit Text Placement |
Property: scales.labels.unitTextPlacement<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ showLabels: true,unitTextPlacement: "front"}]
|
Not Applicable |
| Label Range Color | Not Applicable |
Property: axes.labelStyle.useRangeColor<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { useRangeColor: true }
|
| Opacity |
Property: scales.labels.opacity<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{opacity: 0.5}]
|
Property: axes.labelStyle.font.opacity<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { font: { opacity: 5 } }
|
| Label Text Color |
Property: scales.labels.textColor<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ textColor: "Red",}]
|
Property: axes.labelStyle.font.color<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { font:{ color: 'red' } }
|
| Label Font Family |
Property: scales.labels.font.fontFamily<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{font:{ fontFamily: 'Arial' }}]
|
Property: axes.labelStyle.font.fontFamily<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { font:{ fontFamily: 'Arial' } }
|
| Label Font Style |
Property: scales.labels.font.fontStyle<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{ font: { fontStyle: 'Bold' }}]
|
Property: axes.labelStyle.font.fontStyle<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { font: { fontStyle: 'Bold' } }
|
| Label Size |
Property: scales.labels.font.size<ej-circulargauge id="gauge"><e-scales><e-scale [labels]="labels"></e-scale></e-scales> </ej-circulargauge>publiclabels:Object[] = [{font:{ size: "15px" } }]
|
Property: axes.labelStyle.font.size<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { font:{ size: "15px" } }
|
| Label Font Weight | Not Applicable |
Property: axes.labelStyle.font.fontWeight<ejs-circulargauge id="gauge"><e-axes><e-axis [labelStyle]= "labelStyle"></e-axis></e-axes> </ejs-circulargauge>public labelStyle: Object= { font:{ fontWeight: '4' } }
|
Ranges
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Start Value |
Property: scales.ranges.startValue<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" startValue="20"></e-range></e-ranges></e-scale> </e-scales> </ej-circulargauge>
|
Property: axes.ranges.start<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range start= "20" ></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| End Value |
Property: scales.ranges.endValue<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" endValue= "20" ></e-range></e-ranges></e-scale> </e-scales> </ej-circulargauge>
|
Property: axes.ranges.end<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range end= "20"></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Start Width |
Property: scales.ranges.startWidth<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" startWidth= "10" ></<e-range></e-ranges> </e-scale></e-scales> </ej-circulargauge>
|
Property: axes.ranges.startWidth<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range startWidth= "10"></<e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| End Width |
Property: scales.ranges.endWidth<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" endWidth= "15"></e-range></e-ranges></e-scale> </e-scales> </ej-circulargauge>
|
Property: axes.ranges.endWidth<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range endWidth= "15"></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Color |
Property: scales.ranges.backgroundColor<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" backgroundColor= "red" ></e-range></e-ranges></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.ranges.color<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range color= "red"></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Offset |
Property: scales.ranges.distanceFromScale<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" distanceFromScale= "10" ></e-range></e-ranges></e-scale></e-scales> </ej-circulargauge>
|
Property: axes.ranges.offset<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range offset= "10" ></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Range Position |
Property: scales.ranges.placement<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" placement="Near"></e-range></e-ranges></e-scale> </e-scales> </ej-circulargauge>
|
Property: axes.ranges.position<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range position= 'Inside' ></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Opacity |
Property: scales.ranges.opacity<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" opacity= "0.3"></e-range></e-ranges> </e-scale> </e-scales> </ej-circulargauge>
|
Not Applicable |
| Radius | Not Applicable |
Property: axes.ranges.radius<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range radius= '80' ></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Rounded Corner Radius | Not Applicable |
Property: axes.ranges.roundedCornerRadius<ejs-circulargauge id="gauge"><e-axes><e-axis ><e-ranges><e-range roundedCornerRadius= 10 ></e-range></e-ranges></e-axis></e-axes> </ejs-circulargauge>
|
| Gradients |
Property: scales.ranges.gradients<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" [gradients] =" gradients"> </<e-range></e-ranges> </e-scale> </e-scales> </ej-circulargauge>public gradients:Object= { colorInfo: [{ colorStop : 0, color:"#FFFFFF" }] }
|
Not Applicable |
| Border |
Property: scales.ranges.border<ej-circulargauge id="gauge"><e-scales><e-scale><e-ranges><e-range showRanges="true" [ border]=" border"> </<e-range></e-ranges> </e-scale> </e-scales> </ej-circulargauge>public border:Object= { color: "blue", width: 2 }
|
Not Applicable |
Needle Pointer
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Needle Pointer |
Property: scales.pointers.type<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'needle'><e-pointer></e-pointers></e-scale> </e-scales></ej-circulargauge>
|
Property: axes.pointers.type<ejs-circulargauge id="gauge" type= 'needle' value= 20 ><e-axes> <e-axis><e-pointers><e-pointer ></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Needle Pointer Color |
Property: scales.pointers.backgroundColor<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type='needle' backgroundColor='red'><e-pointer></e-pointers></e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.color<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'needle' color: 'red'></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Animation |
Property: enableAnimation<ej-circulargauge id="gauge" enableAnimation="true" ></ej-circulargauge>
|
Property: axes.pointers.animation<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer animation= "true" duration= 1000 ></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Pointer Width |
Property: scales.pointers.width<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer width= 5 ><e-pointer></e-pointers></e-scale> </e-scales> </ej-circulargauge>
|
Property: axes.pointers.pointerWidth<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer pointerWidth=5></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Pointer Radius |
Property: scales.pointers.distanceFromScale<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer distanceFromScale=10><e-pointer></e-pointers></e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.radius<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer radius: 80></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Opacity |
Property: scales.pointers.opacity<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer opacity=0.5><e-pointer></e-pointers></e-scale></e-scales> </ej-circulargauge>
|
Not Applicable |
| Needle Type |
Property: scales.pointers.needleType<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'needle'needleType="triangle"><e-pointer> </e-pointers></e-scale></e-scales></ej-circulargauge>
|
Not Applicable |
| Back Needle Length |
Property: scales.pointers.backNeedleLength<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer showBackNeedle= "true" backNeedleLength= 3 ><e-pointer></e-pointers></e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.needleTail.length<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer [needleTail] ="needleTail"></e-pointer></e-pointers> </e-axis></e-axes></ejs-circulargauge>public needleTail: Object ={ length: 5 }
|
Marker Pointer
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Marker Pointer |
Property: scales.pointers.type<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type='marker'><e-pointer></e-pointers></e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.type<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'marker' value= 20></e-pointer></e-pointers> </e-axis></e-axes></ejs-circulargauge>
|
| Marker Type |
Property: scales.pointers.markerType<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'marker' markerType= "rectangle"><e-pointer> </e-pointers></e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.markerShape<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'marker' markerShape= 'Diamond' ></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Marker Width |
Property: scales.pointers.width<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'marker' width= 20><e-pointer></e-pointers> </e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.markerWidth<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'marker' markerWidth= 20 ></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Marker Height |
Property: scales.pointers.length<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'marker' length= 25><e-pointer></e-pointers> </e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.markerHeight<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'marker' markerHeight= 25> </e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Marker Image |
Property: scales.pointers.imageUrl<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'marker' imageUrl= "football.png"><e-pointer> </e-pointers></e-scale></e-scales></ej-circulargauge>
|
Property: axes.pointers.imageUrl<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'marker' imageUrl= "football.png"></e-pointer></e-pointers></e-axis></e-axes></ejs-circulargauge>
|
| Border Customization |
Property: scales.pointers.border<ej-circulargauge id="gauge"><e-scales><e-scale><e-pointers><e-pointer type= 'marker' [border]="border"><e-pointer> </e-pointers></e-scale></e-scales></ej-circulargauge>public border: Object= { color: 'red', width: 2 }
|
Property: axes.pointers.border<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'marker' [border]="border"></e-pointer> </e-pointers></e-axis></e-axes></ejs-circulargauge>public border: Object= { color: 'red', width: 2 }
|
Rangebar Pointer
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Rangebar | Not Applicable |
Property: axes.pointers.type<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type: 'RangeBar'></e-pointer></e-pointers> </e-axis></e-axes></ejs-circulargauge>
|
| Rounded Corner Radius | Not Applicable |
Property: axes.pointers.roundedCornerRadius<ejs-circulargauge id="gauge"><e-axes><e-axis><e-pointers><e-pointer type= 'RangeBar' roundedCornerRadius= 10 ></e-pointer></e-pointers> </e-axis></e-axes></ejs-circulargauge>
|
Annotations
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Content |
Property: scales.customLabels.value<ej-circulargauge id="gauge"><e-scales><e-scale [customLabels]="customLabels"></e-scale></e-scales></ej-circulargauge></br> public customLabels:Object ={value: 'Lineargauge' }
|
Property: axes.annotations.content<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation content='Annotation'></e-annotation> </e-annotations> </e-axis></e-axes> </ejs-circulargauge>
|
| Angle |
Property: scales.customLabels.textAngle<ej-circulargauge id="gauge"><e-scales><e-scale [customLabels]="customLabels"></e-scale></e-scales></ej-circulargauge></br> public customLabels:Object ={textAngle: 90}
|
Property: axes.annotations.angle<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation angle= 90 ></e-annotation> </e-annotations> </e-axis></e-axes> </ejs-circulargauge>
|
| Font Family |
Property: scales.customLabels.font.fontFamily<ej-circulargauge id="gauge"><e-scales><e-scale [customLabels]="customLabels"></e-scale></e-scales></ej-circulargauge></br> public customLabels:Object ={font: { fontFamily: "Arial" }}
|
Property: axes.annotations.textStyle.fontFamily<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation [ textStyle] ="textStyle"></e-annotation> </e-annotations></e-axis></e-axes> </ejs-circulargauge>public textStyle: Object= {fontFamily: "Arial" }
|
| Font Color |
Property: scales.customLabels.color<ej-circulargauge id="gauge"><e-scales><e-scale [customLabels]="customLabels"></e-scale> </e-scales></ej-circulargauge></br> public customLabels:Object ={color : "red"}
|
Property: axes.annotations.textStyle.color<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation [ textStyle] ="textStyle"></e-annotation> </e-annotations></e-axis></e-axes> </ejs-circulargauge>public textStyle: Object= {color: "red" }
|
| Auto Angle | Not Applicable |
Property: axes.annotations.autoAngle<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation autoAngle = true></e-annotation></e-annotations> </e-axis> </e-axes> </ejs-circulargauge>
|
| Radius | Not Applicable |
Property: axes.annotations.radius<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation radius = "10%"></e-annotation></e-annotations></e-axis> </e-axes> </ejs-circulargauge>
|
| Annotation Position |
Property: scales.customLabels.position<ej-circulargauge id="gauge"><e-scales><e-scale [customLabels]="customLabels"></e-scale></e-scales></ej-circulargauge></br> public customLabels:Object ={position : { x: 10, y: 10 }}
|
Not Applicable |
| Annotation Position Type |
Property: scales.customLabels.positionType<ej-circulargauge id="gauge"><e-scales><e-scale [customLabels]="customLabels"></e-scale></e-scales></ej-circulargauge></br> public customLabels:Object ={positionType : "outer"}
|
Not Applicable |
| ZIndex | Not Applicable |
Property: axes.annotations.zIndex<ejs-circulargauge id="gauge"><e-axes><e-axis><e-annotations><e-annotation zIndex = '1' ></e-annotation></e-annotations> </e-axis></e-axes> </ejs-circulargauge>
|
Appearance
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Title | Not Applicable |
Property: title<ejs-circulargauge id="gauge" title= 'Circular Gauge' ></ejs-circulargauge>
|
| Background Color |
Property: backgroundColor<ej-circulargauge id="gauge" backgroundColor= "red"></ej-circulargauge>
|
Property: background<ejs-circulargauge id="gauge" background="red" ></ejs-circulargauge>
|
| Localization |
Property: locale $ <ej-circulargauge id="gauge" locale = "en-US" ></ej-circulargauge>
|
Property: locale<ejs-circulargauge id="gauge" locale ="en-US" ></ejs-circulargauge>; |
| Border | Not Applicable |
Property: border<ejs-circulargauge id="gauge" [border] ="border"></ejs-circulargauge></br> public border: Object= {color: "red" , width: 2}
|
| Center of X | Not Applicable |
Property: centerX<ejs-circulargauge id="gauge" centerX ="120px"></ejs-circulargauge>
|
| Center of Y | Not Applicable |
Property: centerY<ejs-circulargauge id="gauge" centerY = "150px" ></ejs-circulargauge>
|
| Theme |
Property: theme<ej-circulargauge id="gauge" theme = "flatlight" ></ej-circulargauge>
|
Property: theme<ejs-circulargauge id="gauge" theme = "Material" ></ejs-circulargauge>
|
| Margin | Not Applicable |
Property: margin<ejs-circulargauge id="gauge" [margin] ="margin"></ejs-circulargauge></br> public margin: Object= {left: 40, right: 40, top: 40, bottom: 40}
|
Events
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Annotation Event |
Event: drawCustomLabel<ej-circulargauge id="gauge" (drawCustomLabel)="onDrawCustomLabel($event)"></ej-circulargauge>onDrawCustomLabel(sender){}
|
Event: annotationRender<ejs-circulargauge id="gauge" (annotationRender)='annotationRender($event)'></ejs-circulargauge>public annotationRender(args: IAnnotationRenderEventArgs): void {}
|
| Label Event |
Event: drawLabels<ej-circulargauge id="gauge" (drawLabels)="DrawLabels($event)"></ej-circulargauge>DrawLabels(sender){}
|
Event: axisLabelRender<ejs-circulargauge id="gauge" ( axisLabelRender)=' axisLabelRender($event)'></ejs-circulargauge>public axisLabelRender(args: IAxisLabelRenderEventArgs): void {}
|
| Load Event |
Event: load<ej-circulargauge id="gauge" (load)="onLoad($event)"></ej-circulargauge>onLoad(sender){}
|
Event: load<ejs-circulargauge id="gauge" (load)='load($event)'></ejs-circulargauge>public load(args: ILoadedEventArgs): void {}
|
| Loaded Event |
Event: loaded<ej-circulargauge id="gauge" (loaded)="onLoaded($event)"></ej-circulargauge>onLoaded(sender){}
|
Event: loaded<ejs-circulargauge id="gauge" (loaded)='loaded($event)'></ejs-circulargauge>public loaded(args: ILoadedEventArgs): void {}
|
| Tooltip Rendered Event | Not Applicable |
Event: tooltipRender<ejs-circulargauge id="gauge" (tooltipRender)='tooltipRender($event)'></ejs-circulargauge>public tooltipRender(args: ITooltipRenderEventArgs): void {}
|
| Resized Rendered Event | Not Applicable |
Event: resized<ejs-circulargauge id="gauge" (tooltipRender)='tooltipRender($event)'></ejs-circulargauge>public tooltipRender(args: IResizeEventArgs): void {}
|
| Animation Event | Not Applicable |
Event: animationComplete<ejs-circulargauge id="gauge" (animationComplete)='animationComplete($event)'></ejs-circulargauge>public animationComplete(args: IAnimationCompleteEventArgs): void {}
|
| Mousedown Event |
Event: mouseClick $ <ej-circulargauge id="gauge" (mouseClick)="onMouseClick($event)"></ej-circulargauge>onMouseClick(sender){}
|
Event: gaugeMouseDown<ejs-circulargauge id="gauge" (gaugeMouseDown)=' gaugeMouseDown($event)'></ejs-circulargauge>public gaugeMouseDown(args: IMouseEventArgs): void {}
|
| Mousemove Event |
Event: mouseClickMove<ej-circulargauge id="gauge" (mouseClickMove)="onMouseClickMove($event)"></ej-circulargauge>onMouseClickMove(sender){}
|
Event: gaugeMouseLeave<ejs-circulargauge id="gauge" (gaugeMouseLeave)=' gaugeMouseLeave($event)'></ejs-circulargauge>public gaugeMouseLeave(args: IMouseEventArgs): void {}
|
| Mouseup Event |
Event: mouseClickUp $ <ej-circulargauge id="gauge" (mouseClickUp)="onMouseClickUp($event)"></ej-circulargauge>onMouseClickUp(sender){}
|
Event: gaugeMouseUp<ejs-circulargauge id="gauge" (gaugeMouseUp)='gaugeMouseUp($event)'></ejs-circulargauge>public gaugeMouseUp(args: IMouseEventArgs): void {}
|
| Pointerdrag Move Event |
Event: drawPointers<ej-circulargauge id="gauge" (drawPointers)="ondrawPointers($event)"></ej-circulargauge>onDrawPointers(sender){}
|
Event: dragMove<ejs-circulargauge id="gauge" ( dragMove)=' dragMove($event)'></ejs-circulargauge>public dragMove(args: IMouseEventArgs): void {}
|
| Draw Range Event |
Event: drawRange $ <ej-circulargauge id="gauge" (drawRange)="onDrawRange($event)"></ej-circulargauge>onDrawRange(sender){}
|
Not Applicable |
| Draw Ticks Event |
Event: drawTicks $ <ej-circulargauge id="gauge" ( drawTicks)="onDrawTicks($event)"></ej-circulargauge>onDrawTicks(sender){}
|
Not Applicable |
| Legend Render Event |
Event: legendItemRender<ej-circulargauge id="gauge" ( legendItemRender)="onLegendItemRender($event)"></ej-circulargauge>onLegendItemRender(sender){}
|
Not Applicable |
| Animation Complete Event | Not Applicable |
Event: animationComplete<ejs-circulargauge id="gauge" (animationComplete)='animationComplete($event)'></ejs-circulargauge>public animationComplete(args: IAnimationCompleteEventArgs): void {}
|
| Right Click Event |
Event: rightClick $ <ej-circulargauge id="gauge" (rightClick)="onRightClick($event)"></ej-circulargauge>onRightClick(sender){}
|
Not Applicable |
| Double Click Event |
Event: doubleClick $ <ej-circulargauge id="gauge" (doubleClick)="onDoubleClick($event)"></ej-circulargauge>onDoubleClick(sender){}
|
Not Applicable |