Label for PieChart

4 posts, 0 answers
  1. Frank
    Frank avatar
    28 posts
    Member since:
    May 2006

    Posted 29 Aug Link to this post

    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 :)

  2. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1048 posts

    Posted 29 Aug Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Frank
    Frank avatar
    28 posts
    Member since:
    May 2006

    Posted 30 Aug in reply to Lance | Team Lead - US DevTools Support Link to this post

    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

     

     

  4. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1048 posts

    Posted 30 Aug Link to this post

    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

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top