Bar Chart Label Selection

[Sam]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             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>

[Dinko | Tech Support Engineer]

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

[Sam]

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>

 

[Dinko | Tech Support Engineer]

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

[Sam]

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!