New to Telerik UI for Xamarin? Download free 30-day trial

Add text next to Chart Cartesian GridLine Annotation


Product Version 2021.3.1110.1
Product Chart for Xamarin Cross-Platform


This article will show you how-to add a text to the chart gridline annotation.


There isn't a built-in API that allows you to add text on the annotation. for iOS and Android you need to implement a custom annotation using custom renderer.

For Android

You need to use the CartesianCustomAnntoation to add a text anotation.

Create a custom renderer for Android. For example create a class CustomChartRenderer inside the Android project. The class must inhetirs from CartesianChartRenderer.

Then override the OnElementChanged method and create the custom annotation:

public class CustomChartRenderer : CartesianChartRenderer
    public CustomChartRenderer(Context context) : base(context)


    protected override void OnElementChanged(ElementChangedEventArgs<RadCartesianChart> e)

        if (this.Control != null)
            var annotationValue = 30;
            var annotationCategory = "Greenings";
            var annotationContent = "TARGET";

            var annotation = new CartesianCustomAnnotation(
            annotation.ContentRenderer = new CustomTextRenderer();


And the CustomTextRenderer class which is used for creating the text for the custom annotation:

public class CustomTextRenderer : Java.Lang.Object, ICustomAnnotationRenderer
    private readonly Paint contentPaint = new Paint();

    public CustomTextRenderer()
        contentPaint.TextSize = 36;
        contentPaint.Color = Android.Graphics.Color.Red;
        contentPaint.SetTypeface(Typeface.Create("sans-serif-light", TypefaceStyle.Normal));

    public RadSize MeasureContent(Java.Lang.Object content)
        if (content == null)
            return RadSize.Empty;

        var text = content.ToString();
        var textBounds = new Android.Graphics.Rect();

        contentPaint.GetTextBounds(text, 0, text.Length, textBounds);

        return new RadSize(textBounds.Width(), textBounds.Height());

    public void Render(
        Java.Lang.Object content,
        RadRect layoutSlot,
        Canvas canvas,
        Paint paint)

        if (content == null)

        var text = content.ToString();

            (float)layoutSlot.GetX() - (float)(layoutSlot.Width / 2.0),
            (float)layoutSlot.Bottom - (float)layoutSlot.Height / 2,

For iOS

You need to use one of the annotations described here: Annotations. For example, Layer and View annotation or TKChartBalloonAnnotation.

When using Layer annotation, the example shows how to add image to the chart:

UIImageView imageView = new UIImageView ();
imageView.Image = UIImage.FromBundle ("logo.png");
imageView.Bounds = new CGRect (0, 0, imageView.Image.Size.Width, imageView.Image.Size.Height);
imageView.Alpha = 0.7f;
chart.AddAnnotation (new TKChartViewAnnotation(imageView, new NSNumber(550), new NSNumber(90), chart.Series[0]));

Replace the image with UILabel, so you can display text inside the TKChartViewAnnotation.

In this article