How to Select the Data Points Dynamically in .NET MAUI Circular Chart?

This article provides a detailed walkthrough on how to select the data points dynamically in a .NET MAUI Circular Chart using the DataPointSelectionBehavior.

The SfCircularChart offers selection behavior support, allowing you to select or highlight segments (data points) in a series using the DataPointSelectionBehavior.

Step 1: Initialize the SfCircularChart and populate it with data as follows. For more detailed guidance, refer to the MAUI Circular Charts getting started documentation.

XAML

<chart:SfCircularChart>

   <chart:PieSeries ItemsSource="{Binding Data}"
                    XBindingPath="Category"
                    YBindingPath="Value" >
   </chart:PieSeries>

</chart:SfCircularChart> 

C#

SfCircularChart chart = new SfCircularChart();

PieSeries series = new PieSeries();
series.ItemsSource = (new ViewModel()).Data;
series.XBindingPath = "Category";
series.YBindingPath = "Value";

chart.Series.Add(series);
this.Content = chart; 

Step 2: To enable the data point selection, create an instance of the series SelectionBehavior property and define the SelectionBrush.
XAML

<chart:PieSeries ItemsSource="{Binding Data}"
                 XBindingPath="Category"
                 YBindingPath="Value">

   <chart:PieSeries.SelectionBehavior>
       <chart:DataPointSelectionBehavior SelectionBrush="#77C2FD"/>
   </chart:PieSeries.SelectionBehavior>

</chart:PieSeries> 

C#

DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
   SelectionBrush = Color.FromHex("#77C2FD"),
}; 

series.SelectionBehavior = selection;

The ChartSelectionBehavior can be customized using the following properties.

• Type - Gets or sets the ChartSelectionType for the selection behavior.
  Chart selection types:
  • Single - Select one item at a time
  • SingleDeselect - Select and deselect one item at a time.
  • Multiple - Select and deselect multiple items at a time.
  • None - No items can be selected.
• SelectionBrush - Gets or sets the brush color for the selection.
• SelectedIndex - Gets or sets the value of the index to be selected.
• SelectedIndexes - Gets or sets the list of indexes to be selected.
• ClearSelection - Used to reset all the selection customizations to default.

Step 3: Enable single segment selection by setting the ChartSelectionType to SingleDeselect.

XAML

<chart:PieSeries.SelectionBehavior>
       <chart:DataPointSelectionBehavior SelectionBrush="#77C2FD"
                                         Type="SingleDeselect"
                                         SelectedIndex="2"/>
</chart:PieSeries.SelectionBehavior> 

C#

DataPointSelectionBehavior selection = new DataPointSelectionBehavior
{
   SelectionBrush = Color.FromArgb("#77C2FD"),
   Type = ChartSelectionType.SingleDeselect,
   SelectedIndex = 2
}; 

Step 4: Allow multiple segment selection by setting the ChartSelectionType to Multiple.

XAML

<chart:PieSeries.SelectionBehavior>
       <chart:DataPointSelectionBehavior SelectionBrush="#77C2FD"
                                         Type="Multiple"/>
</chart:PieSeries.SelectionBehavior> 

C#

DataPointSelectionBehavior selection = new DataPointSelectionBehavior
{
   SelectionBrush = Color.FromArgb("#77C2FD"),
   Type = ChartSelectionType.Multiple
}; 

Step 5: Run the application and click on any segments in the Pie chart to see them highlighted using the selection brush.

Output:

Conclusion
I hope you enjoyed learning how to select the data points dynamically in .NET MAUI Circular Chart.

You can refer to our .NET MAUI Circular Charts feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section below if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!