Automatic Updates

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

This example uses the LineSeries class but it works the same for any series in the library

View model

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

namespace ViewModelsSamples.Lines.AutoUpdate;

[ObservableObject]
public partial class ViewModel
{
    private readonly Random _random = new();
    private readonly ObservableCollection<ObservableValue> _observableValues;

    public ViewModel()
    {
        // Use ObservableCollections to let the chart listen for changes (or any INotifyCollectionChanged). // mark
        _observableValues = new ObservableCollection<ObservableValue>
        {
            // Use the ObservableValue or ObservablePoint types to let the chart listen for property changes // mark
            // or use any INotifyPropertyChanged implementation // mark
            new ObservableValue(2),
            new(5), // the ObservableValue type is redundant and inferred by the compiler (C# 9 and above)
            new(4),
            new(5),
            new(2),
            new(6),
            new(6),
            new(6),
            new(4),
            new(2),
            new(3),
            new(4),
            new(3)
        };

        Series = new ObservableCollection<ISeries>
        {
            new LineSeries<ObservableValue>
            {
                Values = _observableValues,
                Fill = null
            }
        };

        // in the following sample notice that the type int does not implement INotifyPropertyChanged
        // and our Series.Values property is of type List<T>
        // List<T> does not implement INotifyCollectionChanged
        // this means the following series is not listening for changes.
        // Series.Add(new ColumnSeries<int> { Values = new List<int> { 2, 4, 6, 1, 7, -2 } }); // mark
    }

    public ObservableCollection<ISeries> Series { get; set; }

    [ICommand]
    public void AddItem()
    {
        var randomValue = _random.Next(1, 10);
        _observableValues.Add(new(randomValue));
    }

    [ICommand]
    public void RemoveItem()
    {
        if (_observableValues.Count == 0) return;
        _observableValues.RemoveAt(0);
    }

    [ICommand]
    public void UpdateItem()
    {
        var randomValue = _random.Next(1, 10);

        // we grab the last instance in our collection
        var lastInstance = _observableValues[_observableValues.Count - 1];

        // finally modify the value property and the chart is updated!
        lastInstance.Value = randomValue;
    }

    [ICommand]
    public void ReplaceItem()
    {
        var randomValue = _random.Next(1, 10);
        var randomIndex = _random.Next(0, _observableValues.Count - 1);
        _observableValues[randomIndex] = new(randomValue);
    }

    [ICommand]
    public void AddSeries()
    {
        //  for this sample only 5 series are supported.
        if (Series.Count == 5) return;

        Series.Add(
            new LineSeries<int>
            {
                Values = new List<int>
                {
                    _random.Next(0, 10),
                    _random.Next(0, 10),
                    _random.Next(0, 10)
                }
            });
    }

    [ICommand]
    public void RemoveSeries()
    {
        if (Series.Count == 1) return;

        Series.RemoveAt(Series.Count - 1);
    }
}

XAML

<UserControl
    x:Class="WinUISample.Lines.AutoUpdate.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.Lines.AutoUpdate"
    mc:Ignorable="d">

    <UserControl.DataContext>
        <vms:ViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <Button Margin="6" Command="{Binding AddItemCommand}">Add</Button>
            <Button Margin="6" Command="{Binding RemoveItemCommand}">Remove</Button>
            <Button Margin="6" Command="{Binding UpdateItemCommand}">Update</Button>
            <Button Margin="6" Command="{Binding ReplaceItemCommand}">Replace</Button>
            <Button Margin="6" Command="{Binding AddSeriesCommand}">Add Series</Button>
            <Button Margin="6" Command="{Binding RemoveSeriesCommand}">Remove Series</Button>
            <Button Margin="6" PointerPressed="Button_PointerPressed">Constant changes</Button>
        </StackPanel>
        <lvc:CartesianChart Grid.Row="1" Series="{Binding Series}"></lvc:CartesianChart>
    </Grid>

</UserControl>

Articles you might also find useful:

Cartesian chart control
Line series properties