Blazor Arc Gauge Overview

The Telerik Arc Gauge for Blazor represents numerical values on an arc scale.

Creating Blazor Arc Gauge

1. Add the <TelerikArcGauge> tag.
2. Add an instance of the <ArcGaugePointer> to the <ArcGaugePointers> collection.
3. Provide a Value for the <ArcGaugePointer>.
4. (optional) Add a Center Label Template

@* Setup a basic arc gauge *@

<TelerikArcGauge>
    <ArcGaugePointers>
        <ArcGaugePointer Value="@GaugeValue" />
    </ArcGaugePointers>
</TelerikArcGauge>

@code {
    private double GaugeValue { get; set; } = 40;
}

Scale

The scale of the Arc 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.

Arc Gauge Parameters

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

Arc Gauge Reference and Methods

Method	Description
Refresh	Programatically re-render the Arc Gauge.

Get a reference to the Arc Gauge and use the Refresh method

@* Change the Width of the component *@

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

<TelerikArcGauge @ref="@ArcGaugeRef" Width="@Width">
    <ArcGaugePointers>

        <ArcGaugePointer Value="30" />

    </ArcGaugePointers>
</TelerikArcGauge>

@code {
    Telerik.Blazor.Components.TelerikArcGauge ArcGaugeRef { get; set; }

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

    private void ChangeTheHeight()
    {
        Width = "450px";

        ArcGaugeRef.Refresh();
    }
}

Next Steps

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

See Also

• Live Demo: Arc Gauge