In this post we will see how to change the default color changing behavior of the pie chart control in Silverlight.
The Problem:
Typically in a project, while generating reports we use pie charts. Generally we have to generate multiple reports. If we use separate pie chart controls for each reports then it will be a mess. So we will use only one pie chart. But the problem is that every time the chart refreshes the pie chart's colors also refreshes. Sometimes, the color combinations are worst. Like red and brown just beside each other. It's a mess.
Creating a Pie chart:
In the xaml first include the following namespace:
xmlns:chartingToolkit="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
Then create the chart control:
<Grid
x:Name="myChartArea">
<chartingToolkit:Chart
x:Name="myChart"
>
</chartingToolkit:Chart>
</Grid>
Now create a Report Object:
public class
ReportObject
{
public int
Count { get; set;
}
public
string Token { get;
set; }
}
Suppose you have a List of this Report Object. Now create the PieChart dynamically in the code behind:
PieSeries newChart =
new
PieSeries();
newChart.ItemsSource=List of Report Objects;
newChart.HorizontalAlignment =
HorizontalAlignment.Stretch;
newChart.VerticalAlignment =
VerticalAlignment.Stretch;
newChart.DependentValueBinding = new
Binding("Count");
newChart.IndependentValueBinding = new
Binding("Token");
myChart.Series.Add(newChart);
If you run this, then you will get your default pie chart.
Creating the Style:
The default pie chart uses its StylePalette for the colors. So we need to over ride that. You can have a pie chart statically, then edit the template and create your color behavior.
<datavis:StylePalette
x:Key="PieChartStyle">
<Style
TargetType="charting:PieDataPoint">
<Setter
Property="Background">
<Setter.Value>
<RadialGradientBrush
MappingMode="Absolute"
=""
GradientOrigin="92,102"
=""
Center="92,102"
=""
RadiusX="102"
=""
RadiusY="102"
=""
>
<GradientStop
Color="Blue"
Offset="0.0"/>
<GradientStop
Color="Blue"
Offset="0.7"/>
<GradientStop
Color="DarkBlue"
Offset="1.0"/>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Style>
</datavis:StylePalette>
This will set the PieColor back ground to dark blue. Now this is only for one "token" so if your List of Report Object has 4 different tokens all will come as blue. Suppose your List is
List[1]: token="Kolkata" count="200000"
List[2]: token="Delhi" count="130000"
List[3]: token="Mumbai" count="240000"
List[4]: token="Chennai" count="180000"
Then all the pies will have blue color. For this you need to define the Styles four times. So the final Style Peallete will be :
Join the conversation! Your thoughts help the community grow.