Adding image annotation

Need help in implementing some specific function to your LightningChart Ultimate powered application? Post a question and get code snippets from other LightningChart Ultimate community members.

Moderator: Arction_LasseP

Posts: 1
Joined: Wed Sep 23, 2020 7:10 am

Adding image annotation

Post by ilanro » Wed Sep 23, 2020 7:14 am


I'm testing the .NET sdk, and I need to be able to add small icons to my 2D chart. Is there a convenient way to add images as annotations or any other way so they would appear on the chart, and so I could control and modify their location in terms of data point units?

Thank you!

Posts: 105
Joined: Wed Mar 27, 2019 1:05 pm

Re: Adding image annotation

Post by Arction_LasseP » Wed Sep 23, 2020 12:42 pm


Either Annotations or SeriesEventMarkers can be used to achieve this, as both accept bitmaps as an fill option. The main difference is that SeriesEventMarkers are tied to a series, in other words you also need to have for example a PointLineSeries in the chart. Furthermore, Annotations are a bit more flexible.
Here are code examples of setting both Annotation and Marker to use bitmaps:

Code: Select all

AnnotationXY anno = new AnnotationXY(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
anno.Style = AnnotationStyle.Rectangle;
anno.Text = "";

// Allow only moving the annotation by mouse.
anno.TargetMoveByMouse = false;
anno.ResizeByMouse = false;
anno.RotateByMouse = false;
anno.AnchorAdjustByMouse = false;
anno.MoveByMouse = true;

// Set location in axis values and size in screen coordinates.
anno.LocationCoordinateSystem = CoordinateSystem.AxisValues;
anno.LocationAxisValues.SetValues(5, 5);
anno.SizeScreenCoords.SetValues(200, 200);

// Use bitmap as fill.
anno.Fill.Style = RectFillStyle.Bitmap;
anno.Fill.Bitmap.Layout = BitmapFillLayout.Stretch;
BitmapFrame frame = BitmapFrame.Create(new Uri(System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetEntryAssembly().Location) + "\\Resources\\image.png"));
anno.Fill.Bitmap.Image = frame;


SeriesEventMarker marker = new SeriesEventMarker(pointLineSeries);
marker.Label.Visible = false;

// Set marker position
marker.HorizontalPosition = SeriesEventMarkerHorizontalPosition.AtXValue;
marker.VerticalPosition = SeriesEventMarkerVerticalPosition.AtYValue;
marker.XValue = 6;
marker.YValue = 8;

// Using bitmap as fill (symbol).
marker.Symbol.Shape = SeriesMarkerPointShape.Bitmap;
marker.Symbol.UseImageSize = false; // Use custom size instead of image's original size
marker.Symbol.Width = 20;
marker.Symbol.Height = 20;
BitmapFrame frame2 = BitmapFrame.Create(new Uri(System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetEntryAssembly().Location) + "\\Resources\\image.png"));
marker.Symbol.BitmapImage = frame2;

You can change the position of the image any time in code via anno.LocationAxisValues.SetValues(x, y) for Annotations and marker.XValue or marker.YValue for Markers. Both can also be moved by mouse.

Hope this is helpful.
Best regards,