Arc Gauge Overview
The Telerik Arc Gauge for Blazor represents numerical values on an arc scale.
This article is separated in the following sections:
Basics
To add a Telerik Arc Gauge for Blazor to your application:
Add the
<TelerikArcGauge>tag.Add an instance of the
<ArcGaugePointer>to the<ArcGaugePointers>collection.Provide a
Valuefor the<ArcGaugePointer>.Add a Center Label Template (optional)
Basic Telerik Arc Gauge for Blazor.
@* Setup a basic arc gauge *@
<TelerikArcGauge>
<ArcGaugePointers>
<ArcGaugePointer Value="40" />
</ArcGaugePointers>
</TelerikArcGauge>
Features
The Telerik Arc Gauge for Blazor exposes the following features:
Arc Gauge Size
Width-string- controls the width of the component. You can read more on how they work in the Dimensions article.Height-string- controls the height of the component. You can read more on how they work in the Dimensions article.
You can also set the Gauge size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the gauge's Refresh() C# method after the DOM has been redrawn and the new container dimensions are rendered.
Other Feautres
Class- renders a custom CSS class on the topmost wrapping element of the component. You can use that class to reposition the component on the page.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.
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.
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.
Methods
The Arc Gauge reference exposes the Refresh method which allows you to programatically re-render the component.
Get a component reference 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();
}
}