Selection in WinUI Chart (SfPyramidChart)

29 Jun 20226 minutes to read

The pyramid chart supports selection that allows the selection of a segment in the chart by using the SelectionBehavior.

Enable Selection

To enable the selection in the chart, create an instance of the DataPointSelectionBehavior and set it to the SelectionBehavior of the pyramid chart. And also, set the SelectionBrush property to highlight the segment in the pyramid chart.

<chart:SfPyramidChart x:Name="chart" 
                      Height="388" Width="500"
                      ItemsSource="{Binding Data}" 
                      XBindingPath="Category"
                      YBindingPath="Value">

    <chart:SfPyramidChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior SelectionBrush="Red"/>
    </chart:SfPyramidChart.SelectionBehavior>

</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.SetBinding(SfPyramidChart.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.Red),
};
chart.SelectionBehavior = selection;
. . .
this.Content = chart;

Segment selection support in WinUI Chart

Multi-selection

Pyramid chart provides support to select multiple segments by using the Type property as Multiple. By default, the value of the Type is Single and it is used for a single selection.

NOTE

Series and MultiSeries selection type is not support for pyramid chart.

<chart:SfPyramidChart x:Name="chart"  
                      ItemsSource="{Binding Data}" 
                      XBindingPath="Category"
                      YBindingPath="Value">

    <chart:SfPyramidChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior Type="Multiple" SelectionBrush="Red"/>
    </chart:SfPyramidChart.SelectionBehavior>
. . .
</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.SetBinding(SfPyramidChart.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.Red),
    Type = SelectionType.Multiple
};
chart.SelectionBehavior = selection;
. . .
this.Content = chart;

Multi selection support in WinUI Chart

Selection on initial rendering

SelectedIndex

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

<chart:SfPyramidChart x:Name="chart" 
                      Height="388" Width="500"
                      ItemsSource="{Binding Data}" 
                      XBindingPath="Category"
                      YBindingPath="Value">

    <chart:SfPyramidChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior SelectionBrush="Red" SelectedIndex="1"/>
    </chart:SfPyramidChart.SelectionBehavior>

</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.SetBinding(SfPyramidChart.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.Red),
    SelectedIndex= 1
};
chart.SelectionBehavior = selection;
. . .
this.Content = chart;

SelectedIndex in WinUI Chart

SelectedIndexes

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

<chart:SfPyramidChart x:Name="chart"  
                      ItemsSource="{Binding Data}" 
                      XBindingPath="Category"
                      YBindingPath="Value">
 
    <chart:SfPyramidChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior Type="Multiple" SelectionBrush="Red"
        SelectedIndexes="{Binding SelectedIndexes}"/>
    </chart:SfPyramidChart.SelectionBehavior>
. . .
</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.SetBinding(SfPyramidChart.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
    SelectionBrush = new SolidColorBrush(Colors.Red),
    Type = SelectionType.Multiple,
    SelectedIndexes = new List<int>() { 2, 4 }
};
chart.SelectionBehavior = selection;
. . .
this.Content = chart;

SelectedIndexes in WinUI Chart

Events

The following selection 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.