We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

CHART LEGEND

Thread ID:

Created:

Updated:

Platform:

Replies:

141781 Jan 4,2019 02:31 AM UTC Jan 10,2019 09:38 AM UTC Xamarin.Forms 6
loading
Tags: SfChart
Bamame
Asked On January 4, 2019 02:31 AM UTC

Hi,
I am unable to get the Chart Legends to show for a Column Chart. I have tried everything but I only see one single color. I need to be able to see all the 'Category' Names in the Legend. It works well for the Doughnut Chart. Here's the xaml code (I have attached the snapshot of what it currently displays and what is expected to display):

 <chart:SfChart x:Name="Chart" HeightRequest="300" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
                        <chart:SfChart.ChartBehaviors>
                            <local:CustomSelectionBehavior />
                        </chart:SfChart.ChartBehaviors>
                        <chart:SfChart.PrimaryAxis>
                        <chart:CategoryAxis LabelRotationAngle="-45">
                            <chart:CategoryAxis.Title>
                                <chart:ChartAxisTitle Text="{Binding CATitle, Mode=TwoWay}"/>
                            </chart:CategoryAxis.Title>
                            <chart:CategoryAxis.LabelStyle>
                                <chart:ChartAxisLabelStyle Font="0.01"/>
                            </chart:CategoryAxis.LabelStyle>
                        </chart:CategoryAxis>
                    </chart:SfChart.PrimaryAxis>
                    <chart:SfChart.SecondaryAxis>
                        <chart:NumericalAxis>
                            <chart:NumericalAxis.Title>
                                <chart:ChartAxisTitle Text="amt (in $)"/>
                            </chart:NumericalAxis.Title>
                        </chart:NumericalAxis>
                    </chart:SfChart.SecondaryAxis>
                    <chart:SfChart.Series>
                            <chart:ColumnSeries ItemsSource="{Binding chartModels, Mode=TwoWay}" Label="{Binding chartModels, Source=category}"  XBindingPath="category"  YBindingPath="amt" EnableTooltip="True" DataMarkerPosition="Top" Spacing="1" EnableAnimation="True" AnimationDuration="3" IsVisibleOnLegend="True" EnableDataPointSelection="True"  >
                            <chart:ColumnSeries.DataMarker>
                                <chart:ChartDataMarker />
                            </chart:ColumnSeries.DataMarker>
                            <chart:ColumnSeries.ColorModel>
                                <chart:ChartColorModel Palette="Metro"/>
                            </chart:ColumnSeries.ColorModel>
                        </chart:ColumnSeries>
                    </chart:SfChart.Series>
                        <chart:SfChart.Legend>
                            <chart:ChartLegend OverflowMode="Wrap" DockPosition="Bottom" IsIconVisible="True" IsVisible="True" ToggleSeriesVisibility="True" Orientation="Vertical"  />
                        </chart:SfChart.Legend>
                   
                    </chart:SfChart>

Thanks!

Attachment: SNAPSHOT_4c446dc4.zip

Michael Prabhu M [Syncfusion]
Replied On January 4, 2019 10:50 AM UTC

Hi Bamame, 
Greetings from Syncfusion, currently the legend support to show each data point is not available for cartesian series types like chart, it is only available for accumulation series types like pie, doughnut etc. So, we are considering this as a feature request.  
We thank you for requesting this feature and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. We have added this feature request to our database. You can now track the current status of this feature request here. 
We have already planned this feature request for our upcoming Volume 1 2019 release which is scheduled to be rolled out by the mid of March 2019. So you can keep track of the feature from the above link.  
Regards,
Michael
 


Bamame
Replied On January 4, 2019 10:40 PM UTC

Thanks Michael. 

For the Doughnut chart is there a way to order/sort the Legend alphabetically? Is there also a way to left align the legend labels/text (see screenshot) and limit to 2 columns. Lastly, is there also a way to display text in the middle of the Doughnut chart (whitespace).
                    
Thanks.

Attachment: DOUGHNUT_835a516.zip

Bamame
Replied On January 4, 2019 10:41 PM UTC

Thanks Michael. 

For the Doughnut chart is there a way to order/sort the Legend alphabetically? Is there also a way to left align the legend labels/text (see screenshot) and limit to 2 columns. Lastly, is there also a way to display text in the middle of the Doughnut chart (whitespace).
                    
Thanks.

Attachment: DOUGHNUT_835a516.zip

Here's the xaml:
 <chart:SfChart x:Name="Chart2" HeightRequest="250" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" >
                        <chart:SfChart.ChartBehaviors>
                            <local:CustomSelectionBehavior />
                        </chart:SfChart.ChartBehaviors>
                            <chart:SfChart.Legend>
                            <chart:ChartLegend OverflowMode="Wrap" DockPosition="Bottom" IsIconVisible="True" IsVisible="True" ToggleSeriesVisibility="True"  Orientation="Vertical" />
                        </chart:SfChart.Legend>
                        <chart:SfChart.Series>
                            <chart:DoughnutSeries ItemsSource="{Binding Models}" XBindingPath="category"  YBindingPath="amt" EnableTooltip="True" EnableAnimation="True" AnimationDuration="3" IsVisibleOnLegend="True" EnableDataPointSelection="True" >
                            </chart:DoughnutSeries>
                        </chart:SfChart.Series>
                    </chart:SfChart>

Michael Prabhu M [Syncfusion]
Replied On January 7, 2019 11:07 AM UTC

Hi Bamame, 
 
Please find the response for your queries below. 
 
Query 1: For the Doughnut chart is there a way to order/sort the Legend alphabetically? 
 
Currently, we don’t have support to sort the legend items alphabetically. As of now, you can sort the series ItemSource as per your requirement. 
  
 
Query 2: Is there also a way to left align the legend labels/text (see screenshot) and limit to 2 columns. 
 
You can able to align the legend label to the left with two columns by using the ItemTemplate property in the ChartLegend class. Please refer the below code snippet for you reference. 
 
Code Snippet: 
 
 
  <chart:SfChart.Legend>
                  <chart:ChartLegend x:Name="legend" DockPosition="Bottom" OverflowMode="Wrap">
                    <chart:ChartLegend.ItemTemplate>
                        <DataTemplate>
                                <StackLayout BackgroundColor="{Binding DataPoint.LegendBackgroundColor}" Padding="3" Orientation="Horizontal" x:Name="root" WidthRequest="143">
                                  <BoxView Color="{Binding IconColor}" HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="13" WidthRequest="13" >
                                    <BoxView.Margin>
                                      <OnPlatform x:TypeArguments="Thickness" WinPhone="0,4,0,0" />
                                    </BoxView.Margin>
                                  </BoxView>
                                    <Label FontSize="13" VerticalTextAlignment="Center" Text="{Binding DataPoint.XValue}" />
                                </StackLayout>
                            </DataTemplate>
                        </chart:ChartLegend.ItemTemplate>
                    </chart:ChartLegend>
            </chart:SfChart.Legend>
 
    
 
 
 
 
Query 3:  Lastly, is there also a way to display text in the middle of the Doughnut chart (whitespace). 
 
You can display any view in the middle of the doughnut chart by setting CenterView property of the doughnut series. I have attached the user guide for your reference. 
 
 
Screenshot: 
 
 
 
Sample: LegendTemplate  
 
 
Please let us know, if you have any other queries. 
 
Thanks, 
Michael 
 
 


Bamame
Replied On January 10, 2019 09:07 AM UTC

Great, thanks! That's what I'm looking for.

Michael Prabhu M [Syncfusion]
Replied On January 10, 2019 09:38 AM UTC

Hi Bamame, 
 
Glad we could help, feel free to contact us if you need any other assistance from us. 
 
Thanks, 
Michael 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon