Blazor Linear Gauge Overview
The Telerik Linear Gauge for Blazor represents numerical values on a scale of ranges in a linear format.
Creating Blazor Linear Gauge
- Add the
<TelerikLinearGauge>tag. - Add an instance of the
<LinearGaugePointer>to the<LinearGaugePointers>collection. - Provide a
Valuefor the<LinearGaugePointer>.
@* Setup a basic linear gauge *@
<TelerikLinearGauge>
<LinearGaugePointers>
<LinearGaugePointer Value="@GaugeValue" />
</LinearGaugePointers>
</TelerikLinearGauge>
@code {
private double GaugeValue { get; set; } = 40;
}
Scale
The scale of the Linear 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...
Ranges
The ranges are used to visually distinguish particular values on the scale. Read the Ranges article for more information...
Linear Gauge Parameters
| Parameter | Type and Default Value | Description |
|---|---|---|
Class |
string |
Renders a custom CSS class to the <div class="k-lineargauge"> element. |
Width |
string |
Controls the width of the Linear Gauge. |
Height |
string |
Controls the height of the Linear Gauge. |
Transitions |
bool? |
Controls if the Linear Gauge uses animations for its value changes. |
RenderAs |
RenderingMode? ( SVG) |
Controls if the gauge renders as SVG or Canvas. |
Linear Gauge Reference and Methods
| Method | Description |
|---|---|
Refresh |
Programatically re-render the Linear Gauge. |
Get a reference to the Linear Gauge and use the Refresh method
@* Change the Height of the component *@
<TelerikButton OnClick="@ChangeTheHeight">Change the Height of the component</TelerikButton>
<TelerikLinearGauge @ref="@LinearGaugeRef" Height="@Height">
<LinearGaugePointers>
<LinearGaugePointer Value="30" />
</LinearGaugePointers>
</TelerikLinearGauge>
@code {
Telerik.Blazor.Components.TelerikLinearGauge LinearGaugeRef { get; set; }
public string Height { get; set; } = "300px";
private async Task ChangeTheHeight()
{
Height = "450px";
// Refresh() may execute before OnParameterSet(). The delay avoids this.
await Task.Delay(1);
LinearGaugeRef.Refresh();
}
}