CircularGuage value of 1 fills guage

[Stephen Hall]

Please see the following snippet. This code when ran does not reflect the value of the pointer. It is fine when a value is changed to 2. Is this a bug or is there a 

<ejs-circulargauge id="range-container" GaugePosition="TopLeft" centerX="50%" centerY="50%" height="175">

      <e-circulargauge-margin left="0" right="0" bottom="0" top="0"></e-circulargauge-margin>

          <e-circulargauge-titlestyle size="10px"></e-circulargauge-titlestyle>

              <e-circulargauge-axes>

                  <e-circulargauge-axis startAngle="200" endAngle="160" minimum="0" maximum="72" radius="100%" majorTicks="major" minorTicks="minor">

                       <e-axis-linestyle width="0"></e-axis-linestyle>

                       <e-axis-labelstyle position="Inside" useRangeColor="true" font="font">

                       </e-axis-labelstyle>

                       <e-circulargauge-annotations>

                           <e-circulargauge-annotation content="<div id=pointervalue style=font-size:35px;width:120px;text-align:center>1</div>" angle="0" zIndex="1.0" radius="0%"></e-circulargauge-annotation>

                            </e-circulargauge-annotations>

                        <e-circulargauge-pointers>

                            <e-circulargauge-pointer roundedCornerRadius="10" value="1" radius="90%" color="#ff6000" pointerWidth="10" type="RangeBar" border="border" animation="animation">

                            </e-circulargauge-pointer>

                        </e-circulargauge-pointers>

                        <e-circulargauge-ranges>

                            <e-circulargauge-range start="0" end="72" color="#E0E0E0" startWidth="10" endWidth="10" radius="90%" roundedCornerRadius="10"

                        </e-circulargauge-range>

                      </e-circulargauge-ranges>

                   </e-circulargauge-axis>

                </e-circulargauge-axes>

             </ejs-circulargauge>

[Swetha Babu]

Hi Stephan,

Thank you for contacting Syncfusion support.

We are able to reproduce the reported issue. In the provided code snippet, we came to know that you are rendering the circular gauge with start angle as 200 and end angle as 160, the circular gauge will rendered as full circle and . However, we can fix this issue as workaround by setting the start angle and end angle as 0 and 360 respectively to render the complete gauge. The start angle and end angle is important in the calculation of the range bar pointer. As of now, you can use the below code snippet to render the complete gauge. 

<ejs-circulargauge id="range-container" GaugePosition="TopLeft" centerX="50%" centerY="50%" height="175"> 

      <e-circulargauge-margin left="0" right="0" bottom="0" top="0"></e-circulargauge-margin> 

          <e-circulargauge-titlestyle size="10px"></e-circulargauge-titlestyle> 

              <e-circulargauge-axes> 

                  <e-circulargauge-axis startAngle="0" endAngle="360" minimum="0" maximum="72" radius="100%" majorTicks="major" minorTicks="minor"> 

                       <e-axis-linestyle width="0"></e-axis-linestyle> 

                       <e-axis-labelstyle position="Inside" useRangeColor="true" font="font"> 

                       </e-axis-labelstyle> 

                       <e-circulargauge-annotations> 

                           <e-circulargauge-annotation content="<div id=pointervalue style=font-size:35px;width:120px;text-align:center>1</div>" angle="0" zIndex="1.0" radius="0%"></e-circulargauge-annotation> 

                            </e-circulargauge-annotations> 

                        <e-circulargauge-pointers> 

                            <e-circulargauge-pointer roundedCornerRadius="10" value="1" radius="90%" color="#ff6000" pointerWidth="10" type="RangeBar" border="border" animation="animation"> 

                            </e-circulargauge-pointer> 

                        </e-circulargauge-pointers> 

                        <e-circulargauge-ranges> 

                            <e-circulargauge-range start="0" end="72" color="#E0E0E0" startWidth="10" endWidth="10" radius="90%" roundedCornerRadius="10" 

                        </e-circulargauge-range> 

                      </e-circulargauge-ranges> 

                   </e-circulargauge-axis> 

                </e-circulargauge-axes> 

             </ejs-circulargauge> 

In the above sample, we have rendered the complete gauge with start angle and end angle as 0 and 360 and the pointer value as 1.

Please let us know if the above code meets your requirement.

Regards,
Swetha Babu