Image Annotation | ComponentOne FlexChart for UWP

Image Annotation

In This Topic

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 Source 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.

XAML

<Chart:C1FlexChart.Layers>
    <Annotation:AnnotationLayer>
        <Annotation:AnnotationLayer.Annotations>
            <Annotation:Image Source="C:\\Resources\\image1.png"
                Attachment="DataCoordinate"
                      Location="1,35"
                      Position="Center"
                      Width="68"
                      Height="62"
                      TooltipText="Highest Earning Among the Top Fast Food Chains\n35 Billion ($)">
            </Annotation:Image>
            <Annotation:Image Source="C:\\Resources\\image2.png"
                Attachment="DataCoordinate"
                      Location="2,15"
                      Position="Center"
                      Width="60"
                      Height="61">
            </Annotation:Image>
            <Annotation:Image Source="C:\\Resources\\image3.png"
                Attachment="DataCoordinate"
                      Location="3,11"
                      Position="Center">
            </Annotation:Image>
            <Annotation:Image Source="C:\\Resources\\image4.png"
                Attachment="DataCoordinate"
                      Location="4,8"
                      Position="Center">
            </Annotation:Image>
            <Annotation:Image Source="C:\\Resources\\image5.png"
                Attachment="DataCoordinate"
                      Location="5,7"
                      Position="Center">
            </Annotation:Image>
        </Annotation:AnnotationLayer.Annotations>
    </Annotation:AnnotationLayer>
</Chart:C1FlexChart.Layers>