Xuni FlexChart Annotations Deep Dive

Chart annotations are a great way to call attention to specific details in your charts. As a new addition to FlexChart in Xuni 2016v1, we've introduced a number of different annotation types and configuration options. In this article, we'll highlight these different configuration options, and provide a few common use cases for chart annotations.

Annotation Options

There are a number of different types of annotations available for FlexChart. Annotations come in a variety of shapes and sizes. We'll cover the major configuration options as we go. Types of annotations* Image

• Ellipse
• Rectangle
• Polygon
• Line
• Text Visually, the annotations are what you would expect: Attachment (Position) The attachment property partially dictates how the annotations will be positioned on the chart. There are four types of attachment to help position your annotations as you see fit. The attachment types are:* Absolute – coordinates of the annotation specified in pixels
• DataCoordinate – coordinates specified in data coordinates
• DataIndex – coordinates specified by the series index and point index

• Relative – coordinates specified relatively where (0, 0) represents the top left and (1, 1) represents the bottom right If we revisit the screenshot from above, we'll see that each annotation has a different attachment configuration. The other properties are mostly dedicated to controlling things like height, width, visibility, and further positioning. A list of the other properties is available here. As the above screenshot demonstrates, annotations also have their own configurable tooltips which can provide some additional information when needed. Implementing annotations is quite simple too. Creating the annotations can easily be done in any language, but here's the specific Xaml implementation used in Xamarin.Forms. You need to be sure that your annotations are added to the annotation collection, but otherwise it's very direct configuration. ~~~

  xuni:FlexChart.Annotations

  <core:ChartPolygonAnnotation x:Name="polygonAnnotation" Text="Absolute"  
                               Color="#FFFE2E2E" BorderColor="#FF01A9DB" BorderWidth="3">  
    <core:ChartPolygonAnnotation.Points>  
      <Point X="60" Y="30"/>  
      <Point X="10" Y="80"/>  
      <Point X="35" Y="130"/>  
      <Point X="85" Y="130"/>  
      <Point X="110" Y="80"/>  
    </core:ChartPolygonAnnotation.Points>  
  </core:ChartPolygonAnnotation>  
  <core:ChartEllipseAnnotation x:Name="ellipseAnnotation" Point="0.8,0.2" Width="110" Height="80" Text="Relative" Attachment="Relative"   
                               Color="#FFF5BC78" BorderColor="#FFC2955F" BorderWidth="2" />  
  <core:ChartLineAnnotation x:Name="lineAnnotation" Color="#FF3F48CC" LineWidth="4" Attachment="DataCoordinate"  
                            Start="{Binding PointStart}" End="{Binding PointEnd}"/>  
  <core:ChartTextAnnotation x:Name="textAnnotation" Text="Data Coordinate" Attachment="DataCoordinate"  
                            Point="{Binding PointStart}" Position="Right" Offset="0,-20"/>  
  <core:ChartImageAnnotation x:Name="imageAnnotation" Offset="0,20" Width="80" Height="80" PointIndex="2" Attachment="DataIndex"   
                             Source="{Binding ImageSource}" />  
  <core:ChartRectangleAnnotation x:Name="rectAnnotation" Width="80" Height="80" PointIndex="6" Position="Bottom" Attachment="DataIndex"  
                                  Text="Data&#10;Index" Color="#FFB5E627" BorderColor="#FF22B14C" BorderWidth="4" />  
  

  </xuni:FlexChart.Annotations>

~~~

Situations for Annotation

Now that we've covered some of the options available for configuring annotations, let's take a look at a few use-cases where they could provide a helpful chart enhancement. Threshold One scenario is to provide a horizontal line as a visual over/under signifier onto your chart. Using a line annotation as a threshold, you can make it easy to visually determine when you above or below a goal. Banding Another use potential use is to draw attention to a specific area of chart by drawing a partially transparent shaded region. Especially for time related data, this let's you emphasize a certain period of important data. Static tooltip You can also use a static annotation as a space saving mechanism by transplanting your tooltip data into a specific static area. Callouts This is simply a way to draw annotation to a specific point on the chart. Maybe you want to make a note of positive or negative change, or perhaps indicate some outside factor that was concurrent to a datapoint in the chart (such as hitting a goal, a major policy change, etc.). Trend line Another use is simply to draw a line indicating chart trend. This can allow your users to more quickly absorb the overall performance of a chart that includes many data points.

Wrap up

Annotations allow an easy path for emphasizing the important data in your chart. They make it easy to draw attention to significant details, and provide clever ways to better communicate your data. Check out the Annotation sample that is part of FlexChart101 for Xamarin.Forms, iOS, and Android.