Reassign Element of Series Values Collection Get Ghost Labels

[c0nstexpr]

I edit the view model implementation of Axes/Shared example in the project.

Moving or zooming the chart would probably left ghost labels painted.

Code for ViewModel.cs：

using SkiaSharp;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.Drawing;
using LiveChartsCore.Measure;
using System;
using System.Linq;
using LiveChartsCore.Defaults;
using System.Threading.Tasks;
using System.Collections.ObjectModel;

namespace WpfApp
{
    public class ViewModel
    {
        public ISeries[] SeriesCollection1 { get; set; }
        public ISeries[] SeriesCollection2 { get; set; }
        public Axis[] X1 { get; set; }
        public Axis[] X2 { get; set; }
        public Margin DrawMargin { get; set; }

        public ViewModel()
        {
            var values1 = new ObservableCollection<ObservablePoint>(Fetch().Take(3));
            var values2 = Fetch();

            SeriesCollection1 = new ISeries[]
            {
                new ScatterSeries<ObservablePoint>
                {
                    Values = values1,
                    DataLabelsPaint = new SolidColorPaint(SKColors.Black, 1f),
                    DataLabelsFormatter = i => $"Value: {i.Model.X}",
                    Stroke = new SolidColorPaint(SKColors.Red, 1f),
                    EasingFunction = null,
                    AnimationsSpeed = TimeSpan.Zero,
                    Fill = null,
                    GeometrySize = 4
                }
            };
            SeriesCollection2 = new ISeries[] { new ColumnSeries<ObservablePoint> { Values = values2 } };

            // ideally, when sharing an axis, you should set the // mark
            // initial limits for all the axes involved. // mark
            var padding = 3;
            var start = 0 - padding;
            var end = values1.Count - 1 + padding;

            X1 = new Axis[]
            {
                new Axis
                {
                    MinLimit = start,
                    MaxLimit = end,
                    CrosshairLabelsBackground = SKColors.OrangeRed.AsLvcColor(),
                    CrosshairLabelsPaint = new SolidColorPaint(SKColors.White),
                    CrosshairPaint = new SolidColorPaint(SKColors.OrangeRed.WithAlpha(50), 4),
                    CrosshairPadding = new Padding(8),
                    Labeler = value => value.ToString("N2")
                }
            };

            X2 = new Axis[]
            {
                new Axis
                {
                    MinLimit = start,
                    MaxLimit = end,
                    CrosshairPaint = new SolidColorPaint(SKColors.OrangeRed.WithAlpha(50), 4)
                }
            };

            SharedAxes.Set(X1[0], X2[0]);

            // Force the chart to use 70px margin on the left, this way we can align both charts Y axes. // mark
            DrawMargin = new Margin(70, Margin.Auto, Margin.Auto, Margin.Auto);

            // Advanced alternative:
            // you can also ask an axis its posible dimensions to determine the margin you need.

            // First you need to get a chart from the UI
            // in this sample we use the in-memory chart provided by the library.

            // var cartesianChart = new SKCartesianChart();
            // var axis = cartesianChart.YAxes.First() as Axis;
            // var size = axis.GetPossibleSize(cartesianChart.Core);

            // finally instead of using the static 70px, we can use the actual width of the axis.

            // DrawMargin = new Margin(size.Width, Margin.Auto, Margin.Auto, Margin.Auto);

            // normally you would need measure all the axes involved, and use the greater width to
            // calculate the required margin.

            Task.Run(
                async () =>
                {
                    var r = new Random();

                    while (true)
                    {
                        await Task.Delay(100);
                        values1[0] = new ObservablePoint
                        {
                            X = r.NextDouble() * 10,
                            Y = r.NextDouble() * 10,
                        };
                    }
                }
            );
        }

        private static ObservablePoint[] Fetch()
        {
            var values = new ObservablePoint[50];
            var r = new Random();

            for (var i = 0; i < 50; i++)            
                values[i] = new ObservablePoint
                {
                    X = r.NextDouble() * 10,
                    Y = r.NextDouble() * 10
                };            

            return values;
        }
    }
}

[beto-rodriguez]

Thanks for the report, this is fixed with the referenced commit and will be included in the next release of the library.