How to use the drill-down functionality in Xamarin.Forms Chart?

1 min read

The drill-down functionality is used to navigate from one chart to another chart when tapping a segment. You can achieve this functionality in our SfChart using the SelectionChangedEvent.

For example, in automobile sales concept, initially all the automobile names are displayed in a pie chart. When you tap a particular automobile segment to know more details, it generates a new chart, which provides the further detailed information. This behavior is achieved in SfChart using the following code examples and you can download the complete sample here.

XAML:

<chart:SfChart x:Name="chart" SelectionChanged="Chart_SelectionChanged" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
 
   <chart:SfChart.Legend>
      <chart:ChartLegend/>
   </chart:SfChart.Legend>
 
   <chart:PieSeries EnableDataPointSelection="True" ItemsSource="{Binding PieData       XBindingPath="Type" YBindingPath="Value" >
 
       <chart:PieSeries.DataMarker>
          <chart:ChartDataMarker LabelContent="Percentage"/>
       </chart:PieSeries.DataMarker>
 
   </chart:PieSeries>
</chart:SfChart>

C#:

//Page1:
 
Private void Chart_SelectionChanged(object sender, ChartSelectionEventArgs e)
 {
   IList items = e.SelectedSeries.ItemsSource as IList;
   Model selectedDatapoint = items[e.SelectedDataPointIndex] as Model;
   Navigation.PushAsync(new SecondayPage(selectedDatapoint));
 }
 
//Page2:
public SecondayPage(Model selectedDatapoint)
{
    InitializeComponent();
    chart.Title.Text = "Automobile Sales in the" + selectedDatapoint.Type + "segment";
    this.selectedDatapoint = selectedDatapoint;
            
    ColumnSeries series = new ColumnSeries
    {
       XBindingPath = "Type",
       YBindingPath = "Value",
       ItemsSource = selectedDatapoint.Collections,
       DataMarker = new ChartDataMarker()
    };
    series.DataMarker.LabelContent = LabelContent.Percentage; 
    chart.Series.Add(series);
}

Output:

Drilldown functionality in Xamarin.Forms Chart. Drill-down functionality in Xamarin.Forms Chart.

Did you find this information helpful?

Yes

How to use the drill-down functionality in Xamarin.Forms Chart?

Output:

Access denied