Binding Custom Bar Background Color with AggregateFunction

[Tyler]

I'm haivng a problem binding the background color of my bars when using the AggregateFunction.  Screenshot1.png is what I want the chart to look like, BUT I want to bind the bar's background color to my viewmodel.  The problem is when the AggregateFunction is set the binding 'Fill="{Binding DataItem.BackgroundBrush}"' never happens.   If I removed the AggregateFuction (ScreenShot2.png) it will bind the background color, but then I get a bunch of LegendItems that I do not want and the xAxis labels are not aligned correctly.

Here is what I have in my xaml:

<UserControl.Resources>
    <Style x:Key="FlatBarStyle" TargetType="telerik:Bar">
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:Bar">
                    <Canvas>
                    <Rectangle x:Name="PART_DefiningGeometry"
                              Height="{TemplateBinding ItemActualHeight}"
                              Width="{TemplateBinding ItemActualWidth}"
                              Fill="{Binding DataItem.BackgroundBrush}"
                              >
                    </Rectangle>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <telerik:LabelFormatConverter x:Key="labelFormatConverter"/>

    <Style  TargetType="telerik:AxisLabel2D">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:AxisLabel2D">
                    <Border Background="{TemplateBinding Background}">
                        <telerik:LayoutTransformControl x:Name="PART_LayoutTransformControl"
                                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                            <telerik:LayoutTransformControl.Content>
                                <HyperlinkButton Style="{StaticResource WebStyleHyperlink}" Click="HyperlinkButton_Click">
                                    <TextBlock Style="{TemplateBinding ItemLabelStyle}"
                                        Text="{Binding Converter={StaticResource labelFormatConverter}}" />
                                </HyperlinkButton>
                            </telerik:LayoutTransformControl.Content>
                            <telerik:LayoutTransformControl.LayoutTransform>
                                <RotateTransform x:Name="PART_RotateTransform" />
                            </telerik:LayoutTransformControl.LayoutTransform>
                        </telerik:LayoutTransformControl>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <telerik:RadChart  x:Name="barChart" ItemsSource="{Binding SeriesData}" >
        <telerik:RadChart.DefaultView>
            <telerik:ChartDefaultView ChartLegendPosition="Bottom" >
                <telerik:ChartDefaultView.ChartTitle>
                    <telerik:ChartTitle Content="{Binding Title}"  HorizontalContentAlignment="Left"></telerik:ChartTitle>
                </telerik:ChartDefaultView.ChartTitle>
                <telerik:ChartDefaultView.ChartLegend>
                    <telerik:ChartLegend Name="legend1" Background="Transparent" Header=""  />
                </telerik:ChartDefaultView.ChartLegend>
                <telerik:ChartDefaultView.ChartArea>

                    <telerik:ChartArea Grid.ColumnSpan="2" LegendName="legend1"
                                       Command="{Binding ChartArea1ClickCommand}"  Loaded="ChartArea_Loaded">
                        <telerik:ChartArea.AxisX>
                            <telerik:AxisX DefaultLabelFormat="{Binding AxisXLabelFormat}"  >

                            </telerik:AxisX>
                        </telerik:ChartArea.AxisX>
                        <telerik:ChartArea.AxisY>
                            <telerik:AxisY IsZeroBased="True" ExtendDirection="Up" Title="{Binding YAxisLabel}"/>
                        </telerik:ChartArea.AxisY>
                    </telerik:ChartArea>
                </telerik:ChartDefaultView.ChartArea>
            </telerik:ChartDefaultView>

        </telerik:RadChart.DefaultView>

        <telerik:RadChart.SeriesMappings>
            <telerik:SeriesMapping>
                <telerik:SeriesMapping.GroupingSettings>
                    <telerik:GroupingSettings>
                        <telerik:GroupingSettings.GroupDescriptors>
                            <telerik:ChartGroupDescriptor Member="Name"></telerik:ChartGroupDescriptor>
                            <telerik:ChartGroupDescriptor Member="Service" ></telerik:ChartGroupDescriptor>
                        </telerik:GroupingSettings.GroupDescriptors>
                    </telerik:GroupingSettings>
                </telerik:SeriesMapping.GroupingSettings>
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:BarSeriesDefinition  ItemStyle="{StaticResource FlatBarStyle}" ItemToolTipFormat="#Y{#,###,###,##0}"  ShowItemLabels="True" ShowItemToolTips="True">
                        <telerik:BarSeriesDefinition.Appearance>
                            <telerik:SeriesAppearanceSettings ></telerik:SeriesAppearanceSettings>
                        </telerik:BarSeriesDefinition.Appearance>
                        <telerik:BarSeriesDefinition.LabelSettings>
                            <telerik:BarLabelSettings ShowZeroValueLabels="False"/>
                        </telerik:BarSeriesDefinition.LabelSettings>
                        <telerik:BarSeriesDefinition.InteractivitySettings>
                            <telerik:InteractivitySettings HoverScope="None" SelectionScope="Item" SelectionMode="Single" />
                        </telerik:BarSeriesDefinition.InteractivitySettings>
                    </telerik:BarSeriesDefinition>
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.ItemMappings>
                    <telerik:ItemMapping FieldName="Value" DataPointMember="YValue" AggregateFunction="Sum" />
                    <telerik:ItemMapping FieldName="Service" DataPointMember="XCategory"></telerik:ItemMapping>
                </telerik:SeriesMapping.ItemMappings>
            </telerik:SeriesMapping>
        </telerik:RadChart.SeriesMappings>

    </telerik:RadChart>
</Grid>

[Ves]

Hello Tyler,

Indeed, this will not be possible in scenarios with grouping and aggregation. The reason is in the object assigned to the DataItem property of the DataPoint. You can wire the ItemDataBound event and explore that object. For a chart with no grouping and aggregation the DataItem property will hold a reference to the underlying object, so you can retrieve any of its properties. When grouping and aggregation is enforced, one bar does not necessarily correspond to one item e.g. in your screenshot the very first bar represents the sum of all "Category 1 -- Authorized" items. So, this bar cannot be associated with a single item. In this case the DataItem property holds a list of KeyValuePairs where for every entry the Key is the property name (the one that defines the group) and the Value is the property value, used to aggregate the data (e.g. Name=Authorized, Service=Category1)

At this point, there are two possible scenarios:

• The items that are represented by a single bar have different brushes -- this makes the bar fill undefined.
• All the items that are represented by a single bar have the same brush -- this means there is a custom logic, which can define that brush. In this case, you can retrieve the corresponding list of KeyValuePairs in a dedicated IValueConverter and define the brush. You can find this approach implemented in the attached example.

Some points to consider -- the item labels are not aware of the bar background and will continue to show the default burshes, so I have moved the labels lower (over the bar) and set their background to transparent. The same is valid for the legend items, so I have set LegendDisplayMode to None and created custom legend items.

Hope this helps.

Best regards,
Ves
the Telerik team