Selection

SfChart supports selection that enables you to select a segment in a series or series itself.

Data Point Selection

You can select a data point by tapping on it. To enable the selection feature, set EnableDataPointSelection property as true for Series.

<chart:ColumnSeries EnableDataPointSelection="True" ItemsSource ="{Binding Data}" XBindingPath="Month" YBindingPath="Value"/>
ColumnSeries columnSeries = new ColumnSeries() 
{ 
	
	ItemsSource = Data, 
	XBindingPath = "Month", 
	YBindingPath = "Value" 

};

columnSeries.EnableDataPointSelection = true;

Data point selection support in Xamarin.Forms Chart

Following properties are used to configure the selection feature,

<chart:ColumnSeries EnableDataPointSelection="True" SelectedDataPointIndex="2" SelectedDataPointColor="Red" ItemsSource ="{Binding Data}" />
ColumnSeries columnSeries = new ColumnSeries();

columnSeries.SelectedDataPointIndex = 2;

columnSeries.SelectedDataPointColor = Color.Red;

Selecting data point and data point color support in Xamarin.Forms Chart

NOTE

For Accumulation series like pie, doughnut, pyramid and funnel, when you select a data point, the corresponding legend item also will be selected.

Series Selection

Series selection is used in case of multiple series when you want to highlight a particular series. Series Selection can be enabled by setting EnableSeriesSelection property to True. The SeriesSelectionColor property is used to set the color to highlight the series.

<chart:SfChart x:Name="Chart"  EnableSeriesSelection="True">

... 

<chart:SfChart.Series>
            <chart:ColumnSeries x:Name="series1" ItemsSource="{Binding Data}"  XBindingPath="XValue" YBindingPath="YValue" Color="#b2ebe7">
            </chart:ColumnSeries>
            <chart:ColumnSeries x:Name="series2" ItemsSource="{Binding Data1}" XBindingPath="XValue" YBindingPath="YValue" Color="#d3bee5">
            </chart:ColumnSeries>
			<chart:ColumnSeries x:Name="series2" ItemsSource="{Binding Data2}" XBindingPath="XValue" YBindingPath="YValue" Color="#c0d8f0">
            </chart:ColumnSeries>
</chart:SfChart.Series>
chart.EnableSeriesSelection = true;

ColumnSeries columnSeries = new ColumnSeries() 
{ 
	
	ItemsSource = Data, 
	XBindingPath = "XValue", 
	YBindingPath = "YValue" ,
	Color = Color.FromRgb(178, 235, 231);

};

ColumnSeries columnSeries1 = new ColumnSeries() 
{ 
	
	ItemsSource = Data1, 
	XBindingPath = "XValue", 
	YBindingPath = "YValue" ,
	Color = Color.FromRgb(211, 190, 229);

};

ColumnSeries columnSeries2 = new ColumnSeries() 
{ 
	
	ItemsSource = Data2, 
	XBindingPath = "XValue", 
	YBindingPath = "YValue" ,
	Color = Color.FromRgb(192, 216, 240);

};

Series selection support in Xamarin.Forms Chart

To set the series selection color,

<chart:SfChart x:Name="Chart"  EnableSeriesSelection="True" SeriesSelectionColor ="Red">
... 
</chart:SfChart>
chart.SeriesSelectionColor = Color.Red;

Events

SelectionChanging

The SelectionChanging event is triggered before the data point is selected. You can restrict a data point from being selected, by canceling this event, by setting Cancel property in the event argument to true. The argument contains the following information,

SelectionChanged

The SelectionChanged event triggered after a data point is selected. The argument contains the following information,

Methods

OnSelectionChanging

The OnSelectionChanging method of chart selection behavior is used to perform the operations, before the data point is selected, by extending the ChartSelectionBehavior class. This method argument contains the following information:

  • c#
  • public class ChartSelectionBehaviorExt : ChartSelectionBehavior
    {
       protected override void OnSelectionChanging(ChartSelectionChangingEventArgs args)
       {
                var selectedSeres = args.SelectedSeries;
                var dataPointIndex = args.SelectedDataPointIndex;
                var previousSelectedIndex = args.PreviousSelectedIndex;
    	    var previousSelectedSeries = args.PreviousSelectedSeries;			
       }
    }

    OnSelectionChanged

    The OnSelectionChanged method of theChartSelectionBehavior is used to perform the operations after a data point is selected. This method argument contains the following information:

  • c#
  • public class ChartSelectionBehaviorExt : ChartSelectionBehavior
    {
            
            protected override void OnSelectionChanged(ChartSelectionEventArgs args)
            {
                var selectedSeries = args.SelectedSeries;
                var dataPointIndex = args.SelectedDataPointIndex;
                var previousSelectedIndex = args.PreviousSelectedIndex;
    	    var previousSelectedSeries = args.PreviousSelectedSeries;	
            }
    }