LegendItemIconSize not honored on iOS?

[Valentin]

Hello,

I'm trying to control the size of the legend icons using the LegendItemIconSize property. It seems to work fine on Android and UWP but not on iOS.

Is this a bug or a limitation?

Is there any way to work around this, perhaps with a custom renderer?

[Stefan Nenchev]

Hi, Valentin,

I have tested the behavior but could not observe the issue in iOS. Have in mind that the LegendItemIconSize is of type Size so you need to set such and providing a numeric value in XAML would not work. Here is a simple approach I am testing with:

int counter = 0;
private void Button_Clicked(object sender, System.EventArgs e)
{
    if (counter % 2 == 0)
    {
        this.legend.LegendItemIconSize = new Size(5, 5);
    }
    else
    {
        this.legend.LegendItemIconSize = new Size(20, 20);
    }
    counter++;
}

Please give it a try. If you still experience any issues, providing more details on your setup will be appreciated so we can investigate the issue at our end.

Regards,
Stefan Nenchev
Progress Telerik

[Valentin]

Thank you for trying to help Stefan. I tried your suggestion but it did not help. 

I should've attached some sample code from the beginning  but figured it should be easy to recreate this issue with the char demo. Perhaps there's something about my code that's special. Anyway, here's the sample code that mirrors my scenario.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
             xmlns:local="clr-namespace:ChartLegendBug"
             x:Class="ChartLegendBug.MultiSeriesChart">

    <ContentPage.BindingContext>
        <local:MultiSeriesViewModel/>
    </ContentPage.BindingContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <telerikChart:RadCartesianChart x:Name="Chart">

            <telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:CategoricalAxis ShowLabels="True"/>
            </telerikChart:RadCartesianChart.HorizontalAxis>

            <telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:NumericalAxis Minimum="0" MajorStep="1" Maximum="3" ShowLabels="True"/>
            </telerikChart:RadCartesianChart.VerticalAxis>

            <telerikChart:RadCartesianChart.Series>
                <telerikChart:LineSeries ItemsSource="{Binding Series1Data}" ShowLabels="True" Stroke="Navy" DisplayName="First">
                    <telerikChart:LineSeries.ValueBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:LineSeries.ValueBinding>
                    <telerikChart:LineSeries.CategoryBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </telerikChart:LineSeries.CategoryBinding>
                    <telerikChart:LineSeries.LabelBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:LineSeries.LabelBinding>
                </telerikChart:LineSeries>
                <telerikChart:LineSeries ItemsSource="{Binding Series2Data}" ShowLabels="True" Stroke="Red" DisplayName="Second">
                    <telerikChart:LineSeries.ValueBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:LineSeries.ValueBinding>
                    <telerikChart:LineSeries.CategoryBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </telerikChart:LineSeries.CategoryBinding>
                    <telerikChart:LineSeries.LabelBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:LineSeries.LabelBinding>
                </telerikChart:LineSeries>
            </telerikChart:RadCartesianChart.Series>
        </telerikChart:RadCartesianChart>
        <telerikChart:RadLegend Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="Legend"
                         LegendProvider="{x:Reference Name=Chart}"
                         LegendItemFontColor="Green"
                         LegendItemFontSize="7"
                         Orientation="Horizontal" />
        <!-- LegendItemIconSize="7,7" -->
    </Grid>

</ContentPage>

 

Code behind and view model

 

using System.Collections.ObjectModel;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace ChartLegendBug
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MultiSeriesChart : ContentPage
    {
        public MultiSeriesChart()
        {
            InitializeComponent();

            Legend.LegendItemIconSize = new Size(7, 7);
        }
    }

    public class CategoryData
    {
        public object Category { get; set; }
        public double Value { get; set; }
    }

    public class MultiSeriesViewModel
    {
        public MultiSeriesViewModel()
        {
        }

        public ObservableCollection<CategoryData> Series1Data { get; set; } = new ObservableCollection<CategoryData>
            {
                new CategoryData { Category = "One", Value = 3 },
                new CategoryData { Category = "Two", Value = 0 },
                new CategoryData { Category = "Three", Value = 2 }
            };

        public ObservableCollection<CategoryData> Series2Data { get; set; } = new ObservableCollection<CategoryData>
            {
                new CategoryData { Category = "One", Value = 1 },
                new CategoryData { Category = "Two", Value = 2 },
                new CategoryData { Category = "Three", Value = 3 }
            };
    }
}

 

Hope this helps. I'm using the latest Telerik controls with the latest Xamarin forms. The screenshots were taken in an iOS 11.4 simulator running the 6S skin. However, I also observed this behaviour on a real iOS device.

[Valentin]

On a related note, I submitted another potential chart issue, but for whatever reason I was forced to send it to be reviewed (your forum did not like something in the content?). Any chance you could check on it? Thank you.

[Stefan Nenchev]

Hello, Valentin,

I am not sure which other issue you are referring to? Maybe it was not properly submitted, please create a new thread so we can check it as well.

As for the IconSize, setting the size after the control is loaded should work for you. Please give it a try:

private void Legend_NativeControlLoaded(object sender, EventArgs e)
{
    (sender as RadLegend).LegendItemIconSize = new Size(25, 25);
}

And attaching to the event:

<telerikChart:RadLegend Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="Legend"
                 LegendProvider="{x:Reference Name=Chart}"
                 NativeControlLoaded="Legend_NativeControlLoaded"
                 LegendItemFontColor="Green"
                 LegendItemFontSize="7"
                 Orientation="Horizontal" />

Regards,
Stefan Nenchev
Progress Telerik

[Valentin]

Thank you Stefan, setting the legend icon size after the native control is loaded worked for me.

If this is the expected behavior I would suggest updating the documentation to make it clear that simply setting these attributes in XAML will not work. Ideally though, your code could be enhanced to hide this (iOS specific?) implementation detail...

[Stefan Nenchev]

Hi, Valentin,

I have logged the behavior as a bug in the iOS implementation of the legend. You can track it here - RadChart: [iOS]Setting the icon size of the Legend items before the control is loaded is not respected. I have updated your account's points balance respectively.

Regards,
Stefan Nenchev
Progress Telerik