Automatic Updates

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;

public partial class ViewModel : ObservableObject
{
    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; }

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

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

    [RelayCommand]
    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;
    }

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

    [RelayCommand]
    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)
                }
            });
    }

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

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

using System.Threading.Tasks;
using Eto.Forms;
using LiveChartsCore.SkiaSharpView.Eto;
using ViewModelsSamples.Lines.AutoUpdate;

namespace EtoFormsSample.Lines.AutoUpdate;

public class View : Panel
{
    private readonly CartesianChart cartesianChart;
    private readonly ViewModel viewModel;
    private bool? isStreaming = false;

    public View()
    {
        viewModel = new ViewModel();

        cartesianChart = new CartesianChart
        {
            Series = viewModel.Series,
        };

        var b1 = new Button { Text = "Add item" };
        b1.Click += (object sender, System.EventArgs e) => viewModel.AddItem();

        var b2 = new Button { Text = "Replace item" };
        b2.Click += (object sender, System.EventArgs e) => viewModel.ReplaceItem();

        var b3 = new Button { Text = "Remove item" };
        b3.Click += (object sender, System.EventArgs e) => viewModel.RemoveItem();

        var b4 = new Button { Text = "Add series" };
        b4.Click += (object sender, System.EventArgs e) => viewModel.AddSeries();

        var b5 = new Button { Text = "Remove series" };
        b5.Click += (object sender, System.EventArgs e) => viewModel.RemoveSeries();

        var b6 = new Button { Text = "Constant changes" };
        b6.Click += OnConstantChangesClick;

        var buttons = new StackLayout(b1, b2, b3, b4, b5, b6) { Orientation = Orientation.Horizontal, Padding = 2, Spacing = 4 };

        Content = new DynamicLayout(buttons, cartesianChart);
    }

    private async void OnConstantChangesClick(object sender, System.EventArgs e)
    {
        isStreaming = isStreaming is null ? true : !isStreaming;

        while (isStreaming.Value)
        {
            viewModel.RemoveItem();
            viewModel.AddItem();
            await Task.Delay(1000);
        }
    }
}

Articles you might also find useful:

Cartesian chart control
Line series properties