The ImageAnnotation

The ImageAnnotation draws a rectangle at specific X1, X2, Y1, Y2 coordinates:

A ImageAnnotation is placed on a chart at the position determined by its [X1, Y1] and [X2, Y2] coordinates, which correspond to the top-left and bottom-right corners of the drawn rectangle. Those can be accessed via the following properties: x1, y1, x2, y2

A ImageAnnotation can also be placed on a chart at the position determined by its [X1, Y1] coordinates, which correspond to the top-left corners, here ImageAnnotation will take the size of the image provided and will maintain its size and aspect ration on zoom and pan.

Image aspect ratio can be changed by setting setContentMode(ScaleType) which accepts the ScaleType from android.

In ImageAnnotation image size can be set using setDesiredSize method, which accepts width and height of the image. ImageAnnotation either requires [X2, Y2] or setDesiredSize, where [X2, Y2] will be given the priority.

A ImageAnnotation can be configured using the properties listed in the table below:

Feature	Description
`ImageAnnotation.image`	Allows to specify the image resource drawable that will appear on the surface.
`ImageAnnotation.contentMode`	Determines the layout i.e content mode of the image. It accepts a member of the ScaleType enumeration.
`ImageAnnotation.alpha`	Allows to specify the opacity of the image.
`ImageAnnotation.desiredSize`	Allows to specify the reuired size of the image. *NOTE:* The annotation will not be affected by this property when a bounding box with four coordinates is defined.

Note

The xAxisId and yAxisId must be supplied if you have axis with non-default Axis Ids, e.g. in multi-axis scenario.

Create a ImageAnnotation

A ImageAnnotation can be added onto a chart using the following code:

// Assume a surface has been created and configured somewhere
// Create a ImageAnnotation
final ImageAnnotation imageAnnotation = new ImageAnnotation(getContext());

// in a multi-axis scenario, specify the XAxisId and YAxisId
imageAnnotation.setXAxisId("TopAxisId");
imageAnnotation.setYAxisId("LeftAxisId");

// Specify a desired position by setting coordinates
imageAnnotation.setX(20.0f);
imageAnnotation.setY1(10.0f);
imageAnnotation.setX2(90.0f);
imageAnnotation.setY2(4.0f);

// Specify the image resource
imageAnnotation.setImage(R.drawable.example_weather_storm);

// Specify image aspect ratio
imageAnnotation.setContentMode(ImageView.ScaleType.FIT_XY);

// Add the annotation to the AnnotationsCollection of a surface
surface.getAnnotations().add(imageAnnotation);

// Assume a surface has been created and configured somewhere
// Create a ImageAnnotation
ImageAnnotation boxAnnotation = sciChartBuilder.newImageAnnotation()
        // in a multi-axis scenario, specify the XAxisId and YAxisId
        .withXAxisId("TopAxisId")
        .withYAxisId("LeftAxisId")
        // Specify a desired position by setting coordinates
        .withPosition(20.0f, 10.0f, 90.0f, 4.0f)
        // Specify the image resource
        .withImage(R.drawable.example_weather_storm)
        // Specify the image aspect ratio
        .withContentMode(ImageView.ScaleType.FIT_XY)
        .build();

// Add the annotation to the AnnotationsCollection of a surface
surface.getAnnotations().add(boxAnnotation);

// Assume a surface has been created and configured somewhere
// Create a ImageAnnotation
val imageAnnotation = ImageAnnotation(context)

// in a multi-axis scenario, specify the XAxisId and YAxisId
imageAnnotation.xAxisId = "TopAxisId"
imageAnnotation.yAxisId = "LeftAxisId"

// Specify a desired position by setting coordinates
imageAnnotation.x = 20.0f
imageAnnotation.y1 = 10.0f
imageAnnotation.x2 = 90.0f
imageAnnotation.y2 = 4.0f

// Specify the image resource
imageAnnotation.image = R.drawable.example_weather_storm

// Specify the image aspect ratio
imageAnnotation.setContentMode(ImageView.ScaleType.FIT_XY)

// Add the annotation to the AnnotationsCollection of a surface
surface.annotations.add(imageAnnotation)

Note

To learn more about other Annotation Types, available out of the box in SciChart, please find the comprehensive list in the Annotation APIs article.