Auto Updates On Gauges

sample image

Razor

@page "/Pies/Gauge5"
@using LiveChartsCore
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore.SkiaSharpView.Extensions
@using LiveChartsCore.Defaults
@using LiveChartsCore.Measure

<style>
	.sample-wrap {
		display: inline-block;
		width: 600px;
		height: 600px;
	}
</style>

<button class="btn btn-primary" @onclick="DoRandomChange">
	Update Value
</button>

<div class="sample-wrap">
	<PieChart
		Series="Series"
		InitialRotation="-90"
        MaxAngle="270"
        MinValue="0"
        MaxValue="100"
		LegendPosition="LiveChartsCore.Measure.LegendPosition.Bottom">
	</PieChart>
</div>

@code {
    private ISeries[] Series { get; set; }
    private readonly Random _random = new();
    private ObservableValue _observableValue1;
    private ObservableValue _observableValue2;

    protected override void OnInitialized()
    {
        _observableValue1 = new ObservableValue { Value = 50 };
        _observableValue2 = new ObservableValue { Value = 80 };

        Series = GaugeGenerator.BuildSolidGauge(
            new GaugeItem(_observableValue1, series =>
            {
                series.Name = "North";
                series.DataLabelsPosition = PolarLabelsPosition.Start;
            }),
            new GaugeItem(_observableValue2, series =>
            {
                series.Name = "South";
                series.DataLabelsPosition = PolarLabelsPosition.Start;
            }));
    }

    private void DoRandomChange()
    {
        _observableValue1.Value = _random.Next(0, 100);
        _observableValue2.Value = _random.Next(0, 100);
        StateHasChanged();
    }
}

Articles you might also find useful:

Pie chart control
pie series properties
Gauges