This is a migrated thread and some comments may be shown as answers.

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

3 Answers 90 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Dmitry
Top achievements
Rank 1
Dmitry asked on 14 Jul 2017, 09:09 AM

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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Dinko
Telerik team
answered on 18 Jul 2017, 02:29 PM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
sri
Top achievements
Rank 1
answered on 06 Feb 2019, 01:58 PM

      <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.

 

 

 

0
Dinko
Telerik team
answered on 11 Feb 2019, 09:27 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ChartView
Asked by
Dmitry
Top achievements
Rank 1
Answers by
Dinko
Telerik team
sri
Top achievements
Rank 1
Share this question
or