Merge new-kb-radialgauge-center-label-877da74406664df5b03aa991ecd92b4f-2497 into production (#2505)

* Added new kb article radialgauge-center-label

* Update knowledge-base/radialgauge-center-label.md

Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>

---------

Co-authored-by: KB Bot <kb-bot@telerik.com>
Co-authored-by: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>

Author: 4 people

knowledge-base/radialgauge-center-label.md

@@ -0,0 +1,56 @@
+---
+title: Adding a Center Label in the RadialGauge
+description: This article demonstrates how to add and center a label on the RadialGauge component in a Blazor application.
+type: how-to
+page_title: How to Center a Label on a RadialGauge in Blazor Applications
+slug: radialgauge-center-label
+tags: radialgauge, blazor, label, center, css, positioning
+res_type: kb
+ticketid: 1669777
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>RadialGauge for Blazor</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+How to add a centered label to the RadialGauge component?
+
+## Solution
+
+To add and center a label on the RadialGauge, wrap the RadialGauge inside a `div` element and use a `span` element for the label. Afterward, apply CSS styles to these elements for appropriate positioning.
+
+````RAZOR
+<div style="position: relative; width: 500px; height: 300px;">
+    <TelerikRadialGauge>
+        <RadialGaugeScales>
+            <RadialGaugeScale>
+                <RadialGaugeScaleRanges>
+                    <RadialGaugeScaleRange From="10" To="20" Color="red"></RadialGaugeScaleRange>
+                </RadialGaugeScaleRanges>
+            </RadialGaugeScale>
+        </RadialGaugeScales>
+        <RadialGaugePointers>
+            <RadialGaugePointer Value="20"></RadialGaugePointer>
+        </RadialGaugePointers>
+    </TelerikRadialGauge>
+
+    <!-- Label centered under the Radial Gauge -->
+    <div style="position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); text-align: center;">
+        <span style="font-size: 16px; color: #333;">100 HRS</span>
+    </div>
+</div>
+````
+
+## See Also
+
+- [Radial Gauge Overview](https://docs.telerik.com/blazor-ui/components/gauges/radial/overview)