Displaying Labels in Sections of a doughnut graph.

[Spotty]

I have a doughnut graph that shows the sections correctly but I'd like to show the text in each section.

The example shows this with percentage values in the sections.

I cant find how to display the %,   Display the Values,   Display the Item itself (ie. Labor, Production, License, Tax , Other) in the section on the doughnet chart.

So if my graph consisted of 3 sections.

Correct, 5

Skipped,3

Incorrect,2

Then I'd like to be able to display either

("Correct", "Skipped","Incorrect") in the segments.

(5,3,2) in the segments.

(50%,30%,20%) in the segments.

I've attached the screenshot image to show what I'm talking about.

Attachment: doughnut1_ca9afdf8.zip

[Devakumar Dhanapoosanam]

Hi Spotty, 

 

Greetings from Syncfusion. 

 

We have analyzed your query and we hope that the below UG and KB article will help to achieve your requirement. 

 

Query: How to display the % 

 

UG Link: https://help.syncfusion.com/xamarin/charts/datamarker#formatting-label-content  

 

Query: How to display the Values,  Display the Item itself (ie. Labor, Production, License, Tax , Other) in the section 

 

KB Link: https://www.syncfusion.com/kb/8714/how-to-display-underlying-model-values-in-xamarin-forms-chart-data-marker  

 

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

 

Regards, 

Devakumar D 

[Spotty]

Thanks for the update but there is still a problem.

Example code

            Chartx.Title = new ChartTitle() { Text = "Chartx" };

            Chartx.Legend = new ChartLegend();

            Chartx.Legend.LabelStyle.TextColor = Color.Blue;

            Chartx.Legend.LabelStyle.Margin = 5;

            Chartx.Legend.IsVisible = false;

            Chartx.Series.Clear();

 

            PieSeries doughnutSeries = new PieSeries()

            {

                ItemsSource = Data1,

                XBindingPath = "Item",

                YBindingPath = "Value",

                ExplodeAll = true,

                DataMarkerPosition = CircularSeriesDataMarkerPosition.Inside,

                ColorModel = new ChartColorModel()

                {

                    Palette = ChartColorPalette.Custom,

                    CustomBrushes = new ChartColorCollection()

                    {

                        Color.Green,

                        Color.Yellow,

                        Color.Red,

                        Color.Gray,

                        Color.Pink,

                    }

                }

              

        };

//This Line

            doughnutSeries.DataMarker.LabelContent = LabelContent.Percentage;

            Chartx.Series.Add(doughnutSeries);

            Chartx.Legend.IsVisible = true;

 

With this line commented out - everything works but no percentage is shown.   With the line commented in, it throws an exception.

System.NullReferenceException

  Message=Object reference not set to an instance of an object.

Using the XAML provided with the

<ContentPage 

xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"

             xmlns:rangenavigator="clr-namespace:Syncfusion.RangeNavigator.XForms;assembly=Syncfusion.SfChart.XForms"

             xmlns:local="clr-namespace:ChartSample;assembly=ChartSample"

xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

   x:Class="ChartSample.MyPage">

...

<chart:DoughnutSeries.DataMarker>

                    <chart:ChartDataMarker>

                        <chart:ChartDataMarker.LabelTemplate>

                            <DataTemplate>

                                <StackLayout Orientation="Horizontal">

                                    <Label FontSize="12" TextColor="White" Text="{Binding Name, StringFormat='{0} : '}" />

                       

                                </StackLayout>

                            </DataTemplate>

                        </chart:ChartDataMarker.LabelTemplate>

                    </chart:ChartDataMarker>

                </chart:DoughnutSeries.DataMarker>

                

Appears to reveal The attachable property 'DataMarker' was not found in type 'DoughnutSeries'.

So perhaps more xmlns are required or something else is missing.

Providing fragments of code rather than simple working samples means that if something is missing its difficult to find appropriate part.  Whereas if the sample is complete then it is easier to extract relevent code.

[Devakumar Dhanapoosanam]

Hi Spotty, 

 

We have analyzed the provided code snippet and we suspected that you have not initialized the DataMarker for the DoughnutSeries hence only getting the null exception. 

 

Please refer the below UG for more details: 

UG: https://help.syncfusion.com/xamarin/charts/datamarker?cs-save-lang=1&cs-lang=csharp 

 

Also, we have achieved your requirement using the DataMarkerLabelCreated event as in below code snippet,  

 

XAML: 

… 

<chart:SfChart x:Name="chart"  

                       HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 

     …. 

     <chart:SfChart.Series> 

                <chart:DoughnutSeries x:Name="series" ItemsSource="{Binding Data}"  

                                      XBindingPath="Item" YBindingPath="Value"  

                                      DataMarkerLabelCreated="Series_DataMarkerLabelCreated" > 

                    <chart:DoughnutSeries.DataMarker> 

                         <chart:ChartDataMarker LabelContent="Percentage"> 

                         </chart:ChartDataMarker> 

                    </chart:DoughnutSeries.DataMarker> 

                </chart:DoughnutSeries> 

      </chart:SfChart.Series> 

       … 

</chart:SfChart> 

 

C#: 

… 

private void Series_DataMarkerLabelCreated(object sender, ChartDataMarkerLabelCreatedEventArgs e) 

{ 

     string label = e.DataMarkerLabel.Label; 

     e.DataMarkerLabel.Label = (e.DataMarkerLabel.Data as Model).Item + " : " + label; 

} 

… 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151829/ze/151829_sample-1750502441.zip  

 

ScreenShot: 

 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D