Image Annotation

Image annotations create visual impact and allow users to quickly interpret the chart data. A great way to communicate informative data through image annotations is by adding tooltips.

The following image displays highest earning of a fast food chain among others using a tooltip with an image annotation.

To use image annotations in FlexChart, create an instance of the Image class and set an image for the instance by specifying the image path in the SourceImage property. Scale the image or adjust its size by setting the Height and the Width properties. To add tooltips to image annotations, set the TooltipText property of the AnnotationBase class for the image annotation instance.

The following code compares earnings of the top fast food chains in United States. The code shows how to add, position, and customize the Image annotation in FlexChart.

Visual Basic
C#

Visual Basic

' create instances of the Image annotation
Dim image1 As New C1.Win.Chart.Annotation.Image()
Dim image2 As New C1.Win.Chart.Annotation.Image()
Dim image3 As New C1.Win.Chart.Annotation.Image()
Dim image4 As New C1.Win.Chart.Annotation.Image()
Dim image5 As New C1.Win.Chart.Annotation.Image()

' set the source image for the annotations
image1.SourceImage = Image.FromFile("C:\Resources\image1.png")
image2.SourceImage = Image.FromFile("C:\Resources\image2.png")
image3.SourceImage = Image.FromFile("C:\Resources\image3.png")
image4.SourceImage = Image.FromFile("C:\Resources\image4.png")
image5.SourceImage = Image.FromFile("C:\Resources\image5.png")

' specify the attachment of the images
image1.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image2.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image3.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image4.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image5.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate

' specify the location of the images
image1.Location = New PointF(1, 35)
image2.Location = New PointF(2, 15)
image3.Location = New PointF(3, 11)
image4.Location = New PointF(4, 8)
image5.Location = New PointF(5, 7)

' specify the position of the images
image1.Position = C1.Chart.Annotation.AnnotationPosition.Center
image2.Position = C1.Chart.Annotation.AnnotationPosition.Center
image3.Position = C1.Chart.Annotation.AnnotationPosition.Center
image4.Position = C1.Chart.Annotation.AnnotationPosition.Center
image5.Position = C1.Chart.Annotation.AnnotationPosition.Center

' scale the images
image1.Width = 68
image1.Height = 62
image2.Width = 60
image2.Height = 61

' add a tooltip
image1.TooltipText = "Highest Earning Among the Top Fast Food Chains" & vbLf & "35 Billion ($)"

' add the images to the Annotations collection of the annotation layer
annotationLayer.Annotations.Add(image1)
annotationLayer.Annotations.Add(image2)
annotationLayer.Annotations.Add(image3)
annotationLayer.Annotations.Add(image4)
annotationLayer.Annotations.Add(image5)

// create instances of the Image annotation
C1.Win.Chart.Annotation.Image image1 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image2 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image3 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image4 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image5 = new C1.Win.Chart.Annotation.Image();

// set the source image for the annotations
image1.SourceImage = Image.FromFile("C:\\Resources\\image1.png");
image2.SourceImage = Image.FromFile("C:\\Resources\\image2.png");
image3.SourceImage = Image.FromFile("C:\\Resources\\image3.png");
image4.SourceImage = Image.FromFile("C:\\Resources\\image4.png");
image5.SourceImage = Image.FromFile("C:\\Resources\\image5.png");

// specify the attachment of the images
image1.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image2.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image3.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image4.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image5.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;

// specify the location of the images
image1.Location = new PointF(1, 35);
image2.Location = new PointF(2, 15);
image3.Location = new PointF(3, 11);
image4.Location = new PointF(4, 8);
image5.Location = new PointF(5, 7);

// specify the position of the images
image1.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image2.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image3.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image4.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image5.Position = C1.Chart.Annotation.AnnotationPosition.Center;

// scale the images
image1.Width = 68;
image1.Height = 62;
image2.Width = 60;
image2.Height = 61;

// add a tooltip
image1.TooltipText = "Highest Earning Among the Top Fast Food Chains\n35 Billion ($)";

// add the images to the Annotations collection of the annotation layer
annotationLayer.Annotations.Add(image1);
annotationLayer.Annotations.Add(image2);
annotationLayer.Annotations.Add(image3);
annotationLayer.Annotations.Add(image4);
annotationLayer.Annotations.Add(image5);