# gauge horizon[en]
![Component-Gauge(Vertical)][gauge-vertical-01]  
The component which displays the gauge with a vertical bar.


## properties

1. Value(Number) - The value of gauge.  
<figure style="text-align: center;">

![Gauge-Value application result][gauge-vertical-02]  
<figurecaption>(value: 85)</figurecaption>
</figure>

2. startValue - The start value of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-03]  
<figurecaption>(startValue: 10)</figurecaption>
</figure>

3. endValue - The end value of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-04]  
<figurecaption>(endValue: 120)</figurecaption>
</figure>

4. step - The tick interval of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-05]  
<figurecaption>(step: 30)</figurecaption>
</figure>

5. stepTextSize - The tick text size of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-06]  
<figurecaption>(stepTextSize: 10)</figurecaption>
</figure>

6. subStep - The space between ticks of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-07]  
<figurecaption>(subStep: 10)</figurecaption>
</figure>

7. stepNeedleSize - The tick size of gauge.
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-08]  
<figurecaption>(stepNeedleSize: 3)</figurecaption>
</figure>

8. textColor - The tick text color of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-09]  
<figurecaption>(textColor: #ec5324)</figurecaption>
</figure>

9. needleFillStyle - The needle color of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-10]  
<figurecaption>(needleFillStyle: #ec5324)</figurecaption>
</figure>

10. needleSize - The needle size of gauge.
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-11]  
<figurecaption>(needleSize: 10)</figurecaption>
</figure>

11. stepFillStyle - The tick color of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-12]  
<figurecaption>(stepFillStyle: #ec5324)</figurecaption>
</figure>

12. 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-vertical-13]  
<figurecaption>(colorStops: <img src="../images/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
</figure>

13. showStartValue - Determine whether to display the start value of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-14]  
<figurecaption>(showStartValue: unchecked)</figurecaption>
</figure>

14. showEndValue - Determine whether to display the end value of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-15]  
<figurecaption>(showEndValue: unchecked)</figurecaption>
</figure>

15. showStepLine - Determine whether to display the tick of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-16]  
<figurecaption>(showStepLine: unchecked)</figurecaption>
</figure>

16. showStepText - Determine whether to display the tick value of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-17]  
<figurecaption>(showStepText: unchecked)</figurecaption>
</figure>

17. showSubStep - Determine whether to display the minor tick of gauge.  
<figure style="text-align: center;">

![Gauge-BackgroundColor application result][gauge-vertical-18]  
<figurecaption>(showSubStep: unchecked)</figurecaption>
</figure>


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