TL;DR: Turn raw AI investment data into actionable insights by building drilldown charts in .NET MAUI Toolkit. Use Doughnut and Column series to create interactive dashboards with smart labels, exploding segments, and smooth drilldown transitions for a seamless data exploration experience.
Welcome to our Chart of the Week blog series!
When working with complex datasets, presenting all details in a single chart can be overwhelming for users. Drilldown charts solve this by allowing users to start with a high-level view and then navigate deeper into specific data points. This interactive approach improves clarity and user engagement.
Understanding Drilldown Charts in .NET MAUI
Drilldown charts enable hierarchical data exploration. In .NET MAUI, Syncfusion provides powerful charting controls that make implementing drilldown functionality seamless. You can start with a Doughnut chart for top-level categories and drill down into a Column chart for detailed insights.
In this blog, we’ll explore how to visualize global corporate investment in AI using drilldown charts powered by the Syncfusion .NET MAUI Toolkit. We will structure investment data to represent parent-child relationships. For example:
- Parent level: Investment by entity type (e.g., Private, Public, M&A).
- Child level: Year-wise investment details for each entity.
Step 1: Configuring the Syncfusion .NET MAUI Doughnut Chart
Before implementing the .NET MAUI Doughnut Chart, structure your hierarchical AI investment data, sourced from Our World in Data, to enable drilldown functionality.
We define models such as InvestmentModel and InvestmentViewModel to organize this data efficiently.
Then, configure the Syncfusion .NET MAUI Doughnut Charts control using the code below.
<chart:SfCircularChart></chart:SfCircularChart>
To learn more about Doughnut Chart configuration, refer to this official documentation.
Data binding
To visualize AI investments by entity type, we use the SfCircularChart with a DoughnutSeries. This series binds to the DoughnutData collection in the InvestmentViewModel, where each data point represents a top-level investment category like Merger/Acquisition or Private Investment.
<chart:SfCircularChart>
...
<chart:DoughnutSeries ItemsSource="{Binding DoughnutData}"
XBindingPath="Type"
YBindingPath="Value"
ShowDataLabels="True"
CapStyle="BothFlat"
InnerRadius="0.5">
</chart:DoughnutSeries>
</chart:SfCircularChart>
Legend customization
The legend adapts to screen size for better readability, appearing on the right for larger screens and at the bottom on mobile. Each item matches the color of its chart slice, making it easy to identify categories like Merger/Acquisition or Private Investment.
To maintain a clean and responsive layout, a FlexLayout ensures the legend wraps neatly, keeps labels aligned, and prevents overlap.
<chart:SfCircularChart.Legend>
<local:LegendExt ToggleSeriesVisibility="True" Placement= "{OnPlatform Default=Right, Android=Bottom, iOS=Bottom}">
<local:LegendExt.ItemsLayout>
<FlexLayout
WidthRequest="370"
HeightRequest="72"
Direction="Column"
Wrap="Wrap"
AlignItems="Start"
AlignContent="Start"
VerticalOptions="Start"
HorizontalOptions="Start"/>
</local:LegendExt.ItemsLayout>
</local:LegendExt>
</chart:SfCircularChart.Legend>
Step 2: Enabling drill-down navigation from Doughnut to Column Chart
To make the Doughnut chart interactive, we capture user taps and navigate to a detailed view with year-wise investment data. This drill-down turns a static summary into a dynamic, exploratory experience.
When a user taps a chart segment, the SelectionChanging event is triggered. This invokes the OnDoughnutSeriesSelectionChanging method, which handles navigation to a detailed Column Chart view. This interaction enables users to explore investment data from a high-level overview to specific yearly trends, all within a seamless and intuitive experience.
<chart:SfCircularChart>
<chart:DoughnutSeries ItemsSource="{Binding DoughnutData}">
<chart:DoughnutSeries.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionChanging="OnDoughnutSeriesSelectionChanging"/>
</chart:DoughnutSeries.SelectionBehavior>
</chart:DoughnutSeries>
</chart:SfCircularChart>
private void OnDoughnutSeriesSelectionChanging(object sender, ChartSelectionChangingEventArgs e)
{
var series = sender as DoughnutSeries;
var items = series?.ItemsSource as IList;
int selectedIndex = e.NewIndexes[0];
var selectedData = items![selectedIndex] as InvestmentModel;
Navigation.PushAsync(new YearlyInvestmentPage(selectedData!, series!.PaletteBrushes[selectedIndex]));
e.Cancel = true;
}
Step 3: Visualizing year-wise investment trends with a Column Chart
Once a user taps a segment in the Doughnut Chart, it triggers a drilldown that navigates to the YearlyInvestment page. This page presents a detailed breakdown of AI investments by year using the Column Chart.
Each vertical bar in the chart represents the investment value for a specific year, helping users identify growth patterns and fluctuations over time. To support this visualization, we define models like YearlyInvestmentModel and update InvestmentViewModel to populate year-wise data for each investment category.
public class InvestmentViewModel
{
...
private ObservableCollection MergerAcquisitionData { get; set; }
…
public InvestmentViewModel()
{
MergerAcquisitionData = new ObservableCollection
{
new YearlyInvestmentModel("2013", 6886002147),
new YearlyInvestmentModel("2014", 7657430075),
…
};
}
}
The SfCartesianChart is ideal for plotting time-series or category-based data. By binding the YearlyBreakdown collection to the ColumnSeries, the chart dynamically reflects the correct data context based on user interaction, making the experience seamless and intuitive.
For detailed configuration options, refer to the official Syncfusion .NET MAUI Column Chart documentation.
<chart:SfCartesianChart Grid.Row="1" x:Name="chart" HorizontalOptions="Fill" VerticalOptions="Fill" Margin="{OnPlatform Android=5,Default=15,iOS=5}">
<chart:SfCartesianChart.Resources>
<DataTemplate x:Key="tooltipTemplate">
<Label Text="{Binding Item.FormattedValue}"
TextColor="White"
FontSize="12"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</DataTemplate>
</chart:SfCartesianChart.Resources>
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis LabelPlacement="BetweenTicks">
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Year"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis x:Name="yAxis" RangePadding="None">
<chart:NumericalAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="$0,,,B"/>
</chart:NumericalAxis.LabelStyle>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
<chart:ColumnSeries x:Name="series"
XBindingPath="Year"
YBindingPath="Value"
EnableTooltip="True"
TooltipTemplate="{StaticResource tooltipTemplate}"
ItemsSource="{Binding YearlyBreakdown}"/>
</chart:SfCartesianChart>
GitHub reference
For more details, refer to the GitHub demo.
Conclusion
Thank you for reading! In this blog, we explored how to visualize global corporate investment in AI using Syncfusion .NET MAUI Toolkit Charts. From high-level entity comparisons to year-wise trends, we saw how drilldown charts can turn complex financial data into clear, interactive insights.
Try building your own version using the steps above, and feel free to share your thoughts or questions in the comments!
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
- Build Interactive Doughnut Charts in .NET MAUI for Mobile Dashboards
- Visualizing Skyscraper Data with .NET MAUI Doughnut Chart and Maps
- Create a Flutter Semi-Doughnut Chart to Visualize Transport Emissions per Kilometer Traveled
- Creating a WPF Doughnut Chart to Visualize the New European Parliament’s Composition in 2024
This article was originally published at Syncfusion.com.
Top comments (0)