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

Bar Chart Label Selection

4 Answers 124 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 2
Sam asked on 26 Oct 2016, 05:07 PM

I'm developing a bar chart where when the label is selected I need to set the color of that label as well as call an event handler (a different one than what I have set up for the bar selection).

Is there a property that enables this, similar to the ChartSelectionBehavior? Starting with one of the examples I found (see XAML below) I've been able to get the bar selection working and I made the label change color on mouse over, but this isn't what I need - it needs to function more like the bar selection.

 

<UserControl x:Class="TelerikChartDemo.ChartUserControl2"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
             xmlns:charting="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
             xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:local="clr-namespace:TelerikChartDemo"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.DataContext>
        <local:PerformanceViewModel />
    </UserControl.DataContext>
    <UserControl.Resources>
 
        <Style x:Key="ItemLabelStyle" TargetType="TextBlock">
            <Setter Property="Padding" Value="4"/>
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Foreground" Value="Black" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Black" />
                    <Setter Property="Foreground" Value="White" />
                    <!--<Setter Property="FontSize" Value="13.333" />
                    <Setter Property="FontWeight" Value="Bold" />-->
                </Trigger>         
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="6*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
 
        <chart:RadCartesianChart x:Name="RadCartesianChart"
                                  
                                 Palette="Windows8"
                                 Margin="0,18,0,0">
 
            <telerik:RadCartesianChart.Behaviors>
                <telerik:ChartSelectionBehavior DataPointSelectionMode="Single" SelectionChanged="ChartSelectionBehavior_Changed" />
            </telerik:RadCartesianChart.Behaviors>
 
            <chartView:BarSeries ItemsSource="{Binding Q1}"
                                 ValueBinding="Performance"
                                 CategoryBinding="RepresentativeName"                          
                                
                                 ShowLabels="{Binding ShowLabels, Mode=TwoWay}"
                                 CombineMode="{Binding BarCombineMode, Mode=TwoWay}"
                               
                                 FontFamily="Segoe UI"
                                 FontSize="10">
            </chartView:BarSeries>
 
 
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:CategoricalAxis FontFamily="Segoe UI"
                                           FontSize="12"
                                           GapLength="{Binding GapLength}" />
            </chart:RadCartesianChart.HorizontalAxis>
 
            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis FontFamily="Segoe UI"
                                      FontSize="12"
                                      Title="{Binding AxisTitle}"
                                      Minimum="0"
                                      Maximum="{Binding AxisMaxValue}"
                                      LabelFormat="{Binding AxisLabelFormat}" />
            </chart:RadCartesianChart.VerticalAxis>
 
        
        </chart:RadCartesianChart>
 
    </Grid>
</UserControl>


4 Answers, 1 is accepted

Sort by
0
Accepted
Dinko | Tech Support Engineer
Telerik team
answered on 31 Oct 2016, 11:41 AM
Hello Sam,

Let us start with that RadChartView doesn't support selection behavior of the axis labels out of the box. If we have fully understood your approach you want when a label is clicked to change its appearance. One approach which you can use is to create a custom DataTemplate and set it to the LabelTemplate property of the CategoricalAxis. In the custom template, you can specify a TextBlock and subscribe to the MouseDown event. In its handler, you can change the selected TextBlock background property (for example).
<DataTemplate x:Key="labelTemplate">
    <TextBlock Text="{Binding }"  MouseDown="TextBlock_MouseDown"/>
</DataTemplate>
private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
{
    // your logic here
}

Regards,
Dinko
Telerik by Progress
Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
0
Sam
Top achievements
Rank 2
answered on 01 Nov 2016, 08:16 PM

Thank you! The label color change on MouseDown functionality is working perfectly.

The only problem I have now is I can't bind the text block text to the CategoryBinding of the chart. Is there a simple way to do this? 

Previously I was getting the text to populate using the CategoryBinding like this:

<chartView:BarSeries ItemsSource="{Binding Q1}"
                     ValueBinding="Performance"
                     CategoryBinding="RepresentativeName"                                                    
                     FontFamily="Segoe UI"
                     FontSize="10">
</chartView:BarSeries>

 

0
Dinko | Tech Support Engineer
Telerik team
answered on 03 Nov 2016, 03:11 PM
Hello Sam,

We are not sure that we have fully understood your question in your last reply. Can you give us more information about your approach? Basically, you can bind the CategoryBinding property of the BarSeries to a property from your model which represent the text which will be shown on the categorical axis. 

Regards,
Dinko
Telerik by Progress
Do you need help with upgrading your WPF project? Try the Telerik API Analyzer and share your thoughts!
0
Sam
Top achievements
Rank 2
answered on 03 Nov 2016, 04:29 PM

Hi Dinko, 

It turns out your initial response was great and I didn't fully understand how the binding worked. It works exactly as I wanted now doing just what you said.

Thanks!

Tags
ChartView
Asked by
Sam
Top achievements
Rank 2
Answers by
Dinko | Tech Support Engineer
Telerik team
Sam
Top achievements
Rank 2
Share this question
or