Custom class on LiveCharts?

Question

I'm trying to learn and implement LiveChart on a WPF app based on the MVVM pattern, but I'm having hard times to understand how to properly implement it. Let's say I have a custom class like this. I know that the question is a bit confusing, but I'm having hard time to understand how doeas it work, can anyone please help me out by giving me a simple example on how to plot a custom class based on the MVVM pattern?

ErrorPrt CLASS

public class ErrorPrt
{
    public ErrorPrt()
    {
        prtName = string.Empty;
        Count = -1;
    }
    public string prtName { get; set; }
    public int Count { get; set; }
}

DECLARATION

private string[] Labels { get; set; }

public SeriesCollection seriesCollection;
private SeriesCollection SeriesCollection
{
    get { return seriesCollection; }
    set { seriesCollection = value; OnPropertyChanged("SeriesCollection"); }
}

DISPLAY CHART METHOD

public SeriesCollection dispalyChart(ErrorPrt[] err)
{
    SeriesCollection series = new SeriesCollection();

    List<int> vs1 = new List<int>();

    foreach (ErrorPrt e in err)
    {
        vs1.Add(e.Count);
    }

    series.Add(new ColumnSeries
    {
        Title = "REPORT",
        Values = new ChartValues<ErrorPrt> (err)
    });
    return series;
}

public string[] GetLabels(ErrorPrt[] err)
{
    string[] Labels = new string[err.Length];
    int j = 0;
    foreach(var e in err)
    {
        Labels[j] = e.prtName;
        j++;
    }
    return Labels;
}

EDIT

ChartValues DECLARED AS GLOBAL TO THE VIEWMODEL

class BackupStatsViewModel : INotifyPropertyChanged
{
    //OMITTED CODE
    ChartValues<DataModel> values = new ChartValues<DataModel>();

        private void InitializeBarChartData(ErrorPrt[] arr)
        {


            for (int i = 0; i < arr.Count(); i++)
                values.Add(new DataModel() { Label = $"PRT {arr[i].prtName}", Value = arr[i].Count });
            // Initialize the DataModel items

            //for (double value = 0; value < 10; value++)
            //{
            //    values.Add(new DataModel() { Label = $"Column {value + 1}", Value = value + 10 });
            //}

            // Create a labels collection from the DataModel items
            this.ColumnLabels = new ObservableCollection<string>(values.Select(dataModel => dataModel.Label));
            var dataMapper = new CartesianMapper<DataModel>()
              .Y(dataModel => dataModel.Value)
              .Fill(dataModel => dataModel.Value > 15.0 ? Brushes.Red : Brushes.Green);

            this.ChartDataSets = new SeriesCollection
            {
              new ColumnSeries
              {
                Values = values,
                Configuration = dataMapper
              }
            };
        }
    }
}

But in the label It show "series" and the count not the label..

Answer 1

The following example is a minimum MVVM example which plots a ColumnSeries (bar chart) based on a custom data model:

DataModel.cs

class DataModel : INotifyPropertyChanged
{
  private double value;   
  public double Value
  {
    get => this.value;
    set 
    { 
      this.value = value; 
      OnPropertyChanged();
    }
  }

  private string label;   
  public string Label
  {
    get => this.label;
    set 
    { 
      this.label = value; 
      OnPropertyChanged();
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

ViewModel.cs

class ViewModel : INotifyPropertyChanged
{
  public SeriesCollection ChartDataSets { get; set; }
  public ObservableCollection<string> ColumnLabels { get; set; }

  public ViewModel()
  {
    InitializeBarChartData();
  }

  private void InitializeBarChartData()
  {
    // Initialize the DataModel items
    var values = new ChartValues<DataModel>();
    for (double value = 0; value < 10; value++)
    {
      values.Add(new DataModel() {Label = $"Column {value + 1}", Value = value + 10});
    }

    // Create a labels collection from the DataModel items
    this.ColumnLabels = new ObservableCollection<string>(values.Select(dataModel => dataModel.Label));

    // Define a data mapper, which tells the Chart how to extract data from the model
    // and how to map it to the corresponding axis. The mapper also allows 
    // to define a predicate which will be applied to color each data item (Fill, Stroke)
    var dataMapper = new CartesianMapper<DataModel>()
      .Y(dataModel => dataModel.Value)
      .Fill(dataModel => dataModel.Value > 15.0 ? Brushes.Red : Brushes.Green);

    this.ChartDataSets = new SeriesCollection
    {
      new ColumnSeries
      {
        Values = values,
        Configuration = dataMapper
      }
    };
  }

  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

MainWindow.xaml

<Window>
  <Window.DataContext>
    <ViewModel />
  </Window.DataContext>

  <CartesianChart Series="{Binding ChartDataSets}">
    <CartesianChart.AxisX>
      <Axis Labels="{Binding ColumnLabels}" />
    </CartesianChart.AxisX>
  </CartesianChart>
</Window>