Color Bars in One Series Seperately Based on Property in Data Point

[Dan Pingel]

Hi,

I have a horizontal bar RadChart. I bind to one list of objects, so I have one series. I do not show a legend - basically I show text for the Name of the bound object at each data point, and the size of the bar is the Value. I have a third property which I would like to bind to the color of the bar. I haven't found how to do this in the documentation that I've found. Any ideas?

Here's the XAML:

<telerikChart:RadChart VerticalAlignment="Top" UseDefaultLayout="False"  MaxHeight="180" ItemsSource="{Binding CurrentShiftScrap, Converter={StaticResource emptyConverter}}">
   <Grid>
      <telerikCharting:ChartArea x:Name="mainScrapArea" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" PaletteBrushesRepeat="False" EnableAnimations="False">
         <telerikCharting:ChartArea.AxisX>
            <telerikCharting:AxisX MajorTicksVisibility="Collapsed" MinorTicksVisibility="Collapsed">
               <telerikCharting:AxisX.AxisStyles>
                  <telerikCharting:AxisStyles ItemLabelStyle="{StaticResource RightJustifyChartLabelStyle}"/>
               </telerikCharting:AxisX.AxisStyles>
            </telerikCharting:AxisX>
         </telerikCharting:ChartArea.AxisX>
         <telerikCharting:ChartArea.AxisY>
            <telerikCharting:AxisY StripLinesVisibility="Collapsed" MajorTicksVisibility="Collapsed" MinorTicksVisibility="Collapsed" AxisLabelsVisibility="Collapsed"/>
         </telerikCharting:ChartArea.AxisY>
         <telerikCharting:ChartArea.PaletteBrushes>
            <SolidColorBrush Color="#FF1199CC"/>
         </telerikCharting:ChartArea.PaletteBrushes>
      </telerikCharting:ChartArea>
   </Grid>
   <telerikChart:RadChart.SeriesMappings>
      <telerikCharting:SeriesMapping ChartAreaName="mainScrapArea">
         <telerikCharting:SeriesMapping.SeriesDefinition>
            <telerikCharting:HorizontalBarSeriesDefinition ShowItemToolTips="True" ShowItemLabels="False" LegendDisplayMode="DataPointLabel" ItemToolTipFormat="#DATAITEM.Name: #DATAITEM.Value' Scrap"/>
         </telerikCharting:SeriesMapping.SeriesDefinition>
         <telerikCharting:SeriesMapping.ItemMappings>
            <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="Name"/>
            <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Value"/>
         </telerikCharting:SeriesMapping.ItemMappings>
      </telerikCharting:SeriesMapping>
   </telerikChart:RadChart.SeriesMappings>
</telerikChart:RadChart>

In a perfect world, I would map (in the ItemMapping) some DataPointMember to the color of the bar, referencing the FieldName from my bound object, and a value converter to turn the property into a fill color.

Any help would be greatly appreciated.

-Dan Pingel

[Petar Marchev]

Hello Dan,

One approach to achieve this is shown in our chart examples - MVVM Support. If you have installed Telerik's controls you should have the wpf examples on your computer locally (in the program files directory in telerik folder, or download them here). Please examine this example as it demonstrates how to take advantage of the MVVM pattern and set the colors of your bars through bindings. In a few words - you need to create a style in the resources, target it to your horizontal bars, and then specify in the series definition that you want to use this style as item style.  

Another approach would be to use some code behind and create a custom style for each item. This will break the MVVM pattern but it is up to you to decide which option to use. You can read about Custom Item Styles here.

Kind regards,
Petar Marchev
the Telerik team

[Dan Pingel]

Hi,

I see in concept how that is supposed to work. I've tried to massage it into my implementation. I started by adding a property called 'ParetoBrush' returning a Brush to my data object (I'll change it to a value converter later). Then I added this Style:

<Style x:Key="ParetoBarStyle" TargetType="telerikCharting:Bar">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:Bar">
                    <Canvas>
                        <Rectangle Height="{TemplateBinding ItemActualHeight}"
                                   Width="{TemplateBinding ItemActualWidth}"
                                   Fill="{Binding DataItem.ParetoBrush}"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Then I changed my HorizontalBarSeriesDefinition to bind to the Item Style (I removed all other settings for now). That changes my SeriesMappings to:

<telerikChart:RadChart.SeriesMappings>
   <telerikCharting:SeriesMapping ChartAreaName="mainScrapArea">
      <telerikCharting:SeriesMapping.SeriesDefinition>
         <telerikCharting:HorizontalBarSeriesDefinition ItemStyle="{StaticResource ParetoBarStyle}"/>
      </telerikCharting:SeriesMapping.SeriesDefinition>
      <telerikCharting:ItemMapping DataPointMember="XCategory" FieldName="Name"/>
      <telerikCharting:ItemMapping DataPointMember="YValue" FieldName="Value"/>
   </telerikCharting:SeriesMapping>
</telerikChart:RadChart.SeriesMappings>

Everything else posted above remains the same. It makes sense what it's trying to do. But when I run the code, I get this exception:

System.Windows.Markup.XamlParseException:
    "Set property 'Telerik.Windows.Controls.Charting.SeriesDefinition.ItemStyle' threw an exception."
Inner Exception -> System.ArgumentException:
    "'' is not a valid value for property 'ItemStyle'."

I continue to get this exception, even if I remove the binding defined in the style.

Spinning my wheels here...do you see anything that I've missed?

-Dan Pingel

[Petar Marchev]

Hello Dan,

Thank you for the attached code.

I tested it and I do not get an exception. I have created a simple project using this code and I am sending it as an attachment. Please take a look at it as it works fine in our labs.

Your code looks fine, however, it is preferable to change a few things.
1) First, you should give a name to the Ractangle, and not just any name but PART_DefiningGeometry. As explained here all controls that have a name starting with "PART_" are required, and even if the code compiles it might not work as expected.

<Rectangle x:Name="PART_DefiningGeometry" />

2) Secondly, since you are using a horizontal bar series definition you are actually targeting a HorizontalBar and not a Bar so it is preferable to change that as well.

<Style x:Key="CustomStyle" TargetType="telerik:HorizontalBar">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="telerik:HorizontalBar">

I hope the above explanations and the attached project are helpful.

Kind regards,
Petar Marchev
the Telerik team