Add Chart Annotations in WinForms, WPF, and UWP

One of the powerful ways of drawing your user’s attention to chart data is through annotations. As the name suggests, annotations let you add textual notes, shapes and images to highlight important data points of the plotted data. When we visualize data in charts, it is not just about depicting the data; it's about making it meaningful. Annotation provide additional information that may not be represented by basic X and Y values. With the 2016 v3 release of C1Studio, Annotations have been made available in FlexChart for WinForms, WPF and UWP to further empower your data visualization needs.

Download C1Studio's Free Trial

In this blog, we'll walk you through on how you can use Annotations in FlexChart:

Adding Annotations
Annotation Options
Positioning Annotations
Styling Annotations
Effectiveness of Annotations

Adding Annotations: Create an AnnotationLayer and Add the Annotation Object

Annotations in FlexChart are added as layers, so you can add multiple annotations of different shapes and sizes. Adding annotations to FlexChart is simple two-step process:

First, add an AnnotationLayer that will hold the collection of annotations for a chart;
Then add the Annotation object to the AnnotationLayer.

Here's how to add the AnnotationLayer to desktop apps. WinForms

var annotationLayer = new AnnotationLayer(flexChart);

WPF/UWP

var annotationLayer = new AnnotationLayer();  
flexChart.Layers.Add(annotationLayer);

Each annotation object provides an API to specify the annotation's text, location, and characteristics based on the annotation type. The following is a snippet to create Annotation object and add to the Annotation Layer:

var annoObject = new C1.Win.Chart.Annotation.Text()  
{  
//Configure Annotation here  
Content = "y = log x",  
Attachment = AnnotationAttachment.Relative,  
Location = new PointF(0.1f, 0.05f)  
};  
annotationLayer.Annotations.Add(annoObject);

Basic FlexChart with Annotation

Annotation Types

Let's look at the various options available for adding annotations based on your requirements. FlexChart comes with eight different types of annotations that can be broadly classified in following three categories.

Text annotations

If you need to provide a detailed description of the chart, highlight additional information for a specific data point, or let user know about the mathematical formula that generates the drawn series, Text annotations allow you to add single or multi-line notes to your chart Here’s an example to add Text annotations to the FlexChart:

var dangerText = new Text();  
dangerText.Content = "Dangerous";  
dangerText.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataIndex;  
dangerText.PointIndex = 5;  
annotationlayer.Annotations.Add(dangerText);  

var description = new Text();  
description.Content = "Research suggests that safe exposure limit is 85 decibels for 8 hours a day." + Environment.NewLine + "Your hearing could be at risk of damage if you are continually exposed " + Environment.NewLine + "to high volume sounds";  
description.Attachment = C1.Chart.Annotation.AnnotationAttachment.Relative;  
description.Location = new PointF(0.2f, 0.1f);  
annotationlayer.Annotations.Add(description);

Single- and multi-line text annotations in FlexChart

Shape-based annotations

Shape-based annotations allow you to draw your user's attention to an individual or a group of data points. Shapes (especially geometric) are essential for the visual impact. FlexChart provides you with six different shape annotations:

Line
Square
Rectangle
Circle
Ellipse
Polygon

Along with the shape, you can also display the textual information by specifying Annotation's Content property. Here's how to add a Rectangle-shaped annotation to the FlexChart:

//_data is used as chart's DataSource  
var maxSales = _data.Select(x => x.Sales).Max();  
var item = _data.First(x => x.Sales == maxSales);  
var rect = new C1.Win.Chart.Annotation.Rectangle  
{  
Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate,  
Content = string.Format("Maximum Sales Recorded in {0}\\nAmount:{1:C}", item.Month, item.Sales),  
Location = new PointF { X = _data.IndexOf(item), Y = (float)item.Sales },  
Height = 50,  
Width = 200,  
Position = C1.Chart.Annotation.AnnotationPosition.Top  
};  

rect.Style.FillColor = Color.Transparent;  
annotationLayer.Annotations.Add(rect);

The chart clearly indicates which month had maximum sales: Shape-based annotations in FlexChart

Image annotations

Image annotations are helpful when you want to display images on the chart surface to let the end user quickly relate with the plotted data, like up/down arrows icons for profit/loss, or company logos to easily associate with the brand. The Image annotation can be made more informative by displaying Tooltip next to it. You can specify TooltipText property in any annotation object. Here's how to add an Image annotation with tooltip to the FlexChart:

 var android = new C1.Win.Chart.Annotation.Image  
{  
Attachment = C1.Chart.Annotation.AnnotationAttachment.DataIndex,  
PointIndex = 0,  
SourceImage = Properties.Resources.Img_Android,  
Height = 64,  
Width = 64,  
Position = C1.Chart.Annotation.AnnotationPosition.Bottom,  
TooltipText = "Sales of Android smartphones grew by 15%."  
};  

annotationLayer.Annotations.Add(android);

With image annotations in the following chart, you can see how much easier it becomes to visualize mobile sales data of each operating system. The logos are more visually compelling than text would be. Image annotations in FlexChart Check out the AnnotationExplorer sample (Win | WPF | UWP) for details on adding Annotations of all types.

Positioning Annotations

You may have a requirement with regards annotation placement: at a fixed or relative position, or attached to specific value or series. FlexChart offers you complete flexibility by allowing you to specify how you want to attach the annotations via AnnotationAttachment property. The different annotation position requirement and options available with FlexChart are:

Absolute: You want to restrict the annotation from moving and always display, either when the application is resized or the plot area is being scrolled. In this case, specify the AnnotationAttachment property to be Absolute wherein the coordinates of the annotation are specified in pixel coordinates.
Relative: You want the Annotation to maintain its position from the Plot margins when the chart is being resized. The location of the annotation should be specified as relative position within the chart with (0,0) being the top left corner and (1,1) being the bottom right corner of the chart.
DataCoordinate: You're displaying information for a specific data point and want the annotation to be attached to specific X-Y value on the chart. The annotation’s location should be specified as data-coordinate values.
DataIndex: You need to attach annotations to series instead of values, especially in case of multiple series chart. Specifying AnnotationAttachment to DataIndex lets you define location of annotation by specifying SeriesIndex and PointIndex values. Please note that the SeriesIndex and PointIndex values apply only when the Attachment is DataIndex. For other Attachment values, if specified, the SeriesIndex and PointIndex are not taken into consideration.

Positioning annotations in FlexChart In addition to these, an annotation can also be positioned relative to the point it has been attached to, i.e you can place the annotation to the Top/Left/Right/Bottom/Center of the point.

Styling Annotations

Being able to customize the appearance of a chart element is one of most basic and important needs for a chart user. FlexChart continues to provide the same with the Annotation feature as well. You have options to customize the appearance of annotations as well as its content via the Style and ContentStyle properties. Following is an example on how to customize the appearance of a shape based annotation:

var rect = new C1.Win.Chart.Annotation.Rectangle();  
//TODO: configure the annotation  

//Customize the Rectangle  
rect.Style.FillColor = Color.CornflowerBlue;  
rect.Style.StrokeColor = Color.Blue;  
rect.Style.StrokeDashPattern = new[] { 2f, 3f };  

//Customize the Rectangle's Content  
rect.ContentStyle.StrokeColor = Color.White;  
rect.ContentStyle.Font = new Font(flexChart.Font.FontFamily,9,FontStyle.Bold);  
var annotationLayer = new AnnotationLayer(flexChart);  
annotationLayer.Annotations.Add(rect);

Styling annotations in FlexChart

Effectiveness of Annotations

When you've been studying and manipulating data for a long time, you may be able to understand a chart immediately. But you'll also want to make the chart as instantly understandable for your users. It's important to review your chart from the perspective of your audience, who may be viewing the data for the first time. Let's understand this by visualizing a store footfall data and how annotations can help you facilitate the understanding of your audience. The following chart visualizes the trend of the number of visitors in a store. We can make two instant observations:

At certain small intervals of time, there's a slight increase in the footfall.
On few occasions, there is a very sharp increase in the footfall.

Store footfall graph without annotations While these observations were easy to make, the chart doesn't communicate the reason for the spikes in data, and annotations can play an important role. Here's the same chart with annotations added. We can instantly see that footfall is directly related to the day of week: weekends, holidays and discounts drive customer traffic. Store footfall graph with annotations