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

Displaying category value in bar series label

4 Answers 361 Views
Chart for XAML
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Ron
Top achievements
Rank 1
Ron asked on 29 Nov 2012, 03:27 AM
Hi there,

I have a bar series which has 'amounts' in the y axis and 'category' in the x axis. I could get the series to display labels and the 'amount' value is shown by default. Also by using the LabelDefinitions I could specify the template to use.

What I want to achieve now is to show both the amount and the category value in the label. Is this possible? It seems that the label is only given the property that is bound as the 'value'. I'm thinking there must be a way to change the binding to achieve that. Failing that, is there a way to change the series template to 'draw' a label on?

Thanks in advance.

4 Answers, 1 is accepted

Sort by
0
Alexander
Telerik team
answered on 29 Nov 2012, 12:38 PM
Hello Ron ,

If I understand correctly you want to show both of your model properties (amounts and category) in the Label above each bar. This could be achieved by defining DataTemplate in the LabelDefinitions of the series with some TextBlock for example. From there on you could access your model properties using DateItem.PropertyName binding. By doing so you can show as many properties as you want in the label for each bar . 

The following code snippet provides a demonstration on how you can implement this with BarSeries:


<telerik:BarSeries.LabelDefinitions>
                    <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center">
                        <telerik:ChartSeriesLabelDefinition.Template>
                            <DataTemplate>
                                <StackPanel>
                                 <TextBlock Text="{Binding DataItem.Category}"  FontSize="16"  Foreground="Green"/>
                                 <TextBlock Text="{Binding DataItem.Value}" FontSize="16" Foreground="Red"/>
                                </StackPanel>
                            </DataTemplate>
                        </telerik:ChartSeriesLabelDefinition.Template>
                    </telerik:ChartSeriesLabelDefinition>
                </telerik:BarSeries.LabelDefinitions>



Greetings,
Alexander
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Ron
Top achievements
Rank 1
answered on 29 Nov 2012, 09:25 PM
Hi Alexander,

That is what I'm trying to achieve. I tried your suggestion and I simply cannot resolve DataItem. Am I missing something or..?

Here's a snippet of what I have at the moment.

<telerik:RadCartesianChart x:Name="RevenueByCustomerChart" Width="600"
                                       DataContext="{StaticResource RevenueByCustomerViewModel}">
                <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis HorizontalLocation="Right" LabelTemplate="{StaticResource RevenueByCustomerLabelTemplate}"
                                        Minimum="100" Maximum="550" MajorStep="50"></telerik:LinearAxis>
                </telerik:RadCartesianChart.VerticalAxis>
                <telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:CategoricalAxis ShowLabels="False" />
                </telerik:RadCartesianChart.HorizontalAxis>
                <telerik:RadCartesianChart.Series>
                    <telerik:BarSeries ItemsSource="{Binding ActualRevenues}" CombineMode="Cluster"
                                       ShowLabels="True">
                        <telerik:BarSeries.ValueBinding>
                            <telerik:PropertyNameDataPointBinding PropertyName="Amount"></telerik:PropertyNameDataPointBinding>
                        </telerik:BarSeries.ValueBinding>
                        <telerik:BarSeries.CategoryBinding>
                            <telerik:PropertyNameDataPointBinding PropertyName="Customer"></telerik:PropertyNameDataPointBinding>
                        </telerik:BarSeries.CategoryBinding>
                        <telerik:BarSeries.LabelDefinitions>
                            <telerik:ChartSeriesLabelDefinition Margin="30,0,0,5">
                                <telerik:ChartSeriesLabelDefinition.Template>
                                    <DataTemplate>
                                        <TextBlock Foreground="#99000000" Text="{Binding DataItem.Category}"></TextBlock>
                                    </DataTemplate>
                                </telerik:ChartSeriesLabelDefinition.Template>
                            </telerik:ChartSeriesLabelDefinition>
                        </telerik:BarSeries.LabelDefinitions>
                    </telerik:BarSeries>
0
Accepted
Alexander
Telerik team
answered on 03 Dec 2012, 10:26 AM
Hello Ron,

I apologize for misguiding you in the previous message. The approach shown in the previous code snippet uses functionality which will be available in the upcoming Service Pack (expected by the middle of this week). Using the current version this scenario can be achieved by defining a Label Strategy in the bar series. 

I have prepared  you a sample project which uses Label Strategy for setting the 'Value' and 'Category' labels above every Bar in the chart. Please, find the attached file. 

All the best,
Alexander
the Telerik team
Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
0
Ron
Top achievements
Rank 1
answered on 03 Dec 2012, 08:54 PM
Looks great. Thanks!
Tags
Chart for XAML
Asked by
Ron
Top achievements
Rank 1
Answers by
Alexander
Telerik team
Ron
Top achievements
Rank 1
Share this question
or