Custom Legend Template with Additional Image

[Anthony Schryer]

Hello, I'm attempting to create a chart with a custom legend template that, in addition to the existing icon and label, includes an image with a source of my choosing. This image would be different for each series and needs to be binded. Any assistance would be appreciated.

[Suyamburaja Jayakumar]

Hi Anthony Schryer, 

 

Greetings from Syncfusion.  

 

We would like to let you know that your requirement has been achieved by using Legend ItemTemplate property as per the below code snippet. 

 

XAML: 

<ContentPage.Resources> 

        <ResourceDictionary> 

            <local:LabelToIcon x:Key="labelToIcon" /> 

        </ResourceDictionary> 

    </ContentPage.Resources> 

    <ContentPage.Content> 

        <StackLayout> 

 

            <chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

 

    . . . . . 

                <chart:SfChart.Legend> 

                    <chart:ChartLegend x:Name="legend" > 

                        <chart:ChartLegend.ItemTemplate> 

                            <DataTemplate> 

                                <StackLayout Orientation="Horizontal" BackgroundColor="#99CEEA"> 

                                    <Image Source="{Binding Label,Converter={x:StaticResource labelToIcon}}" /> 

                                    <Label Text="&#xE9AE;" TextColor="{Binding IconColor}" /> 

                                    <Label Text="{Binding Label}" /> 

                                </StackLayout> 

                            </DataTemplate> 

                        </chart:ChartLegend.ItemTemplate> 

                    </chart:ChartLegend> 

                </chart:SfChart.Legend> 

            </chart:SfChart> 

        </StackLayout> 

    </ContentPage.Content> 

 

C#: 

public class LabelToIcon : IValueConverter 

    { 

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            return value.ToString().Equals("Male") ? "Male.png" : "Female.png"; 

        } 

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 

        { 

            throw new NotImplementedException(); 

        } 

    } 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/152961_Legend1248930858.zip  

 

More information please refer the below UG link. 

https://help.syncfusion.com/xamarin/charts/legend#itemtemplate 

 

Screenshot:  

 

 

Please let us know if you need any further assistance.     

   

Regards, 

Suyamburaja J. 

[Anthony Schryer]

Hm, I guess there was some unforeseen ambuigity, I apologize for being unclear. Essentially, my goal is to create a comparison between the stats of two users and display their avatars as part of the legend. Therefore, a simple converter for clearly defining the images ahead of time doesn't really suit my needs. Ideally, I would pass a json object to a wrapper component that could then unpack this into something readable by the chart, but I can't seem to figure out how to bind to anything other than the label.

[Suyamburaja Jayakumar]

Hi Anthony Schryer, 

 

Thanks for your patience. 

 

We have checked your update query and your requirement but with the current implementation, we can add the custom view as avatarview throughout the template view of legend, if you are not having with much more converter, we have simplified with the help of Trigger and also Image control. We hope this will helpful for getting better reference. 

 

XAML: 

<chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

              . . . .  

          <chart:SfChart.Legend> 

                <chart:ChartLegend x:Name="legend" > 

                    <chart:ChartLegend.ItemTemplate> 

                        <DataTemplate> 

                            <StackLayout Margin="2" Orientation="Horizontal" BackgroundColor="#99CEEA"> 

                                <Image Source="Female.png" WidthRequest="20" HeightRequest="20"  HorizontalOptions="Fill" VerticalOptions="Fill"> 

                                    <Image.Triggers> 

                                        <DataTrigger TargetType="Image" Binding="{Binding Index}" Value="0"> 

                                            <Setter Property="Source" Value="Male.png" /> 

                                        </DataTrigger> 

                                    </Image.Triggers> 

                                </Image> 

                                <Label Text="&#xE9AE;"  

                                           FontFamily="{OnPlatform Android=button_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets, iOS=Segoe MDL2 Assets, UWP=Assets/Fonts/button_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets }" 

                                           FontSize="35"  

                                           TextColor="{Binding IconColor}" HorizontalOptions="Fill" 

                                           VerticalOptions="Fill"/> 

                                <Label Text="{Binding Label}" VerticalTextAlignment="Center" VerticalOptions="Fill" HorizontalOptions="Fill"/> 

                            </StackLayout> 

                        </DataTemplate> 

                    </chart:ChartLegend.ItemTemplate> 

                </chart:ChartLegend> 

            </chart:SfChart.Legend> 

        </chart:SfChart> 

 

I hope this information helps. If you need any further assistance, please don't hesitate to contact us. 

 

Regards, 

Suyamburaja J.