In Ultimate UI for WPF, the DataAnnotationRectLayer is renders multiple rectangles defined by starting and ending points in plot area of the XamDataChart component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the ItemsSource property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties.
For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis.
The following code snippet demonstrates this annotation as shown in the picture, along with the properties provided above DataAnnotationRectLayer
In XAML:
<ig:DataAnnotationRectLayer
StartValueXMemberPath="StartX"
StartValueYMemberPath="StartY"
EndValueXMemberPath="EndX"
EndValueYMemberPath="EndY"
ItemsSource="{Binding}" />In C#:
var xAxis = new CategoryXAxis
{
Label = "Date",
DataSource = data,
LabelMargin = new Padding(0, 10, 0, 10),
};
chart.Axes.Add(xAxis);
chart.Series.Add(CreateStockBearishPatterns(xAxis));
public static Series CreateStockBearishPatterns(Axis targetAxis)
{
var annoLayer = new DataAnnotationRectLayer();
annoLayer.StartValueXMemberPath = "StartX";
annoLayer.StartValueYMemberPath = "StartY";
annoLayer.EndValueXMemberPath = "EndX";
annoLayer.EndValueYMemberPath = "EndY";
annoLayer.TargetAxis = targetAxis;
annoLayer.DataSource = new List<Annotation>
{
new Annotation() {
StartX = 85, StartY = 190,
EndX = 140, EndY = 415,
Label = "Head & Shoulders Pattern \n (Bearish Downtrend)" },
new Annotation() {
StartX = 53, StartY = 75,
EndX = 230, EndY = 80,
Label = "Price Gap (Bearish Target)" },
};
// setting optional annotation properties
annoLayer.Brush = Brushes.Purple;
annoLayer.Outline = Brushes.Purple;
annoLayer.AreaFillOpacity = 0.1;
annoLayer.StartLabelXDisplayMode = DataAnnotationDisplayMode.Hidden;
annoLayer.StartLabelYDisplayMode = DataAnnotationDisplayMode.Hidden;
annoLayer.EndLabelXDisplayMode = DataAnnotationDisplayMode.Hidden;
annoLayer.EndLabelYDisplayMode = DataAnnotationDisplayMode.Hidden;
annoLayer.CenterLabelXDisplayMode = DataAnnotationDisplayMode.Hidden;
// setting optional overlay text properties
annoLayer.OverlayTextLocation = OverlayTextLocation.OutsideBottomCenter;
annoLayer.OverlayTextColor = Brushes.Purple;
annoLayer.OverlayTextMemberPath = "Label";
return annoLayer;
}The following code example shows how you can customize the DataAnnotationRectLayer by setting styling properties such as background, border color, and border thickness of axis annotations as styling properties of the Overlay Text.
In C#:
chart.Series.Add(StylingDataAnnotationRectLayer(xAxisBottom));
public Series StylingDataAnnotationRectLayer(Axis targetAxis)
{
var annoLayer = new DataAnnotationRectLayer();
// NOTE see setup properties in the first examples
// styling the starting point of annotation
annoLayer.StartLabelDisplayMode = DataAnnotationDisplayMode.AxisValue;
annoLayer.StartLabelTextColor = Brushes.White;
annoLayer.StartLabelBackground = Brushes.Orange;
annoLayer.StartLabelBorderColor = Brushes.Black;
annoLayer.StartLabelBorderThickness = 1;
annoLayer.StartLabelBorderRadius = 4;
annoLayer.StartLabelPadding = new Thickness(4);
// styling the ending point of annotation
annoLayer.EndLabelDisplayMode = DataAnnotationDisplayMode.AxisValue;
annoLayer.EndLabelTextColor = Brushes.White;
annoLayer.EndLabelBackground = Brushes.Red;
annoLayer.EndLabelBorderColor = Brushes.Black;
annoLayer.EndLabelBorderThickness = 1;
annoLayer.EndLabelBorderRadius = 4;
annoLayer.EndLabelPadding = new Thickness(4);
// styling optional label at center of annotations
annoLayer.CenterLabelDisplayMode = DataAnnotationDisplayMode.AxisValue;
annoLayer.CenterTextColor = Brushes.White;
annoLayer.CenterBackground = Brushes.Green;
annoLayer.CenterBorderColor = Brushes.Black;
annoLayer.CenterBorderThickness = 1;
annoLayer.CenterBorderRadius = 4;
annoLayer.CenterPadding = new Thickness(4);
// styling optional overlay text
annoLayer.OverlayTextColor = Brushes.White;
annoLayer.OverlayTextBackground = Brushes.Green;
annoLayer.OverlayTextBorderColor = Brushes.Black;
annoLayer.OverlayTextBorderThickness = 1;
annoLayer.OverlayTextBorderRadius = 4;
annoLayer.OverlayTextHorizontalMargin = 5;
annoLayer.OverlayTextHorizontalPadding = 2;
annoLayer.OverlayTextVerticalMargin = 5;
annoLayer.OverlayTextVerticalPadding = 2;
return annoLayer;
}The following table provides most important properties for the DataAnnotationRectLayer and their descriptions.