Silverlight Charting: Setting Colors
Posted
Sat, Feb 19 2011 14:47
by
Deborah Kurata
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!