[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Fundamentals
    [Expand]Providing Data
    [Collapse]Chart Elements
     [Expand]Diagram
     [Expand]Series
     [Expand]Panes
     [Expand]Axes
      Legends
      Chart Titles
      Annotations
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Examples
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Annotations

An annotation is an additional comment with explanatory information about chart content. The Chart control can display an unlimited number of annotations.

The following image demonstrates two annotations: with an image and text content.

This document consists of the following sections:

Expanded How to Add an Annotation

This markup shows how to add an annotation, anchor it to a chart surface's point and define the annotation shape's position.

The table below lists all the classes and properties used above:

Class or Property Description
ChartControl.Annotations The chart collection of annotations.
Annotation Stores annotation settings.
Annotation.Content Annotation content.
Annotation.Margin Gets or sets the annotation margin.
Annotation.AnchorPoint Specifies the annotation anchor point.
Annotation.ShapePosition Gets or sets the annotation shape position.
Note

To hide an annotation without removing it, set the Annotation.Visible property to false.

Expanded Annotation Anchor Points

You can anchor an annotation to different chart elements.

The following table lists all the types of annotation anchor points:

The Anchor Point Type

The Example Image

Description

Chart

If the Annotation.AnchorPoint property is specified by an object of the ChartAnchorPoint type, the ChartAnchorPoint.X and ChartAnchorPoint.Y properties define the annotation position.

Note that the annotation's anchor point coordinate is absolute and doesn't change when you resize the chart.

Example: How to: Dock an Annotation to a Chart

Pane

If the Annotation.AnchorPoint property is specified by an object of the PaneAnchorPoint type, the PaneAnchorPoint.AxisXCoordinate and PaneAnchorPoint.AxisYCoordinate properties specify the annotation position. To define a pane, use the PaneAnchorPoint.Pane property.

Note when the pane with annotations is removed, the chart doesn't display annotations.

Example: How to: Dock an Annotation to a Pane

Series Point

If the Annotation.AnchorPoint property is specified by an object of the SeriesPointAnchorPoint type, the SeriesPointAnchorPoint.SeriesPoint property determines a point that serves as an anchor point.

Note when the series point is removed, the chart doesn't display the anchored annotations.

Example: How to: Dock an Annotation to a Series Point

Expanded Annotation Shape Positions

You can position an annotation's shape relative to its anchor point coordinates (Annotation.ShapePosition is set to RelativePosition) or dock it to the parent container (chart or pane) edges (Annotation.ShapePosition is set to FreePosition).

The following table lists all the possible positions of an annotation shape:

The Shape Position Type

The Example Image

Description

Relative Position

If the Annotation.ShapePosition property is specified by an object of the RelativePosition type, you can modify the annotation's shape position using the RelativePosition.ConnectorLength and RelativePosition.Angle properties.

In the image, the ConnectorLength property is equal to 70 and the RelativePosition.Angle to 45.

Free Position

If the Annotation.ShapePosition property is specified by an object of the FreePosition type, you can specify the annotation location using the FreePosition.VerticalAlignment and FreePosition.HorizontalAlignment properties. To define the parent element, use the FreePosition.DockTarget property. Set the indents from parent element edges using the Annotation.Margin property.

In the image, the annotation is docked to the Chart control. The HorizontalAlignment property is set to Right, VerticalAlignment to Top, Margin to "0, 90, 50, 0".

Expanded Layout Customization

When an annotation does not completely fit into a diagram's boundaries, it is cut off. To avoid this behavior, set the Annotation.LabelMode property to true.

The Property Value The Example Image
LabelMode = false
LabelMode = true

An end-user can relocate, rotate, resize and re-anchor an annotation using special handlers at runtime. To enable these capabilities, use the Annotation.RuntimeMoving, Annotation.RuntimeRotation, Annotation.RuntimeResizing and Annotation.RuntimeAnchoring properties respectively.

Note

If the Annotation.LabelMode property is specified to true, the Annotation.RuntimeAnchoring, Annotation.RuntimeMoving, Annotation.RuntimeResizing and Annotation.RuntimeRotation properties are not in effect.

Apart from the capability to rotate an annotation around its anchor point, it is possible to rotate the annotation shape using the Annotation.Angle property.

The Property Value The Example Image
Annotation.Angle = 0
Annotation.Angle = 30

Expanded Appearance Customization

The Annotation.ContentTemplate property provides more flexible capabilities to configure the annotation data appearance. To do this, create a DataTemplate object defining how to display the annotation content and assign the template to the Annotation.ContentTemplate property.

The following XAML demonstrates how to customize annotation data:

The following image demonstrates an annotation with the customized Annotation.ContentTemplate property.

Also, you can use common appearance properties derived from the System.Windows.Controls.Control class to modify annotation appearance.

Expanded See Also

Is this topic helpful?​​​​​​​