Selection in WinUI Chart (SfCircularChart)

10 Jul 20266 minutes to read

The circular chart supports selection that allows the selection of a segment in a series by using the DataPointSelectionBehavior.

Properties

The selection feature can be configured using the following properties:

• Type - Gets or sets the ChartSelectionType enum value for the selection behavior.
• The following ChartSelectionType can be achieved during selection:
  • Single - Allows selecting a single segment.
  • SingleDeselect - Allows selecting and deselecting a single segment.
  • Multiple - Allows selecting multiple segments.
  • None - Restricts the segment selection.
• SelectionBrush - Gets or sets the SelectionBrush color value for the selection behavior.
• SelectedIndex - Gets or sets the index value of the segment that should be selected during the selection.
• SelectedIndexes - Gets or sets the list of indexes of the segments that should be selected during the selection.

Enable Selection

To enable the selection in the chart, create an instance of the DataPointSelectionBehavior and set it to the SelectionBehavior property of the circular series. Also, set the SelectionBrush property to highlight the segment in the series.

XAML

<chart:SfCircularChart>

    <!-- Configure additional chart elements -->
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="BlueViolet"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

// Configure additional chart elements
PieSeries series = new PieSeries();

DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
};

series.SelectionBehavior = selection;

chart.Series.Add(series);

Multi-selection

The circular chart allows selecting single or multiple segments using the Type property. By default, the Type value is Single.

XAML

<chart:SfCircularChart>

    <!-- Configure additional chart elements -->
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="BlueViolet" Type="Multiple"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

// Configure additional chart elements
PieSeries series = new PieSeries();

DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
    Type = ChartSelectionType.Multiple
};

series.SelectionBehavior = selection;

chart.Series.Add(series);

Selection on initial rendering

SelectedIndex

The circular chart provides support to select a point programmatically on a chart using the SelectedIndex property of DataPointSelectionBehavior.

XAML

<chart:SfCircularChart>

    <!-- Configure additional chart elements -->
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="BlueViolet" SelectedIndex="2"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

// Configure additional chart elements
PieSeries series = new PieSeries();

DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
    SelectedIndex = 2
};

series.SelectionBehavior = selection;

chart.Series.Add(series);

SelectedIndexes

The circular chart provides support to select multiple points programmatically on a chart using the SelectedIndexes property of the DataPointSelectionBehavior.

XAML

<chart:SfCircularChart>

    <!-- Configure additional chart elements -->
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior
                    SelectionBrush="BlueViolet"
                    Type="Multiple" 
                    SelectedIndexes="{Binding SelectedIndexes}"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>

C#

SfCircularChart chart = new SfCircularChart();

// Configure additional chart elements
PieSeries series = new PieSeries();

DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
    Type = ChartSelectionType.Multiple,
    SelectedIndexes = new List<int>() { 2, 3, 4 }
};

series.SelectionBehavior = selection;

chart.Series.Add(series);

Events

The following events are available in the ChartSelectionBehavior.

SelectionChanging

The SelectionChanging event occurs before the data point is being selected. This is a cancelable event. The ChartSelectionChangingEventArgs contains the following information.

• NewIndexes - Gets the collection of selected data point indexes. Here, NewIndexes[0] is the current selected index.

• OldIndexes - Gets the collection of previous selected data point indexes. Here, OldIndexes[0] is the current unselected index.

• Cancel - Gets or sets a value that indicates whether the selection should be canceled.

SelectionChanged

The SelectionChanged event occurs after a data point has been selected. The ChartSelectionChangedEventArgs argument contains the following information.

• NewIndexes - Gets the collection of selected data point indexes. Here, NewIndexes[0] is the current selected index.
• OldIndexes - Gets the collection of previous selected data point indexes. Here, OldIndexes[0] is the current unselected index.