Blazor Circular Gauge Overview

The Telerik Circular Gauge for Blazor represents numerical values on a circular scale.

Creating Blazor Circular Gauge

1. Add the <TelerikCircularGauge> tag.
2. Add an instance of the <CircularGaugePointer> to the <CircularGaugePointers> collection.
3. Provide a Value for each <CircularGaugePointer>.
4. (optional) You can use the Center Label Template to display the value of the pointer in the center of the component.

Basic Telerik Circular Gauge for Blazor.

@* Setup a basic circular gauge with center label template *@

<TelerikCircularGauge Width="100px" Height="100px">

    <CircularGaugePointers>
        <CircularGaugePointer Value="30" Size="10" />
    </CircularGaugePointers>

    <CircularGaugeCenterLabel>
        <Template>
            @{
                var pointer = context.Pointers.FirstOrDefault();

                <div style="font-weight: bold; font-size:30px">@pointer.Value</div>
            }
        </Template>
    </CircularGaugeCenterLabel>

</TelerikCircularGauge>

Scale

The scale of the circular gauge renders the values of the pointers and labels. See the Scale article for more information on how to customize the scale of the component.

Pointers

The pointers indicate the values on the scale of the component. See the Pointers article for more information on how to customize the pointers of the component.

Labels

The labels are rendered on the scale of the component to give information to the users. See the Labels article for more information on how to customize the labels on the scale of the component.

Circular Gauge Parameters

Parameter	Type and Default Value	Description
Class	string	Renders a custom CSS class to the <div class="k-circulargauge"> element.
Width	string	Controls the width of the Circular Gauge. You can read more information in the Dimensions article.
Height	string	Controls the height of the Circular Gauge. You can read more information in the Dimensions article.
Transitions	bool?	Controls if the Circular Gauge uses animations for its value changes.
RenderAs	RenderingMode? (SVG)	Controls if the gauge renders as SVG or Canvas.

Circular Gauge Reference and Methods

Method	Description
Refresh	Programatically re-render the Circular Gauge.

@* Change the Height of the component *@

<TelerikButton OnClick="@ChangeTheHeight">Change the Height of the component</TelerikButton>

<TelerikCircularGauge @ref="@CircularGaugeRef" Height="@Height">
    <CircularGaugePointers>

        <CircularGaugePointer Value="30" />

    </CircularGaugePointers>
</TelerikCircularGauge>

@code {
    Telerik.Blazor.Components.TelerikCircularGauge CircularGaugeRef { get; set; }

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

    async Task ChangeTheHeight()
    {
        Height = "450px";

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

        CircularGaugeRef.Refresh();
    }
}

Next Steps

• Explore the Circular Gauge Scale
• Learn more about the Circular Gauge Pointers

See Also

• Live Demo: Circular Gauge