ChartView for Xamarin.Android: Annotations
In this article, you will learn to use the annotations feature in RadChartView for Xamarin.Android and also how to create custom annotations.
Overview
Annotations are visual elements used to highlight certain areas on the plot. They can be used as comments or as markers for specific values on the plot. You can practically use any visual element as template for the annotation.
RadChartView provides support for the following types of annotations:
- GridLineAnnotations: this annotation is visually represented by straight lines across the chart that marks a specific value on the associated Cartesian axis.
- PlotBandAnnotations: this annotation is visually represented by a band across the chart that marks a specific range on the associated Cartesian axis.
- CustomAnnotations: this annotation marks a specific point on the Cartesian chart. It requires both horizontal and vertical coordinates to be specified.
You can read from the Bar Series page how to create a simple chart with BarSeries which we will now extend to include annotations.
Grid Line Annotations
The GridLineAnnotation represents a vertical or horizontal line that crosses the entire plot area.
Here is an example that demonstrates how to define a vertical CartesianGridLineAnnotation in the chart that we have created. In the constructor of the annotation you need to specify the axis that will be annotated and the value which determines the position.
Here's the result:
You can modify the width and the color of the annotation with the StrokeWidth and StrokeColor properties of the annotation as shown in the example.
Optionally you can also provide a PathEffect
that will be used for the line that is drawn by using the StrokeEffect property. For example if you want to have a dashed line, instead of solid, you can use the following approach:
Plot Band Annotations
The PlotBandAnnotation represents a vertical or horizontal area that crosses the entire plot area.
Here is an example that demonstrates how to define a vertical CartesianPlotBandAnnotation in the chart that we have created. In the constructor of the annotation you need to specify the axis that will be annotated and the two values that will determine the range for the annotation.
Here's the result:
You can modify the fill of the annotation as well as the width and the color of its stroke with the methods FillColor, StrokeWidth and StrokeColor properties as shown in the example.
Additionally, you can also provide a PathEffect that will be used for the line that is drawn by using the StrokeEffect property.
Custom Annotations
The CustomAnnotation provides a way to draw custom annotations. In the constructor of the annotation you need to specify both vertical and horizontal axes as well as values for both of them. They will be used to determine the position for the annotation.
Here's the constructor for CartesianCustomAnnotation
to better prepare you for using it.
When the axis is numerical (Linear or Logarithmic) a numeric value is expected, and when it is categorical - a category is expected.
You also need to set the content for the annotation, which can be text or something more complex like a Bitmap. Let's explore both of those possibilities.
Custom Text Annotation
Here's an example which adds a text annotation to a specific position in the chart that we have created.
Now the annotation will be the text TARGET
and it will be drawn where the vertical axis has value 6
and the horizontal axis has value Feb
. Additionally, you can provide a custom renderer for the annotation with the property ContentRenderer. The custom renderer must implement the interface CustomAnnotationRenderer.
Here is an example for such a renderer which draws a text annotation with custom style:
Now, use a new instance of the CustomTextRenderer
with the CartesianCustomAnnotation
ContentRenderer property.
Here's the result:
Custom Image Annotation
You can use the same code we just used for the Text annotation. However, this time we'll use a Bitmap
instead of a string for the content.
Notice in the Render method, you are given a
Canvas
parameter? This is what you are drawing the custom content to. You can use any of the Android Canvas's features, such asDrawBitmap
.
To use it, pass it a valid Bitmap
object to the CartesianCustomAnnotation
and set the ContentRender to a new instance of custom ImageAnnotationRenderer
class.
Here's the result at runtime: