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 chart when tapping on a segment. .NET MAUI Chart has achieved this functionality by using the SelectionChanged event.
For example, initially, we displayed the monthly expense 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: On the main page, 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 in GitHub
Output:
Conclusion
I hope you enjoyed learning about how to use the drill-down functionality in .NET MAUI Chart (SfCartesianChart).
You can refer to our MAUI Cartesian Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our MAUI Cartesian Chart’s documentation to understand how to present and manipulate data.
For current customers, you can check out our WinForms components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our MAUI Cartesian Charts and other MAUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
