MarkedZone Annotations
The CartesianMarkedzoneAnnotation is a rectangle defined by the HorizontalFrom/To and VerticalFrom/To properties.
Properties
Besides the HorizontalFrom/To and VerticalFrom/To properties that are used for defining the rectangle, the CartesianMarkedzoneAnnotation exposes the following properties:
-
HorizontalAxis and VerticalAxis Used for assosiating the annotation with the chart axes.
By default the annotation is associated with the RadCartesianChart.HorizontalAxis and RadCartesianChart.VerticalAxis axes, so it is not necessary to specify these properties. They are usually used in a multiple axis scenarios.
Fill Specifies the fill of the marked zone.
DashArray A collection of System.Double values that indicate the pattern of dashes and gaps that is used to outline the border of the marked zone.
Stroke Specifies the stroke of the marked zone.
StrokeThickness Specifies the stroke thickness of the marked zone.
Examples
A CartesianMarkedZoneAnnotation is defined like this:
<telerik:CartesianMarkedZoneAnnotation HorizontalFrom="0.0" HorizontalTo="0.5"
VerticalFrom="3.5" VerticalTo="4"/>
<telerik:CartesianMarkedZoneAnnotation HorizontalFrom="2" HorizontalTo="4"
VerticalFrom="0.8" VerticalTo="1.3"
Fill="CornflowerBlue"
Stroke="Orange"
StrokeThickness="3"
DashArray="9 3 2"/>
<telerik:CartesianMarkedZoneAnnotation HorizontalFrom="0.75" HorizontalTo="1.25"
VerticalFrom="1.25" VerticalTo="1.75"
ZIndex="-200">
<telerik:CartesianMarkedZoneAnnotation.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" SpreadMethod="Repeat">
<GradientStop Offset="0" Color="#466375"/>
<GradientStop Offset="0.25" Color="#466375"/>
<GradientStop Offset="0.25" Color="#2b2a2a"/>
<GradientStop Offset="0.5" Color="#2b2a2a"/>
<GradientStop Offset="0.5" Color="#3f3742"/>
<GradientStop Offset="0.75" Color="#3f3742"/>
<GradientStop Offset="0.75" Color="#6c968a"/>
<GradientStop Offset="1" Color="#6c968a"/>
<LinearGradientBrush.RelativeTransform>
<ScaleTransform ScaleX="0.075" ScaleY="0.075"/>
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
</telerik:CartesianMarkedZoneAnnotation.Fill>
</telerik:CartesianMarkedZoneAnnotation>
The second declaration shows that you can use the DashArray property to create an interesting Stroke pattern.
The last example in the above code snippet shows that you can use the ZIndex property to place an annotation behind the ChartSeries (by default annotations are placed in front of the ChartSeries).
The flexible design of the MarkedZone annotation allows the user to omit one (or more) of the four Horizontal/VerticalFrom/To properties. The following table details relationship between the specified properties and the occupied interval on the axis:
<telerik:CartesianMarkedZoneAnnotation HorizontalTo="2.75"
VerticalFrom="0.5" VerticalTo="1"/>
In addition to the possibility of not specifying one (or more) the four properties, the annotation also supports inverse axes. The combination of these factors produces 64 possible scenarios!
<telerik:RadCartesianChart x:Name="chart">
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis IsInverse="True"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:PointSeries>
<telerik:PointSeries.DataPoints>
<telerik:CategoricalDataPoint Category="X0.5" Value="0.5"/>
<telerik:CategoricalDataPoint Category="X1.0" Value="1.5"/>
<telerik:CategoricalDataPoint Category="X2.0" Value="1.5"/>
<telerik:CategoricalDataPoint Category="X2.0" Value="3.0"/>
<telerik:CategoricalDataPoint Category="X3.0" Value="2.8"/>
<telerik:CategoricalDataPoint Category="X3.5" Value="3.5"/>
</telerik:PointSeries.DataPoints>
<telerik:PointSeries.DefaultVisualStyle>
<Style TargetType="Path">
<Setter Property="Fill" Value="#FF5AA4D4"/>
</Style>
</telerik:PointSeries.DefaultVisualStyle>
</telerik:PointSeries>
<telerik:RadCartesianChart.Annotations>
<telerik:CartesianMarkedZoneAnnotation VerticalFrom="3.0"
HorizontalTo="X2.0"/>
</telerik:RadCartesianChart.Annotations>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="XY"/>
</telerik:RadCartesianChart.Grid>
</telerik:RadCartesianChart>
