We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: July 18, 2019 |
Last Revised Date: August 21, 2019

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.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon