Colouring bars individually

[Anand]

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

[Sia]

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

[Anand]

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

[Sia]

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

[Anand]

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.

[Sia]

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

[Anand]

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);
    }
  }
}