Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

February 19, 2011

Silverlight Charting: Setting Colors

Filed under: Silverlight @ 4:47 pm

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.

image

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

Enjoy!

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2020 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs