Auto Updates On Gauges

The [ObservableObject], [ObservableProperty] and [ICommand] attributes come from the CommunityToolkit.Mvvm package, you can read more about it here.

This web site wraps every sample using a UserControl instance, but LiveCharts controls can be used inside any container.

sample image

View model

using System;
using System.Collections.Generic;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace ViewModelsSamples.Pies.Gauge5;

[ObservableObject]
public partial class ViewModel
{
    private readonly Random _random = new();

    public ViewModel()
    {
        ObservableValue1 = new ObservableValue { Value = 50 };
        ObservableValue2 = new ObservableValue { Value = 80 };

        Series = new GaugeBuilder()
            .WithOffsetRadius(5)
            .WithLabelsPosition(PolarLabelsPosition.Start)
            .AddValue(ObservableValue1, "North")
            .AddValue(ObservableValue2, "South")
            .BuildSeries();
    }

    public ObservableValue ObservableValue1 { get; set; }
    public ObservableValue ObservableValue2 { get; set; }
    public IEnumerable<ISeries> Series { get; set; }

    [ICommand]
    public void DoRandomChange()
    {
        // modifying the Value property updates and animates the chart automatically
        ObservableValue1.Value = _random.Next(0, 100);
        ObservableValue2.Value = _random.Next(0, 100);
    }
}

XAML

<UserControl x:Class="WinUISample.Pies.Gauge5.View"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
            xmlns:vms="using:ViewModelsSamples.Pies.Gauge5"
            mc:Ignorable="d">
    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="0" Command="{Binding DoRandomChangeCommand}">Change Value</Button>

        <lvc:PieChart
            Grid.Row="1"
            Series="{Binding Series}"
            InitialRotation="-90"
            Total="100"
            MaxAngle="270"
            LegendPosition="Bottom">
        </lvc:PieChart>
    </Grid>
</UserControl>

Articles you might also find useful: