Methods in Blazor Circular Gauge Component

28 Dec 20236 minutes to read

The following methods are available in the Circular Gauge component.

SetAnnotationValueAsync

To change the annotation content dynamically, use the SetAnnotationValueAsync method in the Circular Gauge component. The following are the arguments for this method.

Argument name	Description
axisIndex	Specifies the index of the axis where the annotation is to be placed.
annotationIndex	Specifies the index number of the annotation to be updated.
content	Specifies the text for the annotation to be updated.

@using Syncfusion.Blazor.CircularGauge

<button style="margin-left:34px" @onclick="ChangeAnnotationValue">Change annotation value</button>
<SfCircularGauge @ref="gauge" Width="250px" Height="250px">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50"></CircularGaugePointer>
            </CircularGaugePointers>
            <CircularGaugeAnnotations>
                <CircularGaugeAnnotation Angle="195" ZIndex="1" Content="Gauge">
                </CircularGaugeAnnotation>
            </CircularGaugeAnnotations>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

@code {
    SfCircularGauge gauge;
    public async Task ChangeAnnotationValue()
    {
        await gauge.SetAnnotationValueAsync(0, 0, "Circular Gauge");
    } 
}

SetPointerValueAsync

To change the pointer value dynamically, use the SetPointerValueAsync method in the Circular Gauge component. The following are the arguments for this method.

Argument name	Description
axis index	Specifies the index of the axis in which the pointer value is to be updated.
pointerIndex	Specifies the index of the pointer to be updated.
value	Specifies the value of the pointer to be updated.

@using Syncfusion.Blazor.CircularGauge

<button style="margin-left:34px" @onclick="ChangePoinerValue">Change pointer value</button>
<SfCircularGauge @ref="gauge" Width="250px" Height="250px">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugePointers>
                <CircularGaugePointer Value="50"></CircularGaugePointer>
            </CircularGaugePointers>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

@code {
    SfCircularGauge gauge;
    public async Task ChangePoinerValue()
    {
        await gauge.SetPointerValueAsync(0, 0, 30);
    }
}

SetRangeValue

To change the start and end of a range in axis, use the SetRangeValue method in the Circular Gauge component. The following are the arguments for this method.

Argument name	Description
axis index	Specifies the index of the axis in which the range value is to be updated.
rangeIndex	Specifies the index of the range to be updated.
start	Specifies the start value of the range.
end	Specifies the end value of the range

@using Syncfusion.Blazor.CircularGauge

<button style="margin-left:34px" @onclick="ChangeRangeValue">Change range value</button>
<SfCircularGauge @ref="gauge" Width="250px" Height="250px">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40" End="80">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

@code {
    SfCircularGauge gauge;
    public async Task ChangeRangeValue()
    {
        gauge.SetRangeValue(0, 0, 10, 50);
        await gauge.RefreshAsync();
    }
}

RefreshAsync

The RefreshAsync method can be used to change the state of the component and render it again.

@using Syncfusion.Blazor.CircularGauge

<button style="margin-left:34px" @onclick="RefreshAsync">Refresh</button>
<SfCircularGauge @ref="gauge" Width="250px" Height="250px">
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40" End="80">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</SfCircularGauge>

@code {
    SfCircularGauge gauge;
    public async Task RefreshAsync()
    {
        await gauge.RefreshAsync();
    }
}