Label for PieChart

[Frank]

Hi,

I'm trying to displays the count of items instead of the percent value as label in my PieChart. I tried to use a CustomLabelRenderer as shown in the documentation (Chart Labels Customization) without success.

Maybe someone can share some simple sample code for for my problem :)

[Lance | Manager Technical Support]

Hi Frank,

The best way for you to achieve this, without going into native platform code, is to just add a property to the model class that you can use the LabelBinding.

As an example, let's add a string property to the model just for the purposes of being a nice place to store the text you want for the label:

public class CategoricalData
{
    public object Category { get; set; }

    public double Value { get; set; }

    // Added to model for Pie series and legend labels
    public string ForPieLabel { get; set; }
}

Now, you can use that for the LabelBinding of the PieSeries (and also the LegendTitleBinding if you want):

<chart:RadPieChart>
    <chart:RadPieChart.Series>
        <chart:PieSeries ItemsSource="{Binding Data}"
                         ValueBinding="Value"
                         ShowLabels="True"
                         LabelBinding="ForPieLabel"
                         LegendTitleBinding="ForPieLabel"/>
    </chart:RadPieChart.Series>
</chart:RadPieChart>

Finally, to complete the picture, this will let you update that value whenever you need to. In this example, I create the label text after the data it created:

public class PieViewModel
{
    public PieViewModel()
    {
        this.Data = GetCategoricalData();

        foreach (var item in Data)
        {
            var someCountValue = item.Value / 2;

            // You can create the label text after-the-fact
            item.ForPieLabel = $"Count {someCountValue}";
        }
    }

    public ObservableCollection<CategoricalData> Data { get; set; }

    private static ObservableCollection<CategoricalData> GetCategoricalData()
    {
        var data = new ObservableCollection<CategoricalData>
        {
            new CategoricalData { Category = "Greenings", Value = 52 },
            new CategoricalData { Category = "Perfecto", Value = 19 },
            new CategoricalData { Category = "NearBy", Value = 82 },
            new CategoricalData { Category = "Family", Value = 23 },
            new CategoricalData { Category = "Fresh", Value = 56 },
        };

        return data;
    }
}

Here is the result at runtime:

Because the ForPieLabel property is a string, you can combine everything you need to show in the label. for example, if I wanted to show both the name of the category and the custom count value, I could do something like this:

item.ForPieLabel = $"{item.Category} Count {someCountValue}";

I've attached the page all of this code is in.

Note: If you have any further issues and need direct assistance, please open a Support ticket with the account that you have a license for UI for Xamarin with (your current account has never had a trial or commercial Xamarin license).

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Frank]

Thanks for the detailed answer :)

Is there a way to set the LabelBinding programmatically, since I create a dynamic amount of PieCharts in my Layout and I create the PieSeries programmatically just like you did in your example code: PieChartView PieSeries

 

 

[Lance | Manager Technical Support]

Hello Frank,

Are you using Xamarin.Forms or Xamarin.Android? When you mentioned custom label renderer, I mistook it for a XF Custom Renderer. My apologies, the details in my last reply will not apply to your scenario because it's the Xamarin.Forms API.

In your case, you will need to move forward with your original Xamarin.Android custom label renderer. In that class, you will have access to the data object and use that object's properties to set the text on the Xamarin.Android view.

We do not have any examples for such a custom approach with Pie series, but you can take a look at how I do it in this example - https://github.com/LanceMcCarthy/CustomXamarinDemos#customserieslabels 

Although it's a Xamarin.Forms solution, you can drill down to the Xamarin.Android project and look at the label renderer classes. - https://github.com/LanceMcCarthy/CustomXamarinDemos/tree/master/CustomSeriesLabels/CustomSeriesLabels/Android/Effects

You'll see the method that renders the text, in there you can access your data object and use the property values to determine what you want to be used for the label's text:

Ultimately, what you return from GetLabelText is going to be used for the label.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik