Skip to content

Commit 988a9ad

Browse files
github-actions[bot]dimodiyordan-mitev
authored
Merge gauge-position-3033 into production (#3035)
* doc(Gauges): Document label Position parameter * Update components/gauges/arc/labels.md Co-authored-by: Yordan <[email protected]> --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Yordan <[email protected]>
1 parent d1bedab commit 988a9ad

File tree

2 files changed

+74
-8
lines changed

2 files changed

+74
-8
lines changed

‎components/gauges/arc/labels.md

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,10 @@ position: 20
1313
You can customize the appearance of the labels rendered on the [scale](slug:arc-gauge-scale) of the Arc Gauge by using the `<ArcGaugeScaleLabels>`, child tag of the `<ArcGaugeScale>`, and the parameters it exposes:
1414

1515
* [Format](#format)
16-
1716
* [Center Template](#center-template)
18-
17+
* [Position](#position)
1918
* [Color](#color)
20-
2119
* [Visible](#visible)
22-
2320
* [Additional Customization](#additional-customization)
2421

2522
## Format
@@ -87,6 +84,42 @@ The center template allows you to take control of the rendering of the central s
8784
</TelerikArcGauge>
8885
````
8986

87+
## Position
88+
89+
The `Position` parameter is of enum type `ArcGaugeScaleLabelsPosition` and determines whether the Gauge labels are on the inside (default) or outside of the Gauge graphic. Labels on the inside allow for a visually larger component within the same available space.
90+
91+
>caption Setting Arc Gauge label position
92+
93+
````RAZOR
94+
<TelerikArcGauge>
95+
<ArcGaugeScales>
96+
<ArcGaugeScale>
97+
<ArcGaugeScaleLabels Visible="true"
98+
Position="@ArcGaugeScaleLabelsPosition.Inside" />
99+
</ArcGaugeScale>
100+
</ArcGaugeScales>
101+
102+
<ArcGaugePointers>
103+
<ArcGaugePointer Value="66">
104+
</ArcGaugePointer>
105+
</ArcGaugePointers>
106+
</TelerikArcGauge>
107+
108+
<TelerikArcGauge>
109+
<ArcGaugeScales>
110+
<ArcGaugeScale>
111+
<ArcGaugeScaleLabels Visible="true"
112+
Position="@ArcGaugeScaleLabelsPosition.Outside" />
113+
</ArcGaugeScale>
114+
</ArcGaugeScales>
115+
116+
<ArcGaugePointers>
117+
<ArcGaugePointer Value="66">
118+
</ArcGaugePointer>
119+
</ArcGaugePointers>
120+
</TelerikArcGauge>
121+
````
122+
90123
## Color
91124

92125
The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.

‎components/gauges/circular/labels.md

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,10 @@ position: 15
1313
You can customize the appearance of the labels rendered on the [scale](slug:circular-gauge-scale) of the Circular Gauge by using the `<CircularGaugeScaleLabels>`, child tag of the `<CircularGaugeScale>`, and the parameters it exposes:
1414

1515
* [Format](#format)
16-
1716
* [Center Template](#center-template)
18-
17+
* [Position](#position)
1918
* [Color](#color)
20-
2119
* [Visible](#visible)
22-
2320
* [Additional Customization](#additional-customization)
2421

2522
## Format
@@ -91,6 +88,42 @@ The center template allows you to take control of the rendering of the central s
9188
</TelerikCircularGauge>
9289
````
9390

91+
## Position
92+
93+
The `Position` parameter is of enum type `CircularGaugeScaleLabelsPosition` and determines whether the Gauge labels are on the inside (default) or outside of the Gauge graphic. Labels on the inside allow for a visually larger component on the same available space.
94+
95+
>caption Setting Circular Gauge label position
96+
97+
````RAZOR
98+
<TelerikCircularGauge>
99+
<CircularGaugeScales>
100+
<CircularGaugeScale>
101+
<CircularGaugeScaleLabels Visible="true"
102+
Position="@CircularGaugeScaleLabelsPosition.Inside" />
103+
</CircularGaugeScale>
104+
</CircularGaugeScales>
105+
106+
<CircularGaugePointers>
107+
<CircularGaugePointer Value="66">
108+
</CircularGaugePointer>
109+
</CircularGaugePointers>
110+
</TelerikCircularGauge>
111+
112+
<TelerikCircularGauge>
113+
<CircularGaugeScales>
114+
<CircularGaugeScale>
115+
<CircularGaugeScaleLabels Visible="true"
116+
Position="@CircularGaugeScaleLabelsPosition.Outside" />
117+
</CircularGaugeScale>
118+
</CircularGaugeScales>
119+
120+
<CircularGaugePointers>
121+
<CircularGaugePointer Value="66">
122+
</CircularGaugePointer>
123+
</CircularGaugePointers>
124+
</TelerikCircularGauge>
125+
````
126+
94127
## Color
95128

96129
The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.

0 commit comments

Comments
 (0)