Draw annotations on top

[Adam Petaccia]

I am pleased to see that Telerik has implemented the ability to draw custom lines onto the chart, after the request (http://www.telerik.com/community/forums/wpf/chart/drawing-extra-elements-into-or-on-top-of-chart.aspx) that was made; although I don't know if it was already in the works.

Is it possible to draw the CustomLines on top of the Bars? If the Bar's item width percent is set to 100 they effectively are invisible unless drawn at a Y-Value above the bars.

[Sia]

Hello Adam Petaccia,

At the moment, you need to retemplate your ChartArea in order to position the CustomLines over your bars.

Set the following style:

xmlns:charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">
<Window.Resources>
    <SolidColorBrush x:Key="ChartAreaBackground" Color="Transparent" />

    <Style  x:Key="CustomChartArea" TargetType="charting:ChartArea">
        <Setter Property="Template2D">
            <Setter.Value>
                <ControlTemplate TargetType="charting:ChartArea">
                    <Border Padding="{TemplateBinding Padding}"
                        Margin="{TemplateBinding Margin}"
                        Background="{TemplateBinding Background}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>

                            <charting:AxisX2D x:Name="PART_AxisX"
                                Style="{TemplateBinding AxisXStyle}"  Grid.Row="2" Grid.Column="1" />

                            <charting:AxisY2D x:Name="PART_AxisY"
                                    Style="{TemplateBinding AxisYStyle}" Grid.Row="1" Grid.Column="0" />

                            <charting:AdditionalAxes2DContainer x:Name="PART_AdditionalHorizontalAxesPanel"
                            StackOrientation="Vertical"
                            Grid.Row="0" Grid.Column="1" />

                            <charting:AdditionalAxes2DContainer x:Name="PART_AdditionalVerticalAxesPanel"
                            StackOrientation="Horizontal"
                            Height="{TemplateBinding Height}"
                            Grid.Row="1" Grid.Column="2"  />

                            <charting:ClipPanel x:Name="PART_PlotAreaPanel" Grid.Row="1" Grid.Column="1" Style="{TemplateBinding PlotAreaStyle}" >
                                <charting:HorizontalStripLines2D x:Name="PART_HorizontalStripLines"  />
                                <charting:VerticalStripLines2D x:Name="PART_VerticalStripLines"  />

                                <charting:VerticalMinorGridLines2D x:Name="PART_VerticalMinorGridLines" />
                                <charting:HorizontalMinorGridLines2D x:Name="PART_HorizontalMinorGridLines" />
                                <charting:HorizontalGridLines2D x:Name="PART_HorizontalGridLines"  />
                                <charting:VerticalGridLines2D x:Name="PART_VerticalGridLines" />
                                <charting:AdditionalPlotAreaAxes2DContainer x:Name="PART_AdditionalPlotAreaHorizontalAxesPanel"
                                StackOrientation="Vertical"  />
                                <charting:AdditionalPlotAreaAxes2DContainer x:Name="PART_AdditionalPlotAreaVerticalAxesPanel"
                                StackOrientation="Horizontal"   />

                                <charting:DragZoomLayerControl x:Name="PART_DragZoomLayer" Style="{TemplateBinding DragZoomLayerControlStyle}">
                                    <Grid>

                                        <ItemsPresenter />
                                        <charting:AnnotationLayer x:Name="PART_AnnotationLayer" ItemsSource="{TemplateBinding Annotations}" />
                                    </Grid>
                                </charting:DragZoomLayerControl>


                                <charting:PlotAreaAxisY2D x:Name="PART_PlotAreaAxisY"
                                                            Style="{TemplateBinding PlotAreaAxisYStyle}" />
                                <charting:PlotAreaAxisX2D x:Name="PART_PlotAreaAxisX"
                                                                Style="{TemplateBinding PlotAreaAxisXStyle}" />
                                <charting:LabelsPanel x:Name="PART_LabelsPanel"/>
                            </charting:ClipPanel>

                            <charting:NoDataControl
                                        x:Name="PART_NoData"
                                        Style="{TemplateBinding NoDataControlStyle}"
                                        Grid.RowSpan="3" Grid.ColumnSpan="3" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel" >
            <Setter.Value>
                <ItemsPanelTemplate>
                    <charting:ChartPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="{StaticResource ChartAreaBackground}" />
        <Setter Property="Padding" Value="5,10,10,5" />
    </Style>
</Window.Resources>

and apply it in your code-behind:

RadChart1.DefaultView.ChartArea.Style = this.Resources["CustomChartArea"] as Style;

Please try this solution and let me know if it is appropriate for you.

Best wishes,
Sia
the Telerik team

[Adam Petaccia]

This works, but now stripes are drawn on top of the bars, hiding all the data the chart has to display.

[Sia]

Hello Adam Petaccia,

What do you refer to when saying "stripes"?
If you mean the strip lines, they are under the series. You can see in the code below that

<charting:HorizontalStripLines2D x:Name="PART_HorizontalStripLines"  />
<charting:VerticalStripLines2D x:Name="PART_VerticalStripLines"  />

the strip lines are first (which means below everything else) in the clip panel.

All the best,
Sia
the Telerik team

[Adam Petaccia]

Sorry I said stripes, I should have been more clear: the marked zones that were also added in the latestest release get drawn on top of bars if I apply the style you provided. Marked zones should be drawn below bars, and custom grid lines that were added should be drawn on top.

[Sia]

Hello Adam Petaccia,

Unfortunately having marked zones and custom gridlines in different layers is not possible with the current implementation of this feature. We have it in mind and we plan to provide new kinds of annotations and improve the current ones with 2010.Q3 version of our controls.

You can track the progress of this in our Public Issues Tracking System.

Kind regards,
Sia
the Telerik team