CarouselView charts X axis labels shown on wrong chart

[z000z]

When using a CarouselView in Xamarin Forms and multiple bar series cartesian charts (a, b, c), the X axis labels from chart a, b or c, will sometimes be shown on the wrong chart along with that chart's own x axis labels.

Scrolling through the chart back and forth can clear the labels and get it back working, but continue scrolling the multiple labels will show back up.

This is the XAML for the View being used:

<CarouselView Grid.Row="0" ItemsSource="{Binding ChartData}" IndicatorView="chartDataIndicatorView" CurrentItemChangedCommand="{Binding ChartChanged}" CurrentItem="{Binding SelectedChartData}"  >
                                <CarouselView.ItemTemplate >
                                    <DataTemplate x:DataType="vm:IChartData">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="auto" />
                                            </Grid.RowDefinitions>
                                            <Grid Grid.Row="0" VerticalOptions="Center">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="auto" />
                                                    <RowDefinition Height="auto" />
                                                </Grid.RowDefinitions>
                                                <Label Grid.Row="0" Text="{Binding Title}" FontFamily="{StaticResource SymbolFont}" HorizontalTextAlignment="Center" FontSize="Large" />
                                                <Label Grid.Row="1" Text="{Binding Summary}" HorizontalTextAlignment="Center"  FontSize="Small" />
                                            </Grid>    

                                            <lvc:CartesianChart IsVisible="{Binding Visible}" Grid.Row="1" ZoomMode="None" Series="{Binding Series}" XAxes="{Binding XAxis}" HeightRequest="400" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Margin="0,0,0,75"  />
                                            
                                        </Grid>
                                    </DataTemplate>
                                </CarouselView.ItemTemplate>
                            </CarouselView>
                            <IndicatorView x:Name="chartDataIndicatorView" Grid.Row="1" HorizontalOptions="FillAndExpand" />

Example screenshot, good labels

Chart with that previous chart's labels, plus it's own:

Same Chart with only it's labels:

Smartphone (please complete the following information):

• Device: iPhone 14 Pro Max simulator
• OS: iOS 16.4
• Version LiveChartsCore.SkiaSharpView.XamarinForms 2.0.0-beta.920

[z000z]

Some information I discovered recently that may help with this, this seems to be related to binding to the axis, I wasn't originally binding to the Y axis, but added that recently and now see the same behavior on the Y axis. Also I tested if removing the X axis binding fixes it and it appears to. Of course the axis isn't particularly helpful without the binding.

[beto-rodriguez]

Hello, I have been trying to reproduce this issue without luck, this is my result:

I think that you are sharing a SolidColorPaint instance in multiple axes, currently that is a limitation, please use a unique instance per axis.

This is my code, am I missing something?

<CarouselView Grid.Row="0" ItemsSource="{Binding Somethings}"
              IndicatorView="chartDataIndicatorView">
    <CarouselView.ItemTemplate >
        <DataTemplate>
            <lvc:CartesianChart
                    Grid.Row="1"
                    ZoomMode="None"
                    Series="{Binding Series}"
                    XAxes="{Binding XAxes}"
                    YAxes="{Binding YAxes}"
                    VerticalOptions="CenterAndExpand"
                    HorizontalOptions="FillAndExpand"
                    Margin="0,0,0,75" />
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="chartDataIndicatorView" Grid.Row="1" HorizontalOptions="FillAndExpand" />

public class Something
{
    public Something(ISeries[] series, Axis[] x, Axis[] y)
    {
        Series = series;
        XAxes = x;
        YAxes = y;
    }

    public ISeries[] Series { get; set; }
    public Axis[] XAxes { get; set; }
    public Axis[] YAxes { get; set; }
}

public partial class ViewModel : ObservableObject
{
    private static Random _r = new();

    public List<Something> Somethings { get; set; } = new List<Something>
    {
        new(BuildSeries(), BuildXAxes(), BuildYAxes()),
        new(BuildSeries(), BuildXAxes(), BuildYAxes()),
        new(BuildSeries(), BuildXAxes(), BuildYAxes()),
        new(BuildSeries(), BuildXAxes(), BuildYAxes()),
        new(BuildSeries(), BuildXAxes(), BuildYAxes())
    };

    private static ColumnSeries<int>[] BuildSeries()
    {
        return new[]
        {
            new ColumnSeries<int>
            {
                Values = Enumerable.Range(0, 10).Select(x => _r.Next(0, 10)).ToArray()
            }
        };
    }

    private static Axis[] BuildXAxes()
    {
        return new[]
        {
            new Axis
            {
                Labels = Enumerable.Range(0, 10).Select(x => $"label {_r.Next(0, 10)}").ToArray(),
                LabelsRotation = 90,
                ForceStepToMin = true,
                MinStep = 1
            }
        };
    }

    private static Axis[] BuildYAxes()
    {
        return new[]
        {
            new Axis
            {
                MinLimit = 0,
                MaxLimit = 10
            }
        };
    }
}

[z000z]

@beto-rodriguez

Hi,

I took your code and manipulated it closer to what I have and got it to break, and it looks like the missing piece was I have a picker that on change causes the collection to be re-filled with the selected item's graphs.

Here's what I modified your code to:

<Grid Grid.Row="0">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="auto" />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Picker Grid.Row="0" ItemsSource="{Binding Dropdowns}" SelectedItem="{Binding SelectedDropdown}" HorizontalTextAlignment="Center" FontAttributes="Bold" FontSize="Medium"/>
       
                                <CarouselView Grid.Row="1" ItemsSource="{Binding Somethings}" IndicatorView="chartDataIndicatorView">
                                    <CarouselView.ItemTemplate >
                                        <DataTemplate x:DataType="vm:Something">
                                            <lvc:CartesianChart
                                                    IsVisible="true"
                                                    ZoomMode="None"
                                                    Series="{Binding Series}"
                                                    XAxes="{Binding XAxes}"
                                                    YAxes="{Binding YAxes}"
                                                    HeightRequest="350"
                                                    VerticalOptions="CenterAndExpand"
                                                    HorizontalOptions="FillAndExpand"
                                                    Margin="0,0,0,75" />
                                        </DataTemplate>
                                    </CarouselView.ItemTemplate>
                                </CarouselView>
                                <IndicatorView x:Name="chartDataIndicatorView" Grid.Row="1" HorizontalOptions="FillAndExpand" />
                            </Grid>

public class Something
    {
        public Something(IList<ISeries> series, IList<Axis> x, IList<Axis> y)
        {
            Series = new ObservableCollection<ISeries>(series);
            XAxes = new ObservableCollection<Axis>(x);
            YAxes = new ObservableCollection<Axis>(y);
        }

        public IList<ISeries> Series { get; }
        public IList<Axis> XAxes { get; }
        public IList<Axis> YAxes { get; }
    }

    public class DropdownItem
    {
        private static Random _r = new();

        public List<Something> Somethings { get; set; } = new List<Something>
        {
            new(BuildSeries(), BuildXAxes(), BuildYAxes()),
            new(BuildSeries(), BuildXAxes(), BuildYAxes()),
            new(BuildSeries(), BuildXAxes(), BuildYAxes()),
            new(BuildSeries(), BuildXAxes(), BuildYAxes()),
            new(BuildSeries(), BuildXAxes(), BuildYAxes())
        };

        private static ColumnSeries<int>[] BuildSeries()
        {
            return new[]
            {
                new ColumnSeries<int>
                {
                    Values = Enumerable.Range(0, 10).Select(x => _r.Next(0, 10)).ToArray()
                }
            };
        }

        private static Axis[] BuildXAxes()
        {
            return new[]
            {
                new Axis
                {
                    Labels = Enumerable.Range(0, 10).Select(x => $"label {_r.Next(0, 10)}").ToArray(),
                    LabelsRotation = 90,
                    ForceStepToMin = true,
                    MinStep = 1
                }
            };
        }

        private static Axis[] BuildYAxes()
        {
            return new[]
            {
                new Axis
                {
                    MinLimit = 0,
                    MaxLimit = 10
                }
            };
        }
    }

public partial class ViewModel : ObservableObject
{
     public ObservableCollection<DropdownItem> Dropdowns { get; } = new ObservableCollection<DropdownItem>() { new DropdownItem(), new DropdownItem() };
        
        private DropdownItem? _selectedDropdown;
        public DropdownItem? SelectedDropdown { get => _selectedDropdown; set => SelectedDropDownChanged(value); }

        private int _selectedIndex;
        public int SelectedIndex { get => _selectedIndex; set { _selectedIndex = value; OnPropertyChanged(); } }

        private void SelectedDropDownChanged(DropdownItem? value)
        {
            _selectedDropdown = value;
            PopulateSomethings();
        }

        public ObservableCollection<Something> Somethings { get; set; } = new();
        private void PopulateSomethings()
        {
            Somethings.Clear();
            if (_selectedDropdown == null)
            {
                return;
            }
            foreach (var data in _selectedDropdown.Somethings)
            {
                Somethings.Add(data);
            }
        }
}

[beto-rodriguez]

I am still not able to reproduce, I am running the sample on the dev branch, so that probably means that it is already fixed. but I will try again when the next version of the library is released.

[z000z]

@beto-rodriguez I tried it this morning on the master branch and it's still reproducing for me, I built a small project that demonstrates the problem
TestChart.zip

[z000z]

I wanted to see if possibly updating the project to maui might avoid the problem, but it looks like the issue is there as well. I went ahead and created a test maui project as well to demonstrate it. I made the graph a little different to better show the problem, having all the same number of columns and the same labels makes it hard to see what's going on.

Here's the test project:
TestChartMaui.zip

[beto-rodriguez]

For me it was only happening on IOS, but the good news is that I just fixed an issue related to this (#1334) hopefully this issue will also be gone since version rc-2