How to achieve drill-down functionality in UWP Charts?

Drill-down functionality allows a user to navigate from a general data overview to a more specific, detailed view. The UWP Chart (SfChart) control supports this feature through its SelectionChanged event. This article explains how to configure a chart to drill down from a primary PieSeries to a secondary ColumnSeries on a new page, using an automobile sales example.

Step 1: First, configure the main chart page. This involves adding an SfChart, defining a PieSeries to show the initial data, and enabling the selection behavior which is essential for triggering the drill-down action.

<syncfusion:SfChart SelectionChanged="Chart_SelectionChanged">
    <!--Definition of legend-->
    <syncfusion:SfChart.Legend>
        <syncfusion:ChartLegend/>
    </syncfusion:SfChart.Legend>

    <!--To enable the selection support-->
    <syncfusion:SfChart.Behaviors>
        <syncfusion:ChartSelectionBehavior EnableSelection="True" />
    </syncfusion:SfChart.Behaviors>

    <!--Series declaration-->
    <syncfusion:PieSeries ItemsSource="{Binding Data}" Palette="AutumnBrights" XBindingPath="Type" YBindingPath="Value" >
        <syncfusion:PieSeries.AdornmentsInfo>
            <syncfusion:ChartAdornmentInfo ShowLabel="True" />
        </syncfusion:PieSeries.AdornmentsInfo>
    </syncfusion:PieSeries>
</syncfusion:SfChart>

Step 2: In the code-behind, implement the Chart_SelectionChanged event handler. This code executes when a user clicks a pie segment, navigating them to a SecondPage and passing the selected data item to its constructor.

private void Chart_SelectionChanged(object sender, ChartSelectionChangedEventArgs e)
{
    IList items = e.SelectedSeries.ItemsSource as IList;
    if (e.SelectedIndex != -1)
    {
        //Set the current window content from navigated page which is representing the chart with detailed
        Window.Current.Content = new SecondPage(items[e.SelectedIndex] as Model);

        //To get back to initial page, enable the back button with the help of SystemNavigationManager's AppViewBackButtonVisibility.
        SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

        //Once back button click to view the entire automobile list then, it will keep the content of window as main page
        SystemNavigationManager.GetForCurrentView().BackRequested += (s, r) =>
        {
            Window.Current.Content = new MainPage();
            SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
        };
    }
}

Step 3: Create the SecondPage class which will display the detailed data. Its constructor accepts the Model object from the main page and assigns it to a public property, SelectedModel, making the data available for binding in XAML.

public sealed partial class SecondPage : Page
{
    //SelectedModel represents the collection of automobile variety list
    public Model SelectedModel { get; set; }

    public SecondPage(Model selectedDatapoint)
    {
        InitializeComponent();

        SelectedModel = selectedDatapoint;
    }
}

Step 4: Configure the chart on the drill-down page.

In the XAML for SecondPage, add another SfChart. This time, use a ColumnSeries and bind its ItemsSource to the Collections property of the SelectedModel that was passed from the initial page.

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:CategoryAxis>
        </syncfusion:CategoryAxis>
    </syncfusion:SfChart.PrimaryAxis>
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    <!--desired series declaration with populating the specific collection-->
    <syncfusion:SfChart.Series>
        <syncfusion:ColumnSeries XBindingPath="Type" 
                                 YBindingPath="Value" 
                                 ItemsSource="{x:Bind SelectedModel.Collections}" 
                                 Palette="BlueChrome">                                                      
            <syncfusion:ColumnSeries.AdornmentsInfo>
                <syncfusion:ChartAdornmentInfo/>
            </syncfusion:ColumnSeries.AdornmentsInfo>
        </syncfusion:ColumnSeries>
    </syncfusion:SfChart.Series>
</syncfusion:SfChart>

Output