Saturday, 5 May 2012

Customising the Bubble Series to have Piechart-like Datapoints: Part 3

Go To <<Part 2
Customising the Bubble Chart
Now for the main score. 
AT the heart of this customisation is the DataPointStyle of the BubbleSeries. So what we need to do is to define a style that would change the plain bubbles to sectored ones (as in a pie chart). In this vein, our task is simple: to define a pie series as a style in the resources and set it as the DataPointStyle of the BubbleSeries.

Step 1:Define a Style with the Pie Series as its template.
<Style x:Key="MyPieStyle" TargetType="chartingToolkit:BubbleDataPoint">
            <Setter Property="Template">
                    <ControlTemplate TargetType="chartingToolkit:BubbleDataPoint">
                        <chartingToolkit:Chart Name="pieChart" Background="Transparent"  BorderBrush="Transparent" BorderThickness="0" Padding="0,0,0,0">                           
                                <chartingToolkit:PieSeries Name="pieSeries" DependentValuePath="Value" ItemsSource="{Binding Breakdown}">
Note that the PieSeries has its DependentValuePath pointing to the value property of the Breakdown class.

Step 2: Set the DataPointStyle property of the bubble series to the ‘MyPieStyle’ defined above.
DataPointStyle="{DynamicResource MyPieStyle}"
Yeah, I know I didn’t warn you about this. There’s still a little more to do. But I’ll explain what happened above.
Just like the bubble series, the default implementation of the Pie Series has a Legend and a chart container (background). So by setting the Bubble Series’ DatapointStyle to the Pie Series, It attempts to plot the PieSeries and all its embodiments into the datapoint. In most cases this is actually too large to fit into the datapoint and most will not display at all except the largest datapoint (as can be seen above).

I took you through this first, so that you would have a good understanding of why I had to do take the subsequent steps.

Step 3: Removal of Legend and Background of each PieChart.
This is where reference to the WPFToolkit Source code was made. It basically involves redefining the default Template of the PieSeries, which can only be gotten from the source.
Add the code segment below between the <chartingToolkit:Chart></chartingToolkit:Chart> tag.
<ControlTemplate TargetType="chartingToolkit:Chart">
      <Border Background="{TemplateBinding Background}"    
BorderBrush="{TemplateBinding  BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
              <chartingprimitives:EdgePanel x:Name="ChartArea">
              <Grid Canvas.ZIndex="-1" Background="Transparent" />
              <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />

The job is done! Here is the result you’ll get.


  1. Thx mate very good example. But I still have some issues with it. The 'chartingToolkit:Chart.Template' seems not to work for me. At first a bracket is missing in the code above at the BorderBrush. But even when fixing this I still don't see the full pies. Even in full screen. Seems as there is some code missing in the Template, isn't it? Please help...

  2. Wow...I am so sorry. My sincere apologies. I just missed your comment somehow; though I have not posted here in a long time.
    If its not too late, then we can still work on fixing the issues you have?

  3. I have included the missing brace, as you pointed out; thanks.