Bar Chart Label Selection

5 posts, 1 answers
  1. Sam
    Sam avatar
    12 posts
    Member since:
    Sep 2015

    Posted 26 Oct Link to this post

    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>


  2. Answer
    Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 31 Oct Link to this post

    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!
  3. UI for WPF is Visual Studio 2017 Ready
  4. Sam
    Sam avatar
    12 posts
    Member since:
    Sep 2015

    Posted 01 Nov in reply to Dinko Link to this post

    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>

     

  5. Dinko
    Admin
    Dinko avatar
    206 posts

    Posted 03 Nov Link to this post

    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!
  6. Sam
    Sam avatar
    12 posts
    Member since:
    Sep 2015

    Posted 03 Nov in reply to Dinko Link to this post

    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!

Back to Top
UI for WPF is Visual Studio 2017 Ready