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. Image for the cookie policy date

CHART LEGEND

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

6 Replies

MP Michael Prabhu M Syncfusion Team 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
 



BA Bamame 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


BA Bamame replied to Bamame 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>


MP Michael Prabhu M Syncfusion Team 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 
 
 



BA Bamame January 10, 2019 09:07 AM UTC

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


MP Michael Prabhu M Syncfusion Team 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 



Loader.
Live Chat Icon For mobile
Up arrow icon