Labels are not visible in BarSeries when DataTemplate for lables is defined.

[Dmitry]

Hello. I use a DataTemplate for labels in BarSeries. Please see XAML below:

<telerik:RadCartesianChart Grid.Row="0" Grid.Column="0" Visibility="{Binding IsAbsoluteBarChartVisible}">
    <!--Annotation line-->
    <telerik:RadCartesianChart.Annotations>
        <telerik:CartesianGridLineAnnotation Axis="{Binding ElementName=verticalAxis}" Value="{Binding AnnotationValue}" Label="{Binding AnnotationLabel}" Stroke="Red"
                                         StrokeThickness="2" DashArray="8 2" Visibility="{Binding IsAnnotationVisible}">
            <telerik:CartesianGridLineAnnotation.LabelDefinition>
                <telerik:ChartAnnotationLabelDefinition Location="Inside"  VerticalAlignment="Bottom"  HorizontalAlignment="Center">
                    <telerik:ChartAnnotationLabelDefinition.DefaultVisualStyle>
                        <Style TargetType="TextBlock">
                            <Setter Property="FontSize" Value="14"/>
                            <Setter Property="FontWeight" Value="DemiBold"/>
                            <Setter Property="Foreground" Value="Red" />
                        </Style>
                    </telerik:ChartAnnotationLabelDefinition.DefaultVisualStyle>
                </telerik:ChartAnnotationLabelDefinition>
            </telerik:CartesianGridLineAnnotation.LabelDefinition>
        </telerik:CartesianGridLineAnnotation>
    </telerik:RadCartesianChart.Annotations>
    <!--X - axis-->
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.HorizontalAxis>
    <!--Y - axis-->
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis x:Name="verticalAxis" Title="{Binding Title_Y}"  Minimum="{Binding AbsoluteMinimum_Y}" Maximum="{Binding AbsoluteMaximum_Y}" MajorStep="{Binding AbsoluteStep_Y}"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <!--Here is bar chart itself-->
    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries ShowLabels="True" CategoryBinding="Category" ValueBinding="Value" ItemsSource="{Binding Data}">
            <telerik:BarSeries.LabelDefinitions>
                <telerik:ChartSeriesLabelDefinition Margin="0 20 0 0">
                    <telerik:ChartSeriesLabelDefinition.Template>
                        <!-- !!! HERE IS PROBLEMATIC TEMPLATE !!! -->
                        <DataTemplate>
                            <TextBlock Foreground="White"/>
                        </DataTemplate>
                    </telerik:ChartSeriesLabelDefinition.Template>
                </telerik:ChartSeriesLabelDefinition>
            </telerik:BarSeries.LabelDefinitions>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

But the labels are not visible in Bars in the chart in this case!

But when I comment the following code:

<!--telerik:ChartSeriesLabelDefinition.Template>
       <DataTemplate>
             <TextBlock Foreground="White"/>
       </DataTemplate>
</telerik:ChartSeriesLabelDefinition.Template-->

Then the labels are visible nice. Why this has plase. Please help.

[Dinko | Tech Support Engineer]

Hi Yaroslav,

Looking at the provided code snippet you haven't set the Text property of the TextBlock in the custom template. You can bind it to the Value property (for example) in order to show the label.

<telerik:ChartSeriesLabelDefinition.Template>
    <DataTemplate>
        <TextBlock Foreground="White" Text="{Binding Value}"/>
    </DataTemplate>
</telerik:ChartSeriesLabelDefinition.Template>

Give it a try and let me know if it works in your application.

Regards,
Dinko
Progress Telerik

[sri]

      <telerik:BarSeries ValueBinding="nsv"   CategoryBinding="ItemDesc" ItemsSource="{Binding SelectedCartesianDataItems}" >
                            <telerik:BarSeries.PointTemplate>
                                <DataTemplate>
                                    <TextBlock Background="#512C1D"  Text="123"  Foreground="White" TextAlignment="Center" />
                                </DataTemplate>
                            </telerik:BarSeries.PointTemplate>
                        </telerik:BarSeries>
                        <telerik:BarSeries ValueBinding="nsvpy" ShowLabels="True" CategoryBinding="ItemDesc" ItemsSource="{Binding SelectedCartesianDataItems}"  >
                            <telerik:BarSeries.PointTemplate>
                                <DataTemplate>
                                    <TextBlock Background="#F7A800" Text="{Binding data}" Foreground="Black" TextAlignment="Center" />
                            </DataTemplate>
                            </telerik:BarSeries.PointTemplate>
                        </telerik:BarSeries>
this code output attached below.

123 shows with in bar. but the 20 shows above to bar.

but i cant able able to print 123 dynamically because when i use binding its not working.

please assist to print 123 dynamically and within bar. 

Thank You.

 

 

 

[Dinko | Tech Support Engineer]

Hello Sri,

Thank you for the provided image.

For the clipping of the label, you could try setting the ClipToPlotArea property of the BarSeries to False. Give it a try and let me know how it goes.

Regarding the binding. The labels of the series are wrap inside a DataPoint object which holds references to all properties from your business object. To bind the Text property of the TextBlock you can try the following syntax.

<telerik:BarSeries ClipToPlotArea="False" ValueBinding="nsvpy" ShowLabels="True" CategoryBinding="ItemDesc" ItemsSource="{Binding SelectedCartesianDataItems}"  >
    <telerik:BarSeries.PointTemplate>
        <DataTemplate>
            <TextBlock Background="#F7A800" Text="{Binding DataPoint.nsvpy}" Foreground="Black" TextAlignment="Center" />
        </DataTemplate>
    </telerik:BarSeries.PointTemplate>
</telerik:BarSeries>

Regards,
Dinko
Progress Telerik