Category / Section
How to link a pie chart to the contents of the pivot table
It can be achieved by making use of DockingManager which is available in our control. The following code snippet explains the same.
XAML
<syncfusion:DockingManager Grid.Row="1" UseDocumentContainer="False" Name="dmStrat">
<!-- Customized Header Template-->
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel LastChildFill="True" >
<TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"
VerticalAlignment="Center" Margin="5,0,0,0" />
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
<!-- Find Results docking window-->
<!-- PivotGrid Designer docking window -->
<Grid syncfusion:DockingManager.Header="Chart Container"
Background="Transparent"
Name="_pvDesginer"
syncfusion:DockingManager.DesiredHeightInDockedMode="300"
syncfusion:DockingManager.DesiredMaxHeightInDockedMode="400"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.SideInDockedMode="Bottom">
<syncfusion:Chart Name="PieChart1" >
<!--Chart area to present chart segments-->
<syncfusion:ChartArea BorderThickness="0" RenderTransformOrigin="0.5,0.5" >
<!--Chart 1st series declaration-->
<syncfusion:ChartSeries ShowDataLabels="False" Name="Series1"
Type="Pie" StrokeThickness="0" Label="PivotGrid's ItemSource" BindingPathX="Product" BindingPathsY="Quantity">
<!--Chart series Adornment declaation-->
<syncfusion:ChartSeries.AdornmentsInfo>
<syncfusion:ChartAdornmentInfo SegmentIsOut="True" SegmentLabelFontSize="8" SegmentShowLine="True" x:Name="Adornments" LabelContentPath="DataPoint.Tag.Date" Visible="True" SegmentHorizontalAlignment="Center" SegmentVerticalAlignment="Top" ConnectorTemplate="{StaticResource ConnectorTemplate}"/>
</syncfusion:ChartSeries.AdornmentsInfo>
</syncfusion:ChartSeries>
<!--ChartArea Legend declaration-->
<syncfusion:ChartArea.Legend>
<syncfusion:ChartLegend ColumnsCount="3" syncfusion:Chart.Dock="Left" CornerRadius="0" ItemMargin="5,0,5,0" ItemTemplate="{StaticResource LegendTemplate1 }" ElementMargin="5" BorderThickness="1"/>
</syncfusion:ChartArea.Legend>
</syncfusion:ChartArea>
</syncfusion:Chart>
</Grid>
<!--Pivot Grid Area-->
<syncfusion:DockingManager.ClientControl>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<syncfusion:PivotGridControl x:Name="pivotGrid1" ItemSource="{Binding SalesData}">
<syncfusion:PivotGridControl.PivotRows>
<syncfusion:PivotItem FieldMappingName="Product" FieldHeader="Product" TotalHeader="Total"/>
<syncfusion:PivotItem FieldMappingName="Date" FieldHeader="Date" TotalHeader="Total"/>
</syncfusion:PivotGridControl.PivotRows>
<syncfusion:PivotGridControl.PivotColumns>
<syncfusion:PivotItem FieldMappingName="Country" FieldHeader="Country" TotalHeader="Total"/>
</syncfusion:PivotGridControl.PivotColumns>
<syncfusion:PivotGridControl.PivotCalculations>
<syncfusion:PivotComputationInfo CalculationName = "Total" SummaryType="DecimalTotalSum" Description = "Summation of values" FieldName = "Quantity" Format = "#,##0"/>
</syncfusion:PivotGridControl.PivotCalculations>
<syncfusion:PivotGridControl.PivotFields>
<syncfusion:PivotItem FieldMappingName="State" FieldHeader="State" TotalHeader="Total"/>
</syncfusion:PivotGridControl.PivotFields>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<action:PivotGridLoadAction TargetName="Series1" />
</i:EventTrigger>
<i:EventTrigger EventName="DataRefreshed">
<action:DataRefreshedAction TargetName="Series1" />
</i:EventTrigger>
</i:Interaction.Triggers>
</syncfusion:PivotGridControl>
</Grid>
</syncfusion:DockingManager.ClientControl>
</syncfusion:DockingManager>

Figure: Linking Pie chart with pivot table