Selection in WinUI Chart (SfCircularChart)

1 Jul 20225 minutes to read

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

Enable Selection

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

<chart:SfCircularChart>
. . .
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="BlueViolet"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
    
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries();
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
};

series.SelectionBehavior = selection;
chart.Series.Add(series);

Segment selection support in WinUI Pie Chart

Multi-selection

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

<chart:SfCircularChart>
. . .
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="BlueViolet" Type="Multiple" />
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>

</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries();
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
    Type = SelectionType.Multiple
};

series.SelectionBehavior = selection;
chart.Series.Add(series);

Multi-selection support in WinUI Pie Chart

Selection on initial rendering

SelectedIndex

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

<chart:SfCircularChart>
. . .
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="BlueViolet" 
                SelectedIndex="2"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
    
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries();
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
    SelectedIndex = 2
};

series.SelectionBehavior = selection;
chart.Series.Add(series);

SelectedIndex in WinUI Chart

SelectedIndexes

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

<chart:SfCircularChart>
. . .
    <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>
SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries();
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.BlueViolet),
    Type = SelectionType.Multiple,
    SelectedIndexes = new List<int>() { 2, 3, 4 }
};

series.SelectionBehavior = selection;
chart.Series.Add(series);

SelectedIndexes in WinUI Chart

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. This argument contains the following information.

  • CurrentIndex - Gets the selected data point index.

  • PreviousIndex - Gets the previous selected data point 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. This argument contains the following information.