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">

                <Setter.Value>

                    <ControlTemplate TargetType="chartingToolkit:BubbleDataPoint">

                        <chartingToolkit:Chart Name="pieChart" Background="Transparent"  BorderBrush="Transparent" BorderThickness="0" Padding="0,0,0,0">                           

                            <chartingToolkit:Chart.Series>

                                <chartingToolkit:PieSeries Name="pieSeries" DependentValuePath="Value" ItemsSource="{Binding Breakdown}">

                                </chartingToolkit:PieSeries>

                            </chartingToolkit:Chart.Series>

                        </chartingToolkit:Chart>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

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.

<chartingToolkit:Chart.Template>

<ControlTemplate TargetType="chartingToolkit:Chart">

      <Border Background="{TemplateBinding Background}"    

BorderBrush="{TemplateBinding  BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">

        <Grid>

              <chartingprimitives:EdgePanel x:Name="ChartArea">

              <Grid Canvas.ZIndex="-1" Background="Transparent" />

              <Border Canvas.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />

              </chartingprimitives:EdgePanel>

      </Grid>

     </Border>

</ControlTemplate>

</chartingToolkit:Chart.Template>

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