Migration from Essential JS 1 in Angular Circular Gauge component
12 May 2022 / 11 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>
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>
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>
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>
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>
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>
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>
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
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS | **Property:** *locale*<br/><br/>
;|
|Border| Not Applicable| **Property:** *border*<br/><br/>
<ejs-circulargauge id=“gauge” [border] =“border”><br></br>
public border: Object= {color: “red” , width: 2}|
|Center of X| Not Applicable| **Property:** *centerX*<br/><br/>
|
|Center of Y| Not Applicable| **Property:** *centerY*<br/><br/>
|
|Theme| **Property:** *theme*<br/><br/>
| **Property:** *theme*<br/><br/>
|
|Margin| Not Applicable| **Property:** *margin*<br/><br/>
<ejs-circulargauge id=“gauge” [margin] =“margin”><br></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
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS <ej-circulargauge id=“gauge” (mouseClick)=“onMouseClick($event)“><br><br/>
onMouseClick(sender){}| **Event:** *gaugeMouseDown*<br/><br/>
<ejs-circulargauge id=“gauge” (gaugeMouseDown)=’ gaugeMouseDown($event)‘><br><br/>
public gaugeMouseDown(args: IMouseEventArgs): void {}|
|Mousemove Event| **Event:** *mouseClickMove*<br/><br/>
<ej-circulargauge id=“gauge” (mouseClickMove)=“onMouseClickMove($event)“><br><br/>
onMouseClickMove(sender){}| **Event:** *gaugeMouseLeave*<br/><br/>
<ejs-circulargauge id=“gauge” (gaugeMouseLeave)=’ gaugeMouseLeave($event)‘><br><br/>
public gaugeMouseLeave(args: IMouseEventArgs): void {}`|
|Mouseup Event| Event: mouseClickUp
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS <ej-circulargauge id=“gauge” (mouseClickUp)=“onMouseClickUp($event)“><br><br/>
onMouseClickUp(sender){}| **Event:** *gaugeMouseUp*<br/><br/>
<ejs-circulargauge id=“gauge” (gaugeMouseUp)=‘gaugeMouseUp($event)‘><br><br/>
public gaugeMouseUp(args: IMouseEventArgs): void {}|
|Pointerdrag Move Event| **Event:** *drawPointers*<br/><br/>
<ej-circulargauge id=“gauge” (drawPointers)=“ondrawPointers($event)“><br><br/>
onDrawPointers(sender){}| **Event:** *dragMove*<br/><br/>
<ejs-circulargauge id=“gauge” ( dragMove)=’ dragMove($event)‘><br><br/>
public dragMove(args: IMouseEventArgs): void {}`|
|Draw Range Event| Event: drawRange
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS <ej-circulargauge id=“gauge” (drawRange)=“onDrawRange($event)“><br><br/>
onDrawRange(sender){}`| Not Applicable|
|Draw Ticks Event| Event: drawTicks
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS <ej-circulargauge id=“gauge” ( drawTicks)=“onDrawTicks($event)“><br><br/>
onDrawTicks(sender){}| Not Applicable|
|Legend Render Event| **Event:** *legendItemRender*<br/><br/>
<ej-circulargauge id=“gauge” ( legendItemRender)=“onLegendItemRender($event)“><br><br/>
onLegendItemRender(sender){}| Not Applicable|
|Animation Complete Event| Not Applicable| **Event:** *animationComplete*<br/><br/>
<ejs-circulargauge id=“gauge” (animationComplete)=‘animationComplete($event)‘><br><br/>
public animationComplete(args: IAnimationCompleteEventArgs): void {}`|
|Right Click Event| Event: rightClick
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS <ej-circulargauge id=“gauge” (rightClick)=“onRightClick($event)“><br><br/>
onRightClick(sender){}`| Not Applicable|
|Double Click Event| Event: doubleClick
Migration from Essential JS 1
This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS <ej-circulargauge id=“gauge” (doubleClick)=“onDoubleClick($event)“><br><br/>
onDoubleClick(sender){}`| Not Applicable|