In Ultimate UI for WPF, the DataAnnotationBandLayer is a free-form parallelogram with 1-6 axis annotation. It provides many configuration properties and commonly used with the financial series of the XamDataChart component.
In Ultimate UI for WPF, the DataAnnotationBandLayer renders multiple skewed rectangles between 2 points in plot area of the XamDataChart component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer 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 lines. The starting points should be mapped using StartValueXMemberPath and StartValueYMemberPath properties and the ending points should be mapped using EndValueXMemberPath and EndValueYMemberPath properties.
For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices.
The following code snippet demonstrates how to render DataAnnotationBandLayer as shown in the picture above. Also, this example shows how to render custom overlay text in plot that is explained more in detailed in the [Chart Overlay Text] topic.
In XAML:
<ig:DataAnnotationBandLayer/>In C#:
var xAxisBottom = new CategoryXAxis
{
Label = "Index",
DataSource = data,
TickLength = 0,
LabelLocation = AxisLabelsLocation.OutsideBottom,
LabelFontSize = 12,
LabelMargin = new Padding(0, 15, 0, 5),
LabelExtent = 120,
LabelAngle = 90,
LabelTextColor = Color.Transparent,
};
chart.Axes.Add(xAxisBottom);
chart.Series.Add(CreateStockRapidGrowth(xAxisBottom));
public static Series CreateStockRapidGrowth(Axis targetAxis)
{
var annoLayer = new DataAnnotationBandLayer();
annoLayer.StartValueXMemberPath = "StartX";
annoLayer.StartValueYMemberPath = "StartY";
annoLayer.EndValueXMemberPath = "EndX";
annoLayer.EndValueYMemberPath = "EndY";
annoLayer.AnnotationBreadthMemberPath = "Value";
annoLayer.TargetAxis = targetAxis;
annoLayer.DataSource = new List<Annotation>
{
new Annotation() {
StartLabel = "Growth Start",
EndLabel = "Growth Stop",
StartX = 48, StartY = 110,
EndX = 105, EndY = 335,
Value = 170,
Label = "Rapid Growth" },
};
// setting optional annotation properties
annoLayer.Brush = Brushes.Purple;
annoLayer.Outline = Brushes.Purple;
annoLayer.StartLabelXMemberPath = "StartLabel";
annoLayer.StartLabelXDisplayMode = DataAnnotationDisplayMode.DataLabel;
annoLayer.EndLabelXMemberPath = "EndLabel";
annoLayer.EndLabelXDisplayMode = DataAnnotationDisplayMode.DataLabel;
annoLayer.CenterLabelXDisplayMode = DataAnnotationDisplayMode.Hidden;
// setting optional overlay text properties
annoLayer.OverlayTextColor = Brushes.Purple;
annoLayer.OverlayTextVerticalMargin = 20;
annoLayer.OverlayTextHorizontalMargin = -50;
annoLayer.OverlayTextLocation = OverlayTextLocation.InsideTopCenter;
annoLayer.OverlayTextMemberPath = "Label";
return annoLayer;
}The following code example shows how you can customize the DataAnnotationBandLayer 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(StylingDataAnnotationBandLayer(xAxisBottom));
public Series StylingDataAnnotationBandLayer(Axis targetAxis)
{
var annoLayer = new DataAnnotationBandLayer();
// 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 DataAnnotationBandLayer and their descriptions.