Windows 8 XAML RT toolkit Color palette - Column Charts

Question

I'm building a windows store application and trying to use the chart component in XAML RT Toolkit. Now the problem is I want to represent each column bar with a specific colou. But then I'm not finding a way to do it. There's a similar question which is addressed for the pie chart color palette. But this doesn't seem to work in Column charts. Can somebody help ?

Answer 1

Hi Rajkumar, We too have a similar problem. Finally succeeded. Please check the following link.

http://blogs.msdn.com/b/delay/archive/2009/02/04/columns-of-a-different-color-customizing-the-appearance-of-silverlight-charts-with-re-templating-and-mvvm.aspx

To give different color, the essence is following.

Step 1.

Create a style under Page.Resource as follows.

<Page.Resources>
        <Style
    x:Key="**ColorByPreferenceColumn**"
    TargetType="charting:ColumnDataPoint">
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate
                TargetType="charting:ColumnDataPoint">
                        <Border
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Background="{Binding **ColorBackGround**}">
                                <Rectangle>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush>
                                            <GradientStop Color="#77ffffff" Offset="0"/>
                                            <GradientStop Color="#00ffffff" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                                <Border BorderBrush="#ccffffff" BorderThickness="1">
                                    <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                                </Border>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Step 2.

Apply the style to the chart control.

<charting:Chart  x:Name="BuildStatusChart" Title="Build Status" Foreground="Black" Margin="20,20,20,20">
           <charting:Chart.Series>

                <Series:ColumnSeries Title="Build Status" ItemsSource="{Binding Items}" 
                        IndependentValueBinding="{Binding Index}" HorizontalContentAlignment="Center"
                        DependentValueBinding="{Binding BuildTime}"
                        IsSelectionEnabled="False" SelectionChanged="OnSelectionChanged"  DataPointStyle="{StaticResource ColorByPreferenceColumn}" >
                 </Series:ColumnSeries>
            </charting:Chart.Series>
        </charting:Chart>

Step 3:

Note : the style name is "ColorByPreferenceColumn"  and color for each bar will be represented by "ColorBackGround". Search the above code segment , to know how it is applied. FInal thing is on code side have class with "ColorBackGround" peoperty.

public class Build : BindableBase
    {
        //Build Class 

 public Build() {}

 private SolidColorBrush _colorBackGround;
        public SolidColorBrush ColorBackGround
        {
            get { return _colorBackGround; }
            set { _colorBackGround = value; }
        }

       // And your properties......
}

Step 5:

Ofcpourse as you know,

Set the the binding collection. In our case it was

((ColumnSeries)this.BuildStatusChart.Series[0]).ItemsSource = items; // items collection of individual objects.

Best Regards, Anish.A.R