[Question] Usage Help. Updating chart does not remove previous chart unless resizing the screen

[PickleBurg]

I have encountered an interesting issue while attempting to create a line chart that I expect to update every second with a new value.

this does work and renders on the screen. the issue I have is when I notify a property change the new chart shows but the old ones does not disappear unless I resize the window of the application.

using CommunityToolkit.Mvvm.ComponentModel;
using SkiaSharp;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.Maui.Dispatching;
using Microcharts;

namespace ImageSource_Memory_Leak
{
    public partial class MainPageViewModel : ObservableObject
    {
        private readonly Random _random;

        public MainPageViewModel()
        {
            _random = new Random();
            MyChart = CreateInitialChart();
            PollValuesAsync();
        }

        private LineChart CreateInitialChart()
        {
            return new LineChart
            {
                Entries = GenerateRandomBpmData(),
                LineMode = LineMode.Straight,
                PointMode = PointMode.Circle,
                LabelTextSize = 20,
                LineSize = 4,
                BackgroundColor = SKColors.Transparent
            };
        }

        private List<ChartEntry> GenerateRandomBpmData()
        {
            float bpm = GenerateRandomBpm();
            string label = DateTime.Now.ToString(@"mm\:ss");

            return new List<ChartEntry>
            {
                new ChartEntry(bpm)
                {
                    Color = SKColor.Parse("#FF1493"),
                    Label = label,
                    ValueLabel = bpm.ToString()
                }
            };
        }

        private float GenerateRandomBpm() => _random.Next(60, 120);

        [ObservableProperty]
        private LineChart myChart;

        private async Task PollValuesAsync()
        {
            var entries = MyChart.Entries.ToList();

            while (true)
            {
                await Task.Delay(1000);

                float bpm = GenerateRandomBpm();
                string label = DateTime.Now.ToString(@"mm\:ss");

                entries.Add(new ChartEntry(bpm)
                {
                    Color = SKColor.Parse("#FF1493"),
                    Label = label,
                    ValueLabel = bpm.ToString()
                });

                MyChart = new LineChart
                {
                    Entries = entries,
                    LineMode = LineMode.Straight,
                    PointMode = PointMode.Circle,
                    LabelTextSize = 20,
                    LineSize = 4,
                    BackgroundColor = SKColors.Transparent,
                    IsAnimated = false,
                };

            }
        }
    }
}

https://github.com/PickleBurg/ImageSource-Memory-Leak/tree/chart-stuff

code repo for anyone interested.

It starts to increase in the amout of charts present

Them i resize andd it shows less.

<charts:ChartView x:Name="ChartView"
                  Chart="{Binding MyChart}"
                  VerticalOptions="FillAndExpand"
                  HorizontalOptions="FillAndExpand" />

[YBTopaz8]

Same issue. I thought I was crazy lol Sadly no solution yet

[YBTopaz8]

I got one solution working (or at least a workaround) tested on Donut Charts and line charts (probably works on all)
So
Here is what I do;

private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
    var send = (FlexLayout)sender;
    var song = send.BindingContext as SingleSongStatistics;
    if (song is null)
    {
        return;
    }
    HomePageVM.ShowSingleSongStatsCommand.Execute(song.Song); // method to update chart
    LineChartBor.WidthRequest = LineChartBor.Width + 1;  //LineChartBor is the border that has my chart
    await Task.Delay(250);
    LineChartBor.WidthRequest = LineChartBor.Width - 1;

}

My XAML looks like this

<Border x:Name="LineChartBor" HeightRequest="400"
        Stroke="DarkSlateBlue"
        StrokeShape="RoundRectangle 15">
    <mc:ChartView Chart="{Binding LChart}"                              
                  />
                  
</Border>

Hope that helps !

[PickleBurg]

I'm definitely going to give this a go I'll let you know!!

[alexcordovac]

Nasty but it works,

Here's my solution without using gestures, I'm injecting my viewmodel via Dependency Injection. Obviously my VM implements INotifyPropertyChanged, actually I'm using ObservableObject from CommunityToolkit. Don't forget to dispose the event

public partial class FinantialChartsPage : ContentPage
{
	public FinantialChartsPage(FinantialChartsViewModel vm)
	{
		InitializeComponent();
		BindingContext = vm;

        vm.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == nameof(FinantialChartsViewModel.ExpensesLineChart))
            {
                 ExpensesLineChart.Dispatcher.Dispatch(() =>
                 {
                     ExpensesLineChart.WidthRequest = ExpensesLineChart.Width + 1;
                     ExpensesLineChart.WidthRequest = ExpensesLineChart.Width - 1;
                 });
            }
        };
    }
}

My ViewModel

public partial class FinantialChartsViewModel : ObservableObject
.....
[ObservableProperty]
public Chart _expensesLineChart;
....
 private void CreateExpensesLineChart()
 {
....
     ExpensesLineChart = new LineChart
     {
         Entries = dateEntries,
         LineMode = LineMode.Straight,
         LineSize = 2,
         PointMode = PointMode.Circle,
         PointSize = 5,
         BackgroundColor = SKColors.Transparent
     };
 }

[alexcordovac]

I ended up creating a derived control

public class ChartViewRefreshable : ChartView
{
	public ChartViewRefreshable()
	{
		PropertyChanged += OnPropertyChanged;
    }

    /// <summary>
    /// Listens for changes to the Chart property and forces a refresh of the chart view when it changes.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    private void OnPropertyChanged(object? sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(Chart))
        {
            Dispatcher.Dispatch(() =>
            {
                WidthRequest = Width + 1;
                WidthRequest = Width - 1;
            });
        }
    }

    protected override void OnHandlerChanged()
    {
        base.OnHandlerChanged();

        // When the control is disposed, Handler will be null
        if (Handler == null)
        {
            this.PropertyChanged -= OnPropertyChanged;
        }
    }

}

My XAML looks just like this (use of the chart, there's no xaml for the derived class)

<ContentPage 
              ...
             xmlns:controls="clr-namespace:AbeXP.Controls">

<controls:ChartViewRefreshable Chart="{Binding TagsBarChart}"/>