Deborah's Developer MindScape

When working with charts, by default the built-in styling sets the chart colors. But there may be times that you want to control the colors. This post covers a technique for manually setting the chart colors.

This prior post sets the ground work for displaying a chart. This current post adds color definition to the chart from that prior post.

The key to setting the color for a bar in the chart is to set the DataPointStyle. Setting the background color of the data point sets the bar color. You can use any brush, including a RadialGradientBrush as shown in the example below.

    <toolkit:Chart Name="chart1"
                    Title="Scores"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch">
    <toolkit:ColumnSeries DependentValuePath="Project1Score"
                            IndependentValuePath="StudentName"
                            ItemsSource="{Binding StudentList}"
                            Title="{Binding TitleList[0]}">
        <toolkit:ColumnSeries.DataPointStyle>
            <Style TargetType="toolkit:ColumnDataPoint">
                <Setter Property="Background">
                    <Setter.Value>
                        <RadialGradientBrush GradientOrigin="-0.1,-0.1"
                                                Center="0.075,0.015"
                                                RadiusX="1.05"
                                                RadiusY="0.9">
                            <GradientStop Color="#FFFDE79C" />
                            <GradientStop Color="#FFF6BC0C"
                                            Offset="1" />
                        </RadialGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:ColumnSeries.DataPointStyle>
    </toolkit:ColumnSeries>

    <toolkit:ColumnSeries DependentValuePath="Project2Score"
                            IndependentValuePath="StudentName"
                            ItemsSource="{Binding StudentList}"
                            Title="{Binding TitleList[1]}">
        <toolkit:ColumnSeries.DataPointStyle>
            <Style TargetType="toolkit:ColumnDataPoint">
                <Setter Property="Background">
                    <Setter.Value>
                        <RadialGradientBrush GradientOrigin="-0.1,-0.1"
                                                Center="0.075,0.015"
                                                RadiusX="1.05"
                                                RadiusY="0.9">
                            <GradientStop Color="#FF9DC2B3" />
                            <GradientStop Color="#FF1D7554"
                                            Offset="1" />
                        </RadialGradientBrush>

                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:ColumnSeries.DataPointStyle>

    </toolkit:ColumnSeries>
    <toolkit:ColumnSeries DependentValuePath="Project3Score"
                            IndependentValuePath="StudentName"
                            ItemsSource="{Binding StudentList}"
                            Title="{Binding TitleList[2]}">
        <toolkit:ColumnSeries.DataPointStyle>
            <Style TargetType="toolkit:ColumnDataPoint">
                <Setter Property="Background">
                    <Setter.Value>
                        <RadialGradientBrush GradientOrigin="-0.1,-0.1"
                                                Center="0.075,0.015"
                                                RadiusX="1.05"
                                                RadiusY="0.9">
                            <GradientStop Color="#FFFBB7B5" />
                            <GradientStop Color="#FF702828"
                                            Offset="1" />
                        </RadialGradientBrush>
                    </Setter.Value>
                </Setter>
            </Style>
        </toolkit:ColumnSeries.DataPointStyle>
    </toolkit:ColumnSeries>
</toolkit:Chart>

The result is shown below.

Use this technique any time you need to set the colors of the columns in the chart.

Enjoy!