RadCartesianChart Annotation Questions

[Giuliano]

Hello, I have two questions regarding the RadCartesianChart Annotations.

Question 1:

I have attached an example project to this question. When I first open the example project the text of the Annotation seems to be cut off. This fixes itself if the window is resized and the problem doesn't seem to occur again. Is there a way to not have this cut off text? Am I setting a property incorrectly?

 

Question 2:

In the same attached project I have one of the annotation labels set to the location bottom; however, I can't seem to find it in my window. Is there something I am missing to get this text to show up?

 

Here is the relevant xaml:

<telerik:RadCartesianChart Grid.Row="1" >

    <telerik:RadCartesianChart.Annotations>

        <telerik:CartesianGridLineAnnotation Value="20" Stroke="Red" FontSize="20" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example" Foreground="Black">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Inside" HorizontalAlignment="Center" />
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>

        <telerik:CartesianGridLineAnnotation Value="25" Stroke="Red" FontSize="20" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example" Foreground="Black">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Inside" HorizontalAlignment="Center" />
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>

        <telerik:CartesianGridLineAnnotation Value="30" Stroke="Red" FontSize="20" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example" Foreground="Black">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Bottom" HorizontalAlignment="Center" />
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>
    </telerik:RadCartesianChart.Annotations>

    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries ShowLabels="True"
                           CategoryBinding="Category"
                           ValueBinding="Value">

            <telerik:BarSeries.LabelDefinitions>

                <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Center">
                    <telerik:ChartSeriesLabelDefinition.DefaultVisualStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="Foreground" Value="White"/>
                        </Style>
                    </telerik:ChartSeriesLabelDefinition.DefaultVisualStyle>
                </telerik:ChartSeriesLabelDefinition>

                <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Top">
                    <telerik:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <TextBlock Foreground="#5AA4D4" FontWeight="Bold" Text="{Binding DataItem.Value}" />
                        </DataTemplate>
                    </telerik:ChartSeriesLabelDefinition.Template>
                </telerik:ChartSeriesLabelDefinition>

            </telerik:BarSeries.LabelDefinitions>

            <telerik:BarSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="Apples" Value="20"/>
                <telerik:CategoricalDataPoint Category="Bananas" Value="28"/>
                <telerik:CategoricalDataPoint Category="Oranges" Value="17"/>
                <telerik:CategoricalDataPoint Category="Strawberries" Value="30"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis x:Name="horizontalAxis1"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.VerticalAxis>


</telerik:RadCartesianChart>

Thank You,

Giuliano

[Martin Ivanov]

Hello Giuliano,

(1) To resolve the label clipping, you can define the Template property of the ChartAnnotationLabelDefinition and customize the text there.

   <telerik:CartesianGridLineAnnotation Value="20" Stroke="Red" StrokeThickness="5" Axis="{Binding ElementName=horizontalAxis1}" Label="Example">
       <telerik:CartesianGridLineAnnotation.LabelDefinition>
           <telerik:ChartAnnotationLabelDefinition Location="Inside" HorizontalAlignment="Center">
               <telerik:ChartAnnotationLabelDefinition.Template>
                   <DataTemplate>
                       <TextBlock Text="{Binding}" FontSize="24"/>
                   </DataTemplate>
               </telerik:ChartAnnotationLabelDefinition.Template>
           </telerik:ChartAnnotationLabelDefinition>
       </telerik:CartesianGridLineAnnotation.LabelDefinition>
   </telerik:CartesianGridLineAnnotation>

(2) The missing label with its Location set to Bottom is drawn outside of the viewport. To show it you can set the ClipToPlotArea property of the associated annotation to false.

<telerik:CartesianGridLineAnnotation ClipToPlotArea="False">

Or you can set the VerticalOffset of the ChartAnnotationLabelDefinition to move the annotation up.

<telerik:ChartAnnotationLabelDefinition Location="Bottom" HorizontalAlignment="Center" VerticalOffset="-40" />

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik