How to use the drill-down functionality in .NET MAUI Chart (SfCartesianChart)?
This article describes how to use the drill-down functionality in the .NET MAUI Chart.
The drill-down functionality is used to navigate from one chart to another when tapping on a segment. The .NET MAUI Chart has achieved this functionality by using the SelectionChanged event.
For example, initially, we displayed the monthly expenses of some people in a pie chart. When you tap on a particular segment to know more details, it generates a new chart, which provides further detailed information.
The following steps will guide you on how to achieve this expected functionality.
Step 1: Create a pie chart with generated data and invoke the SelectionChanged event.
[XAML]
<chart:SfCircularChart>
<chart:SfCircularChart.Legend>
<chart:ChartLegend />
</chart:SfCircularChart.Legend>
<chart:PieSeries ItemsSource="{Binding PieData}"
XBindingPath="Type"
YBindingPath="Value"
ShowDataLabels="True"
PaletteBrushes="{Binding CustomBrushes}">
<!--To enable the selection support-->
<chart:PieSeries.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionChanged="OnPieSeriesSelectionChanged"/>
</chart:PieSeries.SelectionBehavior>
</chart:PieSeries>
</chart:SfCircularChart>Step 2: Drill-down functionality observed concepts.
[C#]
private void OnPieSeriesSelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
var series = sender as PieSeries;
var items = series.ItemsSource as IList;
int selectedIndex = e.NewIndexes[0];
// Get the selected segment data.
var selectedData = items[selectedIndex] as Model;
// Navigate to the next page, which represents the chart with details.
Navigation.PushAsync(new SecondaryPage(selectedData, series.PaletteBrushes[selectedIndex]));
}Step 3: Populate selected segment data on the navigated page.
[XAML]
<chart:SfCartesianChart x:Name="chart">
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis />
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:ColumnSeries x:Name="series"
XBindingPath="Type"
YBindingPath="Value"
ItemsSource="{Binding Collections}"/>
</chart:SfCartesianChart>
[C#]
public SecondaryPage(Model selectedData, Brush fill)
{
InitializeComponent();
this.chart.Title = "Monthly Expense Of " + selectedData.Type;
this.BindingContext = selectedData;
series.Fill = fill;
}Download the complete sample on GitHub.
Output:
Conclusion
I hope you enjoyed learning how to use the drill-down functionality in .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to present and manipulate data.
For current customers, check out our License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our MAUI Cartesian Charts and other MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
