New to Telerik UI for Blazor? Download free 30-day trial

Blazor Radial Gauge Overview

The Telerik Radial Gauge for Blazor represents numerical values on a scale of ranges in a radial format.

Creating Radial Gauge

  1. Add the <TelerikRadialGauge> tag to your razor page.
  2. Add one or more instances of the <RadialGaugePointer> to the <RadialGaugePointers> collection.
  3. Provide a Value for each <RadialGaugePointer>.

Basic Telerik Radial Gauge for Blazor.

Basic Radial Gauge

@* Setup a basic radial gauge *@

<TelerikRadialGauge>
    <RadialGaugePointers>
        <RadialGaugePointer Value="20">            
        </RadialGaugePointer>        
    </RadialGaugePointers>    
</TelerikRadialGauge>

Scale

The scale of the Radial Gauge renders the values of the pointers, the labels, and different ranges. See the Scale article for more information...

Pointers

The distinct values on the scale of the Radial Gauge. See the Pointers article for more information...

Ranges

You can use the ranges to visually distinguish multiple pointers from the others on the scale. See the Ranges article for more information...

Labels

The labels are rendered on the scale of the Radial Gauge to give inforation to the users about the value of the pointers. See the Labels article for more information...

Radial Gauge Parameters

Parameter Type and Default value Description
Width string Controls the width of the component.
Height string Controls the height of the component.
Class string renders a custom CSS class on the <div class="k-gauge"> element. You can use that class to reposition the component on the page.
Transitions bool? Controls if the Radial Gauge uses animations for its value changes.
RenderAs RenderingMode?
(SVG)
Controls if the gauge renders as SVG or Canvas.

Radial Gauge Reference and Methods

To execute Radial Gauge methods, obtain reference to the component instance via @ref.

Method Description
Refresh You can use that method to programmatically re-render the component.

Get a component reference and use the Refresh method

@* Change the Height of the component *@

<TelerikButton OnClick="@ChangeHeight">Change the height</TelerikButton>

<TelerikRadialGauge @ref="@RadialGaugeRef" Height="@Height">
    <RadialGaugePointers>
        <RadialGaugePointer Value="20">
        </RadialGaugePointer>
    </RadialGaugePointers>
</TelerikRadialGauge>

@code{
    Telerik.Blazor.Components.TelerikRadialGauge RadialGaugeRef { get; set; }

    public string Height { get; set; } = "200px";

    async Task ChangeHeight()
    {
        Height = "400px";

        //give time to the framework and browser to resize the actual DOM so the gauge can use the expected size
        await Task.Delay(30);

        RadialGaugeRef.Refresh();
    }
}

See Also

In this article