How to select the entire stacking series segment in Xamarin.Forms Charts
This KB article explains how to select the entire stacking series segment in the Xamarin.Forms Chart. It has been achieved with the help of SelectedDataPointIndex property in series with any of the following ways.
Solution 1:
By maintaining the two-way binding of the SelectedDataPointIndex of series to its stacking series, it will be achieved as shown in the following code sample.
[XAML]
<chart:SfChart>
...
<chart:StackingColumnSeries x:Name="series"
ItemsSource ="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
EnableDataPointSelection="True "
Color="#7499BB "/>
<chart:StackingColumnSeries ItemsSource ="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
EnableDataPointSelection="True "
SelectedDataPointColor="Orange "
SelectedDataPointIndex="{Binding Source={x:Reference series}, Path=SelectedDataPointIndex, Mode=TwoWay}"
Color="#422E5D"/>
</chart:SfChart>
Solution 2:
By maintaining the view model property for SelectedDataPointIndex and binding with all stacking column series as per in below code snippet
[XAML]
<chart:SfChart>
...
<chart:StackingColumnSeries ItemsSource ="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
EnableDataPointSelection="True "
SelectedDataPointColor="Orange"
SelectedDataPointIndex="{Binding SelectedDataPointIndex, Mode=TwoWay}"
Color="#7499BB "/>
<chart:StackingColumnSeries ItemsSource ="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
EnableDataPointSelection="True "
SelectedDataPointColor="Orange"
SelectedDataPointIndex="{Binding SelectedDataPointIndex, Mode=TwoWay}"
Color="#422E5D"/>
</chart:SfChart>
SelectedDataPointIndex is from ViewModel class.
[C#]
public class ViewModel : INotifyPropertyChanged
{
private int selectedIndex = -1;
public event PropertyChangedEventHandler PropertyChanged;
public int SelectedDataPointIndex
{
get
{
return selectedIndex;
}
set
{
selectedIndex = value;
PropertyChanged?.Invoke(this, new PropertchangedEventArgs("SelectedDataPointIndex"));
}
}
}
Solution 3:
By setting the SelectedDataPointIndex of selected series to all its stacking series through the SelectionChanged event as per in below code snippet
[XAML]
<chart:SfChart x:Name="chart" SelectionChanged="Chart_SelectionChanged" >
...
<chart:StackingColumnSeries ItemsSource ="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
EnableDataPointSelection="True "
SelectedDataPointColor="Orange"
Color="#7499BB "/>
<chart:StackingColumnSeries ItemsSource ="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
EnableDataPointSelection="True "
SelectedDataPointColor="Orange"
Color="#422E5D"/>
</chart:SfChart>
Here, setting the same SelectedDataPointIndex to all its stacking series.
[C#]
private void Chart_SelectionChanged(object sender, ChartSelectionEventArgs e)
{
var selectedSeries = e.SelectedSeries;
foreach(var series in chart.series)
{
if(series != selectedSeries)
{
series.SelectedDataPointIndex = e.SelectedDataPointIndex;
}
}
}
Output
Fig 1: The StackingColumnSeries before selecting.
Fig 2: The StackingColumnSeries after selecting.
See also:
How to enable the data point selection in Xamarin.Forms Chart
Available notify events for selection in Xamarin.Forms Chart
How to customize the appearance of Xamarin.Forms Chart
