# circle gauge[en]
## properties

1. Value(Number) - The value of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-Value application result][gauge-circle-02]  
  <figurecaption>(value: 85)</figurecaption>
  </figure>

2. startValue - The start value of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-03]  
  <figurecaption>(startValue: 10)</figurecaption>
  </figure>

3. endValue - The end value of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-04]  
  <figurecaption>(endValue: 120)</figurecaption>
  </figure>

4. step - The tick interval of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-05]  
  <figurecaption>(step: 30)</figurecaption>
  </figure>

5. stepTextSize - The tick text size of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-06]  
  <figurecaption>(stepTextSize: 10)</figurecaption>
  </figure>

6. subStep - The space between ticks of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-07]  
  <figurecaption>(subStep: 10)</figurecaption>
  </figure>

7. stepNeedleSize - The tick size of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-08]  
  <figurecaption>(stepNeedleSize: 3)</figurecaption>
  </figure>

8. startAngle - The start angle of gauge. It increases clockwise based on the 12 o'clock position. If a negative value, it will be reverse direction.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-09]  
  <figurecaption>(startAngle: -90)</figurecaption>
  </figure>

9. endAngle - The end angle of gauge. It increases clockwise based on the 12 o'clock position. If a negative value, it will be reverse direction.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-10]  
  <figurecaption>(endAngle: 90)</figurecaption>
  </figure>

10. textFillStyle - The tick text color of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-11]  
  <figurecaption>(textFillStyle: #ec5324)</figurecaption>
  </figure>

11. needleFillStyle - The needle color of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-12]  
  <figurecaption>(needleFillStyle: #ec5324)</figurecaption>
  </figure>

12. innerCircleFillStyle - The circle color of gauge needle.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-13]  
  <figurecaption>(innerCircleFillStyle: #ec5324)</figurecaption>
  </figure>

13. stepFillStyle - The needle color of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-14]  
  <figurecaption>(stepFillStyle: #ec5324)</figurecaption>
  </figure>

14. colorStops - The color of each sector of gauge. You can add a sector by double clicking and delete it by dragging down the marker.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-15]  
  <figurecaption>(colorStops: <img src="../images/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
  </figure>

15. showStartValue - Determine whether to display the start value of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-16]  
  <figurecaption>(showStartValue: unchecked)</figurecaption>
  </figure>

16. showEndValue - Determine whether to display the end value of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-17]  
  <figurecaption>(showEndValue: unchecked)</figurecaption>
  </figure>

17. showStepLine - Determine whether to display the tick of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-18]  
  <figurecaption>(showStepLine: unchecked)</figurecaption>
  </figure>

18. showStepText - Determine whether to display the tick value of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-19]  
  <figurecaption>(showStepText: unchecked)</figurecaption>
  </figure>

19. showSubStep - Determine whether to display the minor tick of gauge.
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-20]  
  <figurecaption>(showSubStep: unchecked)</figurecaption>
  </figure>

20. inText - Determine the location of tick value of gauge. (checked: inside, unchecked: outside)
  <figure style="text-align: center;">
  
  ![Gauge-BackgroundColor application result][gauge-circle-21]  
  <figurecaption>(inText: unchecked)</figurecaption>
  </figure>


[gauge-circle-01]: ../images/gauge-circle-01.png
[gauge-circle-02]: ../images/gauge-circle-02.png
[gauge-circle-03]: ../images/gauge-circle-03.png
[gauge-circle-04]: ../images/gauge-circle-04.png
[gauge-circle-05]: ../images/gauge-circle-05.png
[gauge-circle-06]: ../images/gauge-circle-06.png
[gauge-circle-07]: ../images/gauge-circle-07.png
[gauge-circle-08]: ../images/gauge-circle-08.png
[gauge-circle-09]: ../images/gauge-circle-09.png
[gauge-circle-10]: ../images/gauge-circle-10.png
[gauge-circle-11]: ../images/gauge-circle-11.png
[gauge-circle-12]: ../images/gauge-circle-12.png
[gauge-circle-13]: ../images/gauge-circle-13.png
[gauge-circle-14]: ../images/gauge-circle-14.png
[gauge-circle-15]: ../images/gauge-circle-15.png
[gauge-circle-16]: ../images/gauge-circle-16.png
[gauge-circle-17]: ../images/gauge-circle-17.png
[gauge-circle-18]: ../images/gauge-circle-18.png
[gauge-circle-19]: ../images/gauge-circle-19.png
[gauge-circle-20]: ../images/gauge-circle-20.png
[gauge-circle-21]: ../images/gauge-circle-21.png

## properties
