Chart legends showing on iPhone but not on Android

[Sajid Ali]

Hi Syncfusion Team!

We are using Syncfusion Charts to display Doughnut chart in our trial app. We have set the legends property. The legend is showing fine in iPhone but not even displaying at Android.

[Sajid Ali]

Hi Syncfusion Team!

We are using Syncfusion Charts to display Doughnut chart in our trial app. We have set the legends property. The legend is showing fine in iPhone but not even displaying at Android.

Further details of the problem:

1.  Chart Legends only show on iPhone when we click on Doughnut chart datapoint. But it does not even show on Android in any case.

2.  Here is the following code, we are using to render the chart:

       private static SfChart GetChart()

        {

            var chart = new SfChart

            {

                Legend = new ChartLegend

                {

                    DockPosition = LegendPlacement.Bottom,

                    ToggleSeriesVisibility = true,

                    IconHeight = 20,

                    IconWidth =  20

                },

                HorizontalOptions = LayoutOptions.FillAndExpand,

                VerticalOptions = LayoutOptions.FillAndExpand

            };

            var doughnutSeries = new DoughnutSeries

            {

                ConnectorLineType = ConnectorLineType.Bezier,

                DataMarkerPosition = CircularSeriesDataMarkerPosition.OutsideExtended,

                DataMarker = new ChartDataMarker(),

                EnableDataPointSelection = true

            };

            doughnutSeries.SetBinding(ChartSeries.ItemsSourceProperty, new Binding("GigsData"));

            doughnutSeries.DataMarker.LabelStyle.Margin = new Thickness(5);

            chart.Series.Add(doughnutSeries);

            return chart;

        }

3. There is also no tooltip in Doughnut chart. How we can achieve this functionality.

[Yuvaraj Palanisamy]

Hi Sajid,

Thanks for contacting Syncfusion support.

1. We have analyzed the reported issue in different scenario and we are unable to reproduce the reported issue at our end, we request you to download our latest version of Syncfusion Xamarin Studio from the following location.

http://www.syncfusion.com/forums/118723/essential-studio-2015-volume-1-final-release-v13-1-0-21-available-for-download

2. We have created a sample based on your code snippet, and this code working fine in our end without any issue in Android, please find the screenshot from the following location.

Screenshot: http://www.syncfusion.com/downloads/support/forum/119607/ze/DoughnutLegend-647469196

If you still face the same issue, please revert us with your Xamarin.Forms version and the device which you used to test, which will be helpful for us to assist you better.

3. We have created a support incident under your account to track the status of this issue.

Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

Please let me know if you have any questions.

Thanks,
Yuvaraj

[Sajid Ali]

Hi Yuvarj!

Thanks for the quick response. We are running the app on latest Android models. Our issue is, when we provide static data to the chart, then the legends work fine, but when we provide dynamic data (through Synchronous API calls) to chart by using MVVM pattern, then the legends do not show on Android. 

In case it is our side issue, can you please provide us a working sample with MVVM pattern bounded data.

Best Regards,

Sajid Ali.

[Yuvaraj Palanisamy]

Hi Sajid,

We are still unable to reproduce the issue at our end. We have prepared a sample to feed the data to Chart synchronously using MVVM pattern, please refer the sample from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119607/ze/ChartSample-616845189

Please revert us with the modified sample if you reproduce the issue from your side, which would be helpful for us to assist you better.

Please let us know if you require further assistance on this.

Thanks,
Yuvaraj

[Sajid Ali]

Thanks for you timely response 

your sample work great for legends but am still facing issue.

this is your code

Binding binding = new Binding();            

binding.Source = new ViewModel();

binding.Path = "Data";

doughnutSeries.SetBinding(ChartSeries.ItemsSourceProperty, binding);

by using this code it work in your sample but i want it is not working in my project. am using xaml syntax using xamarin.forms.

i also try same sample code in my project but no result.

1. How i can convert this code to xaml syntax. please provide xaml syntax.

2. below i attached xaml code from my project please look into code thanks.

here is my attached xaml.

 i also attached android screen shoot you can see there is no legends.

i think if i set itemsource according your provide binding code may be it will show legends right now its not showing legends.

<chart:SfChart HorizontalOptions="FillAndExpand" x:Name="DoughnutChart" VerticalOptions="FillAndExpand" SelectionChanged="SfChart_OnSelectionChanged">

                                <chart:SfChart.BindingContext>

                                    <local:DailyMetricsViewModel/>

                                </chart:SfChart.BindingContext>

                                <chart:SfChart.Legend>

                                    <chart:ChartLegend DockPosition="Bottom">

                                        <chart:ChartLegend.LabelStyle>

                                            <chart:ChartLegendLabelStyle Font="7"/>

                                        </chart:ChartLegend.LabelStyle>

                                    </chart:ChartLegend>

                                </chart:SfChart.Legend>

                                <chart:DoughnutSeries DataMarkerPosition="OutsideExtended" ItemsSource="{Binding GigsData}" IsVisibleOnLegend="True"

                                ConnectorLineType="Line" EnableDataPointSelection="True">

                                    <chart:DoughnutSeries.ColorModel>

                                        <chart:ChartColorModel Palette="Custom">

                                            <chart:ChartColorModel.CustomBrushes>

                                                <Color>#F7941D</Color>

                                                <Color>#00BBBB</Color>

                                                <Color>#FFCC33</Color>

                                                <Color>#ACD373</Color>

                                                <Color>#D63B2D</Color>

                                                <Color>#f2594b</Color>

                                            </chart:ChartColorModel.CustomBrushes>

                                        </chart:ChartColorModel>

                                    </chart:DoughnutSeries.ColorModel>

                                    <chart:DoughnutSeries.DataMarker>

                                        <chart:ChartDataMarker LabelContent="YValue">

                                            <chart:ChartDataMarker.LabelStyle>

                                                <chart:DataMarkerLabelStyle Font="25" Margin="2">

                                                </chart:DataMarkerLabelStyle>

                                            </chart:ChartDataMarker.LabelStyle>

                                        </chart:ChartDataMarker>

                                    </chart:DoughnutSeries.DataMarker>

                                </chart:DoughnutSeries>

                            </chart:SfChart>

Attachment: android_legends_759f4c4b.zip

[Yuvaraj Palanisamy]

Hi Sajid,

We have created a sample using XAML page as per your requirement. Please find the sample from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/119607/ze/SimpleSample-7182812

We have also attached the screen shot for the above sample, please find it from the following location.

Screen Shot: http://www.syncfusion.com/downloads/support/forum/119607/ze/DoughnutLegend122959128

Please revert us with the modified sample along with the application procedure if issue is still reproduced in your side, which would be helpful for us to assist you better.

Please let us know if you require further assistance on this.

Thanks,
Yuvaraj