Set color of series labels

[Bruno]

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

[Stefan Nenchev]

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

[Ivailo]

Hi Stefan, 

Can you provide an Android example for the same thing if possible ?

[Lance | Manager Technical Support]

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