Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in Angular Circular Gauge component

06 Oct 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|

Previous
Next