Colouring bars individually

7 posts, 0 answers
  1. Anand
    Anand avatar
    7 posts
    Member since:
    Jun 2011

    Posted 15 Jun 2011 Link to this post

    Hi.

    I am loading a bar chart with data from an SQL connection. I am colouring the bars using the following:

    <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="telerikCharting:Bar">
                        <Rectangle x:Name="PART_DefiningGeometry"
                                       Height="{TemplateBinding ItemActualHeight}"
                                       Width="{TemplateBinding ItemActualWidth}"
                                       Style="{TemplateBinding ItemStyle}" Fill="Red">
                        </Rectangle>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

    I need the colour of a bar to change when I move my mouse over it and change back when I move away from it. It shouldn't change back to its original colour if I click on it. How do I accomplish this?

    Thanks.
    Anand
  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 21 Jun 2011 Link to this post

    Hello Anand,

    If you do not use our interactivity functionality (which is available in WPF4) you can re-template you bar series as follows:
    <Style x:Key="CustomBar"   TargetType="telerikCharting:Bar">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:Bar">
                    <Canvas Opacity="0"  x:Name="PART_MainContainer">
                        <Rectangle x:Name="PART_DefiningGeometry"                                   
                            Height="{TemplateBinding ItemActualHeight}"
                            Width="{TemplateBinding ItemActualWidth}"
                            Style="{TemplateBinding ItemStyle}" />
                        <Rectangle Height="{TemplateBinding ItemActualHeight}"
                                    Width="{TemplateBinding ItemActualWidth}"
                                    Fill="Transparent"
                                    MouseEnter="PART_SelectedState_MouseEnter"
                                    MouseLeave="PART_SelectedState_MouseLeave" />
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                        </Canvas.RenderTransform>
                            
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    Set this style as item style and change the color in your code-behind:
    private void PART_SelectedState_MouseEnter(object sender, MouseEventArgs e)
    {
        (sender as Rectangle).Fill = new SolidColorBrush(Colors.Red);
     
    }
     
    private void PART_SelectedState_MouseLeave(object sender, MouseEventArgs e)
    {
        (sender as Rectangle).Fill = new SolidColorBrush(Colors.Transparent);
    }

    Please try this and let me know if this is what you need.

    Best wishes,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Anand
    Anand avatar
    7 posts
    Member since:
    Jun 2011

    Posted 21 Jun 2011 Link to this post

    Hi.

    That worked perfectly, thank you. I have one more question. I am using the following code for clicks on individual bars.

    <telerikCharting:ChartArea ItemClick="Chart_Click" ... >
    ...
    </telerikCharting:ChartArea>

    private void Chart_Click(object sender, ChartItemClickEventArgs e)
    {
      int x = Convert.ToInt32(e.DataPoint.XValue);
    int y = Convert.ToInt32(e.DataPoint.YValue);
         ...
    }

    On click, I need a bar to retain its highlighted colour (in your example, Red) and lose its highlighted colour only when some other bar is clicked on. How can I achieve that?

    Thanks.

    Anand
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 22 Jun 2011 Link to this post

    Hi Anand,

    If you use WPF 4 you can take advantage of our interactivity for the click and hover states. Please review the attached solution and let me know whether it works for you.

    Kind regards,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Anand
    Anand avatar
    7 posts
    Member since:
    Jun 2011

    Posted 22 Jun 2011 Link to this post

    Works perfectly for single series.One of my charts has two bar series in it. And once I select something in a series, everything else in that series and everything in the other series must be deselected. How can I do that?

    Thanks.
  7. Sia
    Admin
    Sia avatar
    667 posts

    Posted 23 Jun 2011 Link to this post

    Hi Anand,

    You can use the same approach when having more than one series, but you need to keep track on the number of selected items and when you have two selected items from two different series, you need to unselect the one which is first selected. Unfortunately RadChart does not provide built-in support for this.

    Please use the exposed SelectionChanged event on the Chart Area

    Kind regards,
    Sia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Anand
    Anand avatar
    7 posts
    Member since:
    Jun 2011

    Posted 23 Jun 2011 Link to this post

    Thanks that worked. For the benefit of future readers of this thread, the following will help

    private void ChartArea_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
    {
      ChartArea ca = (ChartArea)sender;
      foreach (DataPoint p in ca.SelectedItems)
      {
        if (p != e.AddedItems[0])
        {
          ca.UnselectItem(p);
        }
      }
    }
Back to Top
UI for WPF is Visual Studio 2017 Ready