Trouble Displaying LiveCharts 2 Chart in WPF Application

Question

I'm currently working on a WPF application where I need to display charts using LiveCharts 2. I've followed the documentation and examples available, but I'm facing an issue where the chart is not being displayed correctly in my application.

In the XAML code

<UserControl x:Class="Iris.View.MultimediaEditor"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:hc="clr-namespace:HandyControl.Controls;assembly=HandyControl" 
             xmlns:local="clr-namespace:Iris.View"
             mc:Ignorable="d"
             d:DesignHeight="2325.465" d:DesignWidth="800"
             xmlns:convert="clr-namespace:Iris.Converters" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF" 
             
             xmlns:services="clr-namespace:Iris.Services" 
             d:DataContext="{d:DesignInstance Type=services:MediaFileService}">

---

<!-- Inside your existing Border and StackPanel setup for the analytics section -->
<lvc:CartesianChart Series="{Binding Series}" Height="200">
    <!-- Remove the incorrect Series declaration inside CartesianChart -->
</lvc:CartesianChart>

i referenced the correct libraries and created the chart as per the example.

In the C# Code:

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting; // For SolidColorPaintTask
using SkiaSharp;
using System.Collections.ObjectModel;
using System.Windows.Controls;
using System.Windows.Media;
using LiveChartsCore.SkiaSharpView.WPF;

namespace Iris.Services
{
    internal class MediaFileService : BaseViewModel
    {
        public ObservableCollection<ISeries> Series { get; set; }
        public ObservableCollection<string> Labels { get; set; }

        public MediaFileService()
        {
            InitializeChartData();
        }

        private void InitializeChartData()
        {
            Series = new ObservableCollection<ISeries>
            {
                new ColumnSeries<int>
                {
                    Values = new ObservableCollection<int> { 0 }, // Initial dummy data
                    Name = "Data Series"
                }
            };

            Labels = new ObservableCollection<string> { "Initial" }; // Initial dummy labels
        }

        public void UpdateChart(Dictionary<string, int> currentObjectCounts)
        {
            // Clear existing series and labels
            Series.Clear();
            Labels.Clear();

            foreach (var item in currentObjectCounts)
            {
                Series.Add(new ColumnSeries<int>
                {
                    Values = new ObservableCollection<int> { item.Value },
                    Name = item.Key,
                    Fill = new SolidColorPaint(new SKColor(0, 0, 255)) // Blue color
                });

                Labels.Add(item.Key);
            }
        }
    }
}

Despite following the documentation and recommendations, the chart does not appear in my application. I've checked the data binding, the data is being updated correctly, and the MediaFileService instance is created and assigned to the DataContext of the relevant UI element.

Could someone please provide guidance on what might be causing the chart not to display as expected in my WPF application using LiveCharts 2?

Thank you in advance for your assistance!

Here is a screenshot of what I see in the app:

Answer 1

It should show up assuming you actually set the DataContext of the UserControl to an instance of your MediaFileService class.

You can either do this directly in the XAML markup:

<UserControl x:Class="Iris.View.MultimediaEditor"
  ...
  d:DataContext="{d:DesignInstance Type=services:MediaFileService}">
    <UserControl.DataContext>
        <services:MediaFileService />
    </UserControl.DataContext>
</UserControl>

Or you can set it programmatically:

public MultimediaEditor()
{
    InitializeComponent();
    DataContext = new MediaFileService();
}

Or the UserControl could inherit the DataContext from a parent element like for example a window.

The d:DataContext attribute only sets the design time DataContext that is only used by the designer in Visual Studio. It's not used at runtime.