Set color of series labels

4 posts, 0 answers
  1. Bruno
    Bruno avatar
    1 posts
    Member since:
    Jun 2017

    Posted 01 Jun 2017 Link to this post

    Hi, I´m trying to set the color of the labels of a serie, due to the fact that with iOS the color of the labels is always black and it doesn´t take into account any of the colors set in the pallet. Moreover, it doesn´t establish the background color as it does in Android. I already read all the posts related and i found nothing that can help me with this issue.

     

    The images attached are an example of yours with the labels on for the fourth serie in android and iOS.

    Regards,

    Bruno Torterolo

  2. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    665 posts

    Posted 05 Jun 2017 Link to this post

    Hi Bruno,

    In order to modify the labels in the iOS Platform, you need to create a custom renderer and work with the native control. Eventually, I suggest you have a look at the iOS Chart Control documentation for more information on what customizations can be achieved. More specifically, you can have a detailed look at the following page - Point Labels: Customizations. I am here providing a possible implementation of a custom renderer that changes the color of the label:

    //argument needed to register the renderer
    [assembly: Xamarin.Forms.ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadPieChart), typeof(MyChartRenderer))]
      
    namespace TelerikXamarin.iOS.CustomRenderer
    {
        public class MyChartRenderer : Telerik.XamarinForms.ChartRenderer.iOS.PieChartRenderer
        {
            protected override TKChartDelegate CreateChartDelegate(RadPieChart chart)
            {
                return new MyChartDelegate(chart);
            }
        }
      
        public class MyChartDelegate : Telerik.XamarinForms.ChartRenderer.iOS.PieChartDelegate
        {
            public MyChartDelegate(RadPieChart chart) : base(chart)
            {
            }
            public override TKChartPointLabel LabelForDataPoint(TKChart chart, TKChartData dataPoint, string propertyName, TKChartSeries series, nuint dataIndex)
            {
                TKChartDataPoint chartDataPoint = (TKChartDataPoint)dataPoint;
                return new MyChartPointLabel(chartDataPoint, series, chartDataPoint.DataXValue.ToString());
            }
        }
      
        public class MyChartPointLabel : TKChartPointLabel
        {
            public MyChartPointLabel(TKChartDataPoint point, TKChartSeries series, string text) : base(point, series, text)
            {
                this.Style.TextColor = UIColor.White;
            }
        }
    }

    I have also attached a sample application for your reference. I hope it will be helpful.

    Regards,
    Stefan Nenchev
    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. Ivailo
    Ivailo avatar
    17 posts
    Member since:
    Jul 2013

    Posted 01 Aug 2018 in reply to Stefan Nenchev Link to this post

    Hi Stefan, 

    Can you provide an Android example for the same thing if possible ?
  4. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1193 posts

    Posted 01 Aug 2018 Link to this post

    Hello Ivailo,

    You can find a demo of setting the label properties in this GitHub repo: Custom Series Labels

    There are three platform projects, each contain a Xamarin Effect class that sets the native chart's properties for customizing labels.

    For Android, this is the relevant code:

    // Get a reference to the native chart control
    if (Control is RadCartesianChartView nativeChart)
    {
         // Iterate over the series
         for (int i = 0; i < nativeChart.Series.Size(); i++)
         {
             // Get a reference to the series you need, in this case it's a spline series
             if (nativeChart.Series.Get(i) is SplineAreaSeries series)
             {
                 // Set the Label properties you want
                 series.LabelFillColor = Color.Red;
                 series.LabelTextColor = Color.White;
            }
        }
    }

    Regards,
    Lance | Tech Support Engineer, Sr.
    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