FlexChart > Working with FlexChart > FlexChart Elements > Annotations > Types of Annotations > 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.
' 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);