Category / Section
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:
