Add text next to Chart Cartesian GridLine Annotation
Environment
Product Version | 2021.3.1110.1 |
Product | Chart for Xamarin Cross-Platform |
Description
This article will show you how-to add a text to the chart gridline annotation.
Solution
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)
{
base.OnElementChanged(e);
if (this.Control != null)
{
var annotationValue = 30;
var annotationCategory = "Greenings";
var annotationContent = "TARGET";
var annotation = new CartesianCustomAnnotation(
this.Control.VerticalAxis,
this.Control.HorizontalAxis,
annotationValue,
annotationCategory,
annotationContent);
annotation.ContentRenderer = new CustomTextRenderer();
this.Control.Annotations.Add(annotation);
}
}
}
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)
{
return;
}
var text = content.ToString();
canvas.DrawText(
text,
(float)layoutSlot.GetX() - (float)(layoutSlot.Width / 2.0),
(float)layoutSlot.Bottom - (float)layoutSlot.Height / 2,
contentPaint);
}
}
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.