Adding a Center Label in the RadialGauge

Environment

Product

RadialGauge for Blazor

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.

<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