Skip to content

Added new kb article radialgauge-center-label #2497

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 8, 2024
Merged

Added new kb article radialgauge-center-label #2497

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f7ba90b
Added new kb article radialgauge-center-label
Nov 7, 2024
c0604c3
Update knowledge-base/radialgauge-center-label.md
xristianstefanov Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions knowledge-base/radialgauge-center-label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Loading