This is a migrated thread and some comments may be shown as answers.
LegendItemIconSize not honored on iOS?
6 Answers 13 Views
This is a migrated thread and some comments may be shown as answers.
Valentin
Top achievements
Rank 1
Valentin asked on 29 Sep 2018, 09:18 PM

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?

6 Answers, 1 is accepted

Sort by
0
Stefan Nenchev
Telerik team
answered on 03 Oct 2018, 03:31 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Valentin
Top achievements
Rank 1
answered on 03 Oct 2018, 04:20 PM

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" ?>
             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.

0
Valentin
Top achievements
Rank 1
answered on 03 Oct 2018, 04:24 PM
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.
0
Accepted
Stefan Nenchev
Telerik team
answered on 08 Oct 2018, 11:08 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Valentin
Top achievements
Rank 1
answered on 08 Oct 2018, 02:54 PM

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...

0
Stefan Nenchev
Telerik team
answered on 09 Oct 2018, 03:04 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Valentin
Top achievements
Rank 1
Answers by
Stefan Nenchev
Telerik team
Valentin
Top achievements
Rank 1
Share this question
or