How to: Create an Image Annotation Anchored to a Chart or Pane

  • 2 minutes to read

This example demonstrates how to create two image annotations - one anchored to a chart (by specifying two absolute pixel coordinates), and another one - to a pane (by specifying two axis values). For general information, refer to Annotations.

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2188.

To demonstrate how this can be done, we'll use a chart similar to the one created in the following tutorial: Lesson 1 - Create a Simple Unbound Chart.

Anchor an Annotation to a Chart

  1. Click the chart's smart tag, and in its actions list, click Annotations... link.

    Annotations_0a

  2. In the invoked Annotation Collection Editor, click Add, and then double-click the Image Annotation type.

    Annotations_1a

  3. For the created annotation, click the ellipsis button for its Annotation.AnchorPoint property.

    Annotations_2a

  4. Then, choose the Chart Anchor Point type.

    Annotations_3a

  5. And, define the X and Y coordinates (in pixels) for the annotation's anchor point. Note that these coordinates are absolute, and will not be changed when the chart is resized.

    Annotations_4a

  6. Now, the annotation has been anchored to that point, and after you specify its image (ImageAnnotation.Image) and position (Annotation.ShapePosition), the chart looks as follows.

    Annotations_5a

Anchor an Annotation to a Pane

  1. Now, create another image annotation, and via its Annotation.AnchorPoint property, specify the Pane Anchor Point type.

    Annotations_3b

  2. Then, choose the pane, to which the annotation is anchored, and specify the axes, and their values for the anchor point.

    Annotations_4b

  3. After you specify the annotation's image (ImageAnnotation.Image) and position (Annotation.ShapePosition), the chart looks as follows.

    Annotations_5b

    Note that the pane anchor point sticks to the specified axes' coordinates when the chart is being resized, or scrolled and zoomed.

See Also