Annotations in Circular Gauge Control
19 Jun 202424 minutes to read
Annotations are used to mark a specific area of interest in the gauge with texts, shapes or images.
Content
You can place any custom element on the axis area by assigning the id of the element to content property of annotation object.
@using Syncfusion.EJ2;
<div id="container">
<ejs-circulargauge id="circular">
<e-circulargauge-axes>
<e-circulargauge-axis>
<e-circulargauge-annotations>
<e-circulargauge-annotation content="#annotation-template" zIndex="1"></e-circulargauge-annotation>
</e-circulargauge-annotations>
<e-circulargauge-pointers>
<e-circulargauge-pointer value="50"></e-circulargauge-pointer>
</e-circulargauge-pointers>
</e-circulargauge-axis>
</e-circulargauge-axes>
</ejs-circulargauge>
</div>
<script id='annotation-template' type="text/x-template">
<div id='templateWrap'>
<div class='des'>
<span>Pointer Value : 50</span>
</div>
</div>
</script>Position
Annotation can be placed around the axis by using radius and angle property. For example, if the angle is 90 degree and the radius is 110%, then the annotation, will be placed at the right side of the axis.
Radius of the annotation takes value either in pixel or percentage. By setting value in percentage, annotation gets its position with respect to its axis radius.
@using Syncfusion.EJ2;
<div id="container">
<ejs-circulargauge id="circular">
<e-circulargauge-axes>
<e-circulargauge-axis>
<e-circulargauge-annotations>
<e-circulargauge-annotation content="#annotation-template" angle="90" radius="150%" zIndex="1"></e-circulargauge-annotation>
</e-circulargauge-annotations>
<e-circulargauge-pointers>
<e-circulargauge-pointer value="50"></e-circulargauge-pointer>
</e-circulargauge-pointers>
</e-circulargauge-axis>
</e-circulargauge-axes>
</ejs-circulargauge>
</div>
<script id='annotation-template' type="text/x-template">
<div id='templateWrap'>
<div class='des'>
<span>Pointer Value : 50</span>
</div>
</div>
</script>Sub Gauge
As the annotation allows to place any custom element, it can initialize a gauge to the element and can be used to place that in another gauge.
@using Syncfusion.EJ2;
<ejs-circulargauge id="circular">
<e-circulargauge-axes>
<e-circulargauge-axis minimum="0" maximum="12" startAngle="0" endAngle="360">
<e-axis-labelstyle hiddenLabel="First"></e-axis-labelstyle>
<e-axis-linestyle width="0"></e-axis-linestyle>
<e-circulargauge-ranges>
<e-circulargauge-range start="0" end="3" color="rgba(29,29,29,0.7)"></e-circulargauge-range>
<e-circulargauge-range start="3" end="12" color="rgba(168,145,102,0.1)"></e-circulargauge-range>
</e-circulargauge-ranges>
<e-circulargauge-annotations>
<e-circulargauge-annotation content="<div id='subGauge' style='width:90px;height:90px;'></div>" angle="270" radius="40%" zIndex="1"></e-circulargauge-annotation>
<e-circulargauge-annotation content="<div id='time'><span>6:30 PM</span></div>" angle="90" radius="40%" zIndex="1"></e-circulargauge-annotation>
</e-circulargauge-annotations>
<e-circulargauge-pointers>
<e-circulargauge-pointer value="6.5" radius="40%" color="rgb(29,29,29)" pointerWidth="5">
<e-pointer-cap radius="0" color="rgb(29,29,29)">
<e-pointers-cap-border color="red" width="0.2"></e-pointers-cap-border>
</e-pointer-cap>
<e-pointer-border color="rgb(29,29,29)" width="1"></e-pointer-border>
<e-pointer-needletail length="0%"></e-pointer-needletail>
<e-pointer-animation enable="false"></e-pointer-animation>
</e-circulargauge-pointer>
<e-circulargauge-pointer value="6" radius="60%" color="rgb(29,29,29)" pointerWidth="5">
<e-pointer-cap radius="0" color="rgb(29,29,29)">
<e-pointers-cap-border color="red" width="0.2"></e-pointers-cap-border>
</e-pointer-cap>
<e-pointer-border color="rgb(29,29,29)" width="1"></e-pointer-border>
<e-pointer-needletail length="0%"></e-pointer-needletail>
<e-pointer-animation enable="false"></e-pointer-animation>
</e-circulargauge-pointer>
<e-circulargauge-pointer value="9.8" radius="70%" color="rgba(168,145,102,1)" pointerWidth="4">
<e-pointer-cap radius="4" color="rgba(168,145,102,1)">
<e-pointers-cap-border color="rgba(168,145,102,1)" width="0.2"></e-pointers-cap-border>
</e-pointer-cap>
<e-pointer-needletail length="20%" color="rgba(168,145,102,1)"></e-pointer-needletail>
<e-pointer-animation enable="false"></e-pointer-animation>
</e-circulargauge-pointer>
</e-circulargauge-pointers>
</e-circulargauge-axis>
</e-circulargauge-axes>
</ejs-circulargauge>
<ejs-circulargauge id="subGauge">
<e-circulargauge-axes>
<e-circulargauge-axis minimum="0" maximum="12" startAngle="0" endAngle="360">
<e-axis-labelstyle hiddenLabel="First"></e-axis-labelstyle>
<e-axis-majorticks interval="3"></e-axis-majorticks>
<e-circulargauge-ranges>
<e-circulargauge-range start="0" end="3" color="rgba(29,29,29,0.7)" startWidth="5" endWidth="5"></e-circulargauge-range>
<e-circulargauge-range start="3" end="12" color="rgba(168,145,102,0.1)" startWidth="5" endWidth="5"></e-circulargauge-range>
</e-circulargauge-ranges>
<e-axis-linestyle width="0"></e-axis-linestyle>
<e-circulargauge-pointers>
<e-circulargauge-pointer radius="40%" color="rgb(29,29,29)" pointerWidth="2">
<e-pointer-cap radius="2" color="rgb(29,29,29)">
<e-pointers-cap-border color="red" width="0.2"></e-pointers-cap-border>
</e-pointer-cap>
<e-pointer-border color="rgb(29,29,29)" width="1"></e-pointer-border>
<e-pointer-needletail length="0%"></e-pointer-needletail>
<e-pointer-animation enable="false"></e-pointer-animation>
</e-circulargauge-pointer>
</e-circulargauge-pointers>
</e-circulargauge-axis>
</e-circulargauge-axes>
</ejs-circulargauge>NOTE