[Expand]General Information
[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]Grid View
  [Expand]Tree List
  [Expand]Card View
  [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]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard 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?​​​​​​​