Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Reporting
  [Collapse]Chart Control
   [Expand]Product Information
   [Expand]Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Creating Charts
    [Collapse]Chart Elements
     [Expand]Series
     [Expand]Diagram
     [Expand]Axes
     [Expand]Panes
     [Expand]Legend
     [Expand]Chart Titles
     [Collapse]Annotations
       Annotations Overview
       Annotations Position and Layout
       Annotations Appearance
     [Expand]Indicators
    [Expand]End-User Interaction
     Supported Browsers
     Adding a Web Chart
     Handling Client-side Scripts
     Medium Trust Support
     Web Farm and Web Gardens Support
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Annotations Overview

This document describes how annotations can be created, anchored to various chart elements and customized, and illustrates their general functionality.

Two different annotation types are available: text and image annotations (represented by the TextAnnotation and ImageAnnotation class instances, respectively).

You can access, manage and customize all annotations created in a chart control from its WebChartControl.AnnotationRepository property.

To access annotations quickly at design time, click the chart control's smart tag, and then select Annotations... in the ChartControl Tasks list, as shown below.

This invokes the Annotations Collection Editor.

To create an annotation, click the Add button in the annotations editor, select the annotation type in the Choose Annotation Type dialog, and click OK.

The chart control creates an annotation allowing you to customize its layout, appearance and behavior.

Depending on which anchor point type the Annotation.AnchorPoint property value is set to, you can create text or image annotations anchored to a chart, pane, or series point.

Anchor Point Type Description

Chart Anchoring

If the Annotation.AnchorPoint property is set to a ChartAnchorPoint type, the annotation is added to the chart's collection, returned by its WebChartControl.Annotations property.

Then, you can adjust the annotation's position on the chart surface by specifying its distance from the chart's left and top edges, via the ChartAnchorPoint.X and ChartAnchorPoint.Y properties.

These coordinates position an annotation absolutely, meaning that the anchor point does not change when the chart is resized.

For a step-by-step tutorial, refer to How to: Create an Image Annotation Anchored to a Chart or Pane.

Pane Anchoring

If the Annotation.AnchorPoint property is set to the PaneAnchorPoint type, the annotation is added to the pane's collection, returned by its XYDiagramPaneBase.Annotations property.

Then, you can specify the pane to which the annotation should be anchored (from the PaneAnchorPoint.Pane property), and define the axes and their values for the annotation's anchor point (from the PaneAnchorPoint.AxisXCoordinate and PaneAnchorPoint.AxisYCoordinate properties).

If the pane to which an annotation is anchored is removed, the annotation is removed as well.

For a step-by-step tutorial, refer to How to: Create an Image Annotation Anchored to a Chart or Pane.

Series Point Anchoring

If the Annotation.AnchorPoint property is set to a SeriesPointAnchorPoint type, the annotation is added to the point's collection, returned by its SeriesPoint.Annotations property.

Then, you can specify the series point to which the annotation should be anchored (from the SeriesPointAnchorPoint.SeriesPoint property).

If the series point to which an annotation is anchored is removed, the annotation is removed as well.

For a step-by-step tutorial, refer to How to: Create a Text Annotation Anchored to a Series Point.

Expanded See Also

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