Creating Custom colors for PieChart in Silverlight


HTML clipboard

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 :

<?xml version="1.0" encoding="utf-8" ?>
<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>
                    <Style TargetType="charting:PieDataPoint">
                              <Setter Property="Background">
                                        <Setter.Value>
                                                  <RadialGradientBrush MappingMode="Absolute"
                                                    ="" GradientOrigin="92,102"
                                   =""                  Center="92,102"
                                                    ="" RadiusX="102"
                                                    ="" RadiusY="102"
                                                    ="" >
                         
                                                            <GradientStop Color="Yellow" Offset="0.0"/>
                                                            <GradientStop Color="Yellow" Offset="0.7"/>
                                                            <GradientStop Color="Orange" Offset="1.0"/>
                                                       
                  </RadialGradientBrush>
                                             
            </Setter.Value>
                                   
      </Setter>
                         
</Style>
                    <Style TargetType="charting:PieDataPoint">
                              <Setter Property="Background">
                                        <Setter.Value>
                                                  <RadialGradientBrush MappingMode="Absolute"
                                                    ="" GradientOrigin="92,102"
                                                    ="" Center="92,102"
               =""                                      RadiusX="102"
                                                    ="" RadiusY="102"
                                                    ="" >
                         
                                                            <GradientStop Color="Red" Offset="0.0"/>
                                                            <GradientStop Color="Red" Offset="0.7"/>
                                                            <GradientStop Color="DarkRed" Offset="1.0"/>
                                                       
                  </RadialGradientBrush>
                                             
            </Setter.Value>
                                   
      </Setter>
                         
</Style>
                    <Style TargetType="charting:PieDataPoint">
                              <Setter Property="Background">
                                        <Setter.Value>
                                                  <RadialGradientBrush MappingMode="Absolute"
                                                    ="" GradientOrigin="92,102"
                                                    ="" Center="92,102"
                                                    ="" RadiusX="102"
                                                    ="" RadiusY="102"
                                                    ="" >
                         
                                                            <GradientStop Color="Green" Offset="0.0"/>
                                                            <GradientStop Color="Green" Offset="0.7"/>
                                                            <GradientStop Color="DarkGreen" Offset="1.0"/>
                                                       
                  </RadialGradientBrush>
                                             
            </Setter.Value>
                                   
      </Setter>
                          
</Style> 

If you want more colors you can add styles.

Applying to PieChart:

To use this style write this line:

newChart.StylePalette = Application.Current.Resources["PieChartStyle"] as StylePalette;

That's it. Thanks for reading the post. J

Up Next
    Ebook Download
    View all
    Learn
    View all