Setting color for StackedBarChart in XAML

3 posts, 0 answers
  1. Justin
    Justin avatar
    11 posts
    Member since:
    Feb 2011

    Posted 07 Mar 2011 Link to this post

    Hello. I have a StackedBar chart with two series mappings: Started and Pending. The colors of the bars and the legends for these series mappings are red and blue. I want to change these colors to green and yellow. Please see the XAML below. Note that my series definitions are defined in the XAML. We cannot move these definitions to code behind. They must be in the XAML.

    We want to do the equivalent of this in the XAML. I put this line in the sample project that came with the Telerik controls. (Again, to avoid confusion, the following line is NOT my code. This is a line I inserted into the sample project that came with Telerik as a proof of concept.)

    // This color should be either green or yellow.
    seriesDefinition.Appearance.Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(67, 61, 14, 110));

    Here is my XAML. We need the equivalent of the line above (for colors green and yellow) for the two series mappings.

    <UserControl.Resources>
        <telerik:SeriesMappingCollection x:Key="SeriesMappings">
            <telerik:SeriesMapping LegendLabel="Started">
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:HorizontalStackedBarSeriesDefinition ShowItemLabels="True">
                        <telerik:HorizontalStackedBarSeriesDefinition.LabelSettings>
                            <telerik:BarLabelSettings LabelDisplayMode="Inside"></telerik:BarLabelSettings>
                        </telerik:HorizontalStackedBarSeriesDefinition.LabelSettings>
                    </telerik:HorizontalStackedBarSeriesDefinition>
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.FilterDescriptors>
                    <telerik:ChartFilterDescriptor Member="AssetStatus" Operator="IsEqualTo" Value="Started"></telerik:ChartFilterDescriptor>
                </telerik:SeriesMapping.FilterDescriptors>
                <telerik:SeriesMapping.GroupingSettings>
                    <telerik:GroupingSettings ShouldFlattenSeries="True">
                        <telerik:ChartGroupDescriptor Member="TaskTypeName"></telerik:ChartGroupDescriptor>
                    </telerik:GroupingSettings>
                </telerik:SeriesMapping.GroupingSettings>
                <telerik:SeriesMapping.SortDescriptors>
                    <telerik:ChartSortDescriptor Member="TaskTypeName" SortDirection="Descending"></telerik:ChartSortDescriptor>
                </telerik:SeriesMapping.SortDescriptors>
                <telerik:ItemMapping FieldName="TaskTypeName" DataPointMember="XCategory"></telerik:ItemMapping>
                <telerik:ItemMapping FieldName="Count" DataPointMember="YValue" AggregateFunction="Sum"></telerik:ItemMapping>
            </telerik:SeriesMapping>
            <telerik:SeriesMapping LegendLabel="Pending">
                <telerik:SeriesMapping.SeriesDefinition>
                    <telerik:HorizontalStackedBarSeriesDefinition ShowItemLabels="True">
                        <telerik:HorizontalStackedBarSeriesDefinition.LabelSettings>
                            <telerik:BarLabelSettings LabelDisplayMode="Inside"></telerik:BarLabelSettings>
                        </telerik:HorizontalStackedBarSeriesDefinition.LabelSettings>
                    </telerik:HorizontalStackedBarSeriesDefinition>
                </telerik:SeriesMapping.SeriesDefinition>
                <telerik:SeriesMapping.FilterDescriptors>
                    <telerik:ChartFilterDescriptor Member="AssetStatus" Operator="IsEqualTo" Value="Pending"></telerik:ChartFilterDescriptor>
                </telerik:SeriesMapping.FilterDescriptors>
                <telerik:SeriesMapping.GroupingSettings>
                    <telerik:GroupingSettings ShouldFlattenSeries="True">
                        <telerik:ChartGroupDescriptor Member="TaskTypeName"></telerik:ChartGroupDescriptor>
                    </telerik:GroupingSettings>
                </telerik:SeriesMapping.GroupingSettings>
                <telerik:SeriesMapping.SortDescriptors>
                    <telerik:ChartSortDescriptor Member="TaskTypeName" SortDirection="Descending"></telerik:ChartSortDescriptor>
                </telerik:SeriesMapping.SortDescriptors>
                <telerik:ItemMapping FieldName="TaskTypeName" DataPointMember="XCategory"></telerik:ItemMapping>
                <telerik:ItemMapping FieldName="Count" DataPointMember="YValue" AggregateFunction="Sum"></telerik:ItemMapping>
            </telerik:SeriesMapping>
        </telerik:SeriesMappingCollection>
    </UserControl.Resources>


    Thanks for your help.
  2. Justin
    Justin avatar
    11 posts
    Member since:
    Feb 2011

    Posted 08 Mar 2011 Link to this post

    For anyone who may google this thread in the future, we fixed the problem. We did not change anything in the XAML above. We changed a style so that all the charts in our project (currently only one) would have this color scheme.
  3. Mike
    Mike avatar
    34 posts
    Member since:
    Jan 2010

    Posted 08 Mar 2011 Link to this post

    Hi Justin and community,
    I would like to know how did you achieve that.

    This might help me to solve my problem.


    My problem is, I have a bar chart with 2 series(% value) with one palette brush (green)
    I want to find a way to change the background of my bar to red if the value exceed 80% for example( so my user know there is something wrong and could drill down to a more detailed view.

    Is there anyway to get the background property of any series? Then I could use a converter to change the color of my bar.
    Or maybe you know another way to achieve that?

    Thank you
Back to Top