1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfChart - Legend

SfChart - Legend

Hi,
I have a chart with many line series and I need to create legends for each line.

1) If I use axis for each series I can made it by Label property with the same color as series. That is OK (as picture).

2) But if I want to use one axis for all line series I don´t know how to create legend (as picture).

Note.: I am using combinations of LineSeries+RangeAreaSeries (fog around main line). So I need Legend only for main lines.

There is any way how to create this type of legend? In your documentation is only manual for Pie and Pyramid charts and Leged text is not colored (colored markers are wasting space).

Thank you

Attachment: Chart_Legend_a1b8804.zip

4 Replies
SJ Suyamburaja Jayakumar Syncfusion Team March 26, 2020 09:28 AM UTC

Hi Tomas Turek, 
 
Greetings from Syncfusion. 
 
We have achieved your requiment by using Legend DockPosition property in Left and customizing the appearance of legend items with using ItemTemplate as per in below code snippet. 
 
XAML: 
<chart:SfChart.Legend> 
                <chart:ChartLegend Orientation="Vertical" DockPosition="Left" > 
                <chart:ChartLegend.ItemTemplate > 
                        <DataTemplate> 
                            <Label VerticalOptions="Center" FontSize="13" Text="{Binding Label}" TextColor="{Binding IconColor}" VerticalTextAlignment="Center" Rotation="270" HorizontalTextAlignment="Center" HeightRequest="70" /> 
                        </DataTemplate> 
                </chart:ChartLegend.ItemTemplate> 
                </chart:ChartLegend> 
            </chart:SfChart.Legend> 
  
More information please refer the UG link, 
 
I hope this information helps. If you need any further assistance, please don't hesitate to contact us. 
 
Regards, 
Suyamburaja j. 


TT Tomas Turek June 4, 2020 08:06 AM UTC

Hi,
thank you for your help. Finally, I get legend before Axes Y (as I want). But I have a problem with the Width and Height property of elements. I don't know how to set auto width of Legend element and auto height of each element at legend. I Attach 2 pictures. The first one is what I get now and second what I want.

My XAML code for the legend is:

<chart:SfChart.Legend>
   <chart:ChartLegend Orientation="Vertical" DockPosition="Left" IsIconVisible="False"  ItemMargin="2" OverflowMode="Wrap" MaxWidth="50" Margin="0" >
       <chart:ChartLegend.ItemTemplate >
           <DataTemplate>
               <Label VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"  FontSize="Micro" Text="{Binding Label}" TextColor="{Binding IconColor}" VerticalTextAlignment="Center" Rotation="270" HorizontalTextAlignment="Center" Margin="0" HeightRequest="60"  WidthRequest="65" />
           </DataTemplate>
       </chart:ChartLegend.ItemTemplate>
   </chart:ChartLegend>
</chart:SfChart.Legend>

Attachment: Screenshot_Chart_34718ed2.zip

DD Devakumar Dhanapoosanam Syncfusion Team June 8, 2020 02:21 AM UTC

Hi Tomas Turek, 
 
Thanks for your update. 
 
Currently we are analyzing the feasible solution for achieving your requirement and we will update you the details on or before June 9, 2020. 
 
Regards, 
Devakumar D 


DD Devakumar Dhanapoosanam Syncfusion Team June 10, 2020 04:30 PM UTC

Hi Tomas Turek, 
 
Sorry for the delay. 
 
We have checked the possibilities for achieving your requirement and we regret to say that currently we don’t have direct support to customize the auto width for legend items while positioning the legend on left/right side chart using the OverflowMode as Wrap in vertical orientation.  
 
We would like to suggest using the OverflowMode as Scroll to view the legend items hidden by scrolling while having multiple legend items. 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Devakumar D 


Loader.
Up arrow icon