How to select the entire stacking series segment in .NET MAUI Chart (SfCartesianChart)?

This KB article provides guidance on selecting the entire stacking series segment in .NET MAUI Cartesian Chart. Follow the step-by-step procedure outlined below.

Step 1: Enable data point selection
To enable data point selection behavior for the series, create an instance of the series SelectionBehavior property.

<chart:SfCartesianChart>
…
  <chart:StackingColumnSeries x:Name="series1" Fill="#6637C9D3" Spacing="0.3" CornerRadius="0, 0, 10, 10"                     
                      ItemsSource="{Binding StackedColumnData1}" XBindingPath="Month" YBindingPath="Sales">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection1"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>

   <chart:StackingColumnSeries x:Name="series2" Fill="#66808080" Spacing="0.3" CornerRadius="10, 10, 0, 0" 
                       ItemsSource="{Binding StackedColumnData2}" XBindingPath="Month" YBindingPath="Sales">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection2"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>

</chart:SfCartesianChart>

Step 2: Entire stacking series segment selection
The process involves utilizing the SelectedIndex property in ChartSelectionBehavior, and it can be implemented in any of the following ways.

Solution 1: Two-Way Binding
By maintaining the two-way binding of the SelectedIndex of series to its stacking series, it will be achieved as shown in the following code sample.

<chart:SfCartesianChart>
…
   <chart:StackingColumnSeries x:Name="series1">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection1" SelectionBrush="#37C9D3"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>
   
   <chart:StackingColumnSeries x:Name="series2">
       <chart:StackingColumnSeries.SelectionBehavior>
               <chart:DataPointSelectionBehavior x:Name="dataPointSelection2" SelectionBrush="#808080"
                      SelectedIndex="{Binding Source={x:Reference dataPointSelection1}, Path=SelectedIndex, Mode=TwoWay}"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>

</chart:SfCartesianChart>

Solution 2: Using ViewModel Property
By maintaining a view model property for SelectedIndex and binding it with all stacking column series, the desired outcome can be achieved. Refer to the following code sample for implementation.

<chart:SfCartesianChart>
…
   <chart:StackingColumnSeries x:Name="series1">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection1" 
            SelectionBrush="#37C9D3"
            SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>

   <chart:StackingColumnSeries x:Name="series2">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection2" 
           SelectionBrush="#808080"
           SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>
   
</chart:SfCartesianChart>

The SelectedIndex property from ViewModel class.

public class StackedColumnSeriesViewModel : INotifyPropertyChanged
{
   private int selectedIndex = -1;
   public event PropertyChangedEventHandler PropertyChanged;

   public int SelectedIndex
   {
       get
       {
           return selectedIndex;
       }
       set
       {
           selectedIndex = value;
           OnPropertyChanged("SelectedIndex ");
       }
   }

   protected virtual void OnPropertyChanged(string propertyName)
   {
       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }
}

Solution 3: Utilizing SelectionChanged Event

By setting the SelectedIndex of the selected series to all its stacking series through the SelectionChanged event, you can achieve the desired outcome. Refer to the code snippet below for implementation.

<chart:SfCartesianChart>
 …
   <chart:StackingColumnSeries x:Name="series1">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection1" 
           SelectionBrush="#37C9D3"
           SelectionChanged="dataPointSelection1_SelectionChanged"/>        
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>

   <chart:StackingColumnSeries x:Name="series2">
       <chart:StackingColumnSeries.SelectionBehavior>
           <chart:DataPointSelectionBehavior x:Name="dataPointSelection2"
           SelectionChanged="dataPointSelection1_SelectionChanged" 
           SelectionBrush="#808080"/>
       </chart:StackingColumnSeries.SelectionBehavior>
   </chart:StackingColumnSeries>

</chart:SfCartesianChart>

In this context, the process involves setting the same SelectedIndex to all its stacking series within the SelectionChanged event callback method.

 private void dataPointSelection1_SelectionChanged(object sender, Syncfusion.Maui.Charts.ChartSelectionChangedEventArgs e)
   {
       var selectedSeries = e.NewIndexes;
       var selectedIndex = selectedSeries[0];

       foreach (var series in chart.Series)
       {
           if (series != sender as ChartSeries)
           {
               if (selectedSeries.Count > 0)
               {
                   series.SelectionBehavior.SelectedIndex = selectedIndex;
               }
               else
               {
                   series.SelectionBehavior.SelectedIndex = -1;
               }
           }
       }
   }
}

Output

Conclusion
I hope you enjoyed learning How to select the entire stacking series segment in .NET MAUI Cartesian Chart.
Refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!