From 7d819d145be7ca5c8b5e2820b181048bd1840457 Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Thu, 7 Nov 2024 13:35:57 +0000
Subject: [PATCH 1/2] Added new kb article radialgauge-center-label

---
 knowledge-base/radialgauge-center-label.md | 56 ++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 knowledge-base/radialgauge-center-label.md

diff --git a/knowledge-base/radialgauge-center-label.md b/knowledge-base/radialgauge-center-label.md
new file mode 100644
index 0000000000..81e7e81194
--- /dev/null
+++ b/knowledge-base/radialgauge-center-label.md
@@ -0,0 +1,56 @@
+---
+title: RadialGauge Center Label
+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)

From 48ea0c91e6430c9d0b285ccdc1deb1b6e84a50ae Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Fri, 8 Nov 2024 10:41:46 +0200
Subject: [PATCH 2/2] Update knowledge-base/radialgauge-center-label.md

Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
 knowledge-base/radialgauge-center-label.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/knowledge-base/radialgauge-center-label.md b/knowledge-base/radialgauge-center-label.md
index 81e7e81194..7e8ccbb67d 100644
--- a/knowledge-base/radialgauge-center-label.md
+++ b/knowledge-base/radialgauge-center-label.md
@@ -1,5 +1,5 @@
 ---
-title: RadialGauge Center Label
+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