TL;DR: Learn how to create a multi-layer pie chart in WPF to visualize the relationship between vitamin sources and their caloric content. This hands-on guide walks developers through binding hierarchical nutrition data, configuring layered chart series, and building interactive dashboards for health-focused desktop applications.
Welcome to our Chart of the Week blog series!
Charts are powerful tools for visualizing data, helping users grasp complex datasets by highlighting trends, patterns, and relationships. They’re widely used in business intelligence, reporting, and analytics to support data-driven decisions.
Among various chart types, circular charts like pie and doughnut charts are ideal for showing proportional data. However, when working with layered or hierarchical datasets, a standard pie chart may not suffice. That’s where Multi-Layered Pie Charts come in.
In this blog, we’ll walk through creating a Multi-Layered Pie Chart in WPF using the Syncfusion Circular Chart components, focusing on a nutrition analysis scenario.
Circular Charts: Turning data into visual impact
Circular charts display data in a round format and are commonly used to represent proportions, categories, or hierarchical relationships. This includes both Pie Charts and Doughnut Charts.
What is a Multi-Layered Pie Chart?
A Multi-Layered Pie Chart (also known as a concentric or radial pie chart) builds on the traditional pie chart by adding multiple rings. Each ring represents a separate PieSeries with its own data source. This format is ideal for comparing related but distinct datasets like vitamin types and their food sources.
Let’s visualize the relationship between various vitamin groups and their corresponding food sources using a Multi-Layered Pie Chart in WPF. To enhance interactivity, we’ll also integrate the Syncfusion Diagram control.
Step 1: Configure the Multi-Layered Pie Chart
Start by collecting structured nutritional data (e.g., from Wikipedia) and building your model and ViewModel. To configure the Syncfusion WPF Charts control, refer to the official documentation.
In this example, we will create two layers by defining two PieSeries:
- The inner pie represents major vitamin groups (A, B, C, D, E).
- The outer pie shows specific food sources for all those vitamins.
Here’s a snippet of the chart configuration:
<chart:SfChart x:Name="chart"
Grid.Column="0"
Grid.RowSpan="2"
SelectionChanged="SfChart_SelectionChanged">
<chart:SfChart.DataContext>
<local:VitaminFoodViewModel/>
</chart:SfChart.DataContext>
<chart:PieSeries x:Name="pieSeries1"
ItemsSource="{Binding Vitamins}"
XBindingPath="Name"
YBindingPath="Value"
SegmentColorPath="Color">
</chart:PieSeries>
<chart:PieSeries x:Name="pieSeries2"
ItemsSource="{Binding FoodSources}"
XBindingPath="Source"
YBindingPath="Value"
SegmentColorPath="Color">
</chart:PieSeries>
</chart:SfChart>
Step 2: Adding interactivity with selection
To make the chart interactive, handle the SelectionChanged event. When a user clicks on a segment, the chart highlights the selected vitamin group and its related food sources.
Here’s how the event handler works:
private void SfChart_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
if (e.SelectedSegment?.Item == null) return;
string vitaminGroup = "";
if (e.SelectedSegment.Item is FoodSource foodSource)
{
vitaminGroup = foodSource.VitaminGroup;
}
else if (e.SelectedSegment.Item is Vitamin vitamin)
{
vitaminGroup = vitamin.Name.Replace("Vitamin ", "");
}
if (string.IsNullOrEmpty(vitaminGroup) || lastSelectedSegment == vitaminGroup) return;
lastSelectedSegment = vitaminGroup;
// Apply custom color models to highlight the selected group
pieSeries1.ColorModel = ApplyInnerPieSelection(vitaminGroup);
pieSeries2.ColorModel = ApplyOuterPieSelection(vitaminGroup);
}
private ChartColorModel ApplyOuterPieSelection(string vitaminGroup)
{
var colorModel = new ChartColorModel();
// Logic to fade unselected segments and highlight selected ones
return colorModel;
}
private ChartColorModel ApplyInnerPieSelection(string vitaminGroup)
{
var colorModel = new ChartColorModel();
// Logic to fade unselected segments and highlight selected ones
return colorModel;
}
The SelectionChanged event handler identifies the selected segment’s group and applies a custom color palette using the ColorModel property to highlight the related segments in both pie series. Segments that are not part of the selected group fade out. Refer to the official custom palette documentation for more details.
Optional enhancements: Displaying detailed information
To show more detailed data, we use the Syncfusion SfDiagram control. When a user selects a vitamin group, the diagram updates to show its food sources and caloric values in a hierarchical tree structure. You can configure the Syncfusion WPF Diagram control using the official documentation.
Here’s a basic diagram setup:
<Syncfusion:SfDiagram x:Name="diagram"
Grid.Column="1"
Grid.Row="1"
DefaultConnectorType="CubicBezier"
Nodes="{Binding Nodes}"
Connectors="{Binding Connectors}"
DataSourceSettings="{Binding DataSourceSettings}"
LayoutManager="{Binding LayoutManager}">
<Syncfusion:SfDiagram.DataContext>
<local:MultiParent x:Name="multiParent"/>
</Syncfusion:SfDiagram.DataContext>
</Syncfusion:SfDiagram>
Finally, define the UpdateDiagram method in MainWindow.xaml.cs which is called from the SelectionChanged event to refresh the diagram’s data source.
private void SfChart_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
...
UpdateDiagram(vitaminGroup);
}
private void UpdateDiagram(string vitaminGroup)
{
if (diagram.DataSourceSettings != null)
{
this.diagram.DataSourceSettings.DataSource = parent.GetVitaminData(vitaminGroup);
}
}
After executing the previous code examples, the Chart will be rendered as shown below.
FAQs
Q1. Can I use a doughnut chart instead of a pie chart?
Yes! Just set the PieCoefficient property to a value less than 1 (e.g., 0.7) to convert PieSeries into a doughnut chart.
Q2. How can I customize the diagram nodes?
Use ContentTemplateforNode to style nodes with images, icons, or formatted text. You can also bind node shapes to different data types.
Q3. Can users interact with the chart by exploding on a segment?
Absolutely. Use ExplodeOnMouseClick and control behavior with:
- ExplodeAll
- ExplodeIndex
- ExplodeRadius
Q4. Can I export the chart to an image or PDF?
Yes. SfChart supports exporting to PNG, JPEG, and other formats, great for reporting.
GitHub reference
For more details, refer to the GitHub sample.
Conclusion
Multi-layer pie charts offer a visually engaging way to represent hierarchical data. By combining the Syncfusion Circular Chart and Diagram control in a WPF application, you can build interactive and informative dashboards. This approach lets users see the big picture and drill down into details seamlessly.
If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, try the free 30-day trial.
Need help? Reach out via support forums, support portal, or feedback portal. We are always happy to assist you!
Related Blogs
- Visualize Your Music: Real-Time WPF Charts that Sync with Sound
- How to Build a Real-Time Cloud Monitoring Dashboard Using WPF Charts
- Build a Real-Time Loan Calculator Using WPF Charts and DataGrid
- Chart of the Week: Creating A Trend Line Using WPF Charts to Visualize Rapid Heating in North American Oceans
This article was originally published at Syncfusion.com.
Top comments (0)