Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Pie Chart Styling in the Silverlight Toolkit - Cross-Slice Gradients

Pete Brown - 04 December 2008

First, hats off to Mehdi for digging up the root solution to this and to Jafar Husain for bringing it to my attention.

The default styles for the charts in Silverlight look pretty good. However, one thing that was driving me nuts is the way the gradients are per-slice in the pie chart. Because of that, you end up with some really odd highlighting effects:

image

It doesn’t look bad, but it’s not quite what I was looking for. In the default styles, each slice looks like it pillows up from the overall pie. What I want, is a pie that looks like it has a smooth top and slightly rounded outside edges.

I was looking for a good way to create a chart where the pie slices all have different colors, but the overall gradient is unified across them to create a beveled/rounded look.

The example Mehdi sent me looks like this:

image

Unless you’re developing a BI dashboard for Rainbow Brite, you probably won’t use those colors. However, it proves you can have a gradient unified across all the pie slices. Here’s the Xaml:

<charting:Chart Width="300" Height="300">
    <charting:Chart.Series>
        <charting:PieSeries>
            <charting:PieSeries.StylePalette>
                <datavis:StylePalette>
                    <Style TargetType="charting:PieDataPoint">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush MappingMode="Absolute" 
                                                     StartPoint="50,50" 
                                                     EndPoint="150,150">
                                    <GradientStop Color="Red" Offset="0"/>
                                    <GradientStop Color="Green" Offset="0.3"/>
                                    <GradientStop Color="Blue" Offset="0.7"/>
                                    <GradientStop Color="Pink" Offset="1"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </datavis:StylePalette>
            </charting:PieSeries.StylePalette>
            <charting:PieSeries.ItemsSource>
                <controls:ObjectCollection>
                    <sys:Double>1</sys:Double>
                    <sys:Double>2.33333325386047</sys:Double>
                    <sys:Double>3.66666674613953</sys:Double>
                    <sys:Double>5</sys:Double>
                </controls:ObjectCollection>
            </charting:PieSeries.ItemsSource>
        </charting:PieSeries>
    </charting:Chart.Series>
</charting:Chart>

The key is the MappingMode of Absolute. That changes how the StartPoint and EndPoint (and later the Center and Radius) are interpreted. Instead of being between 0 and 1 and treated as a percentage of the whole, they are pixel positions.

Given his start, it’s pretty easy to take that and work with the gradients to do this:

image

The colors are a little on the bright side, but you can apply your own pallet and create some nice subtle shading effects.

Here’s the markup

<charting:Chart Width="300" Height="300">
    <charting:Chart.Series>
        <charting:PieSeries>
            <charting:PieSeries.StylePalette>
                <datavis:StylePalette>
                    <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>
                </datavis:StylePalette>
            </charting:PieSeries.StylePalette>
            <charting:PieSeries.ItemsSource>
                <controls:ObjectCollection>
                    <sys:Double>1</sys:Double>
                    <sys:Double>2.33333325386047</sys:Double>
                    <sys:Double>3.66666674613953</sys:Double>
                    <sys:Double>5</sys:Double>
                </controls:ObjectCollection>
            </charting:PieSeries.ItemsSource>
        </charting:PieSeries>
    </charting:Chart.Series>
</charting:Chart>

The downside to that, though, is the set of magic numbers in there, repeated several times. Since we’re using Absolute MappingMode, the Origin and Center are no longer treated as percentages of the container. Instead, they are pixel positions.

Those magic numbers make me ill. They just smell bad. Silverlight doesn’t support UI->UI binding, so we’ll need to provide another mechanism to get us the info. I’ll post the details in the next post on this topic.

   
posted by Pete Brown on Thursday, December 4, 2008
filed under:    

3 comments for “Pie Chart Styling in the Silverlight Toolkit - Cross-Slice Gradients”

  1. Ryan Keetersays:
    Great post, keep the charting coming. I think that some of the most interesting things that can be done with Silverlight and all RIA technologies is data visualization. Sure, the pie chart is old hat, but it is invaluable in the real data that it can give you.
    I wonder if it would be possible to hook up a pie chart to TwitScoop and dynamically update the values. Personally, I feel that a pie chart can display actual data much better than a Tag Cloud.
  2. TheChemicalB0ysays:
    Best regards:
    This code "xaml" is compatible with Net Framework 4?
    What type of namespace should I use to work?
    I used the code in an application but I have the following error:

    Unrecognized element "StylePalette" within <charting:PieSeries.StylePalette>.

Comment on this Post

Remember me

14 trackbacks for “Pie Chart Styling in the Silverlight Toolkit - Cross-Slice Gradients”

  1. Pie Chart Styling in the Silverlight Toolkit - Cross-Slice Gradients | Silverlight Guidesays:
    PingBack from http://www.silverlightguide.com/news/pie-chart-styling-in-the-silverlight-toolkit-cross-slice-gradients
  2. Dew Drop - December 5, 2008 | Alvin Ashcraft's Morning Dewsays:
    PingBack from http://www.alvinashcraft.com/2008/12/05/dew-drop-december-5-2008/
  3. Community Blogssays:
    In this issue: Pete Brown, Tim Greenfield, Boyan Nikolov, Jesse Liberty, Mike Ormond, David Justice,
  4. Delay's Blogsays:
    One of the goals of Charting for the Silverlight Toolkit is to enable rich, flexible styling by designers.
  5. Microsoft Weblogssays:
    One of the goals of Charting for the Silverlight Toolkit is to enable rich, flexible styling by designers
  6. Delay's Blogsays:
    It's been a couple of months since I shared my semi-comprehensive page of Charting resources on the web
  7. Microsoft Weblogssays:
    It's been a couple of months since I shared my semi-comprehensive page of Charting resources on the web
  8. Felix Wang | Evangelizing the Next Websays:
    Overviews ( 100 level ) Silverlight Toolkit Released – More controls! - Tim Heuer 's during the PDC keynote
  9. DotNetClub Complutense Madridsays:
    En el blog de Felix Wang , he encontrado este artículo donde se agrupan una colección de
  10. Delay's Blogsays:
    It's been a while since the March 09 release of the Silverlight Toolkit - and even longer since I last
  11. Microsoft Weblogssays:
    It's been a while since the March 09 release of the Silverlight Toolkit - and even longer since I last
  12. Microsoft Weblogssays:
    In the time since posting my last collection of Silverlight/WPF Charting links , there's been some great
  13. Microsoft Weblogssays:
    In the time since sharing my last collection of Silverlight/WPF Charting links , there have been some
  14. Microsoft Weblogssays:
    In the time since sharing my last collection of Silverlight/WPF Charting links , there have been some