Selection in WinUI Chart (SfPyramidChart)

18 Nov 20187 minutes to read

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

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 you to select a single segment.
  • SingleDeselect - Allows you to select and deselect a single segment.
  • Multiple - Allows you to select 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 of the pyramid chart. Also, set the SelectionBrush property to highlight the segment in the pyramid chart.

XAML

<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>

C#

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;

// Configure additional chart elements
this.Content = chart;

Multi-selection

The 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 supported for the pyramid chart.

XAML

<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>

C#

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 = ChartSelectionType.Multiple
};

chart.SelectionBehavior = selection;

// Configure additional chart elements
this.Content = chart;

Selection on initial rendering

SelectedIndex

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

XAML

<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>

C#

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;

// Configure additional chart elements
this.Content = chart;

SelectedIndexes

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

XAML

<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>

    <!-- Configure additional chart elements -->
</chart:SfPyramidChart>

C#

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 = ChartSelectionType.Multiple,
    SelectedIndexes = new List<int>() { 2, 4 }
};

chart.SelectionBehavior = selection;

// Configure additional chart elements
this.Content = 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. The ChartSelectionChangingEventArgs contains the following information.

• NewIndexes - Gets the collection of selected data point index. Here, NewIndexes[0] is the current selected index.
• OldIndexes - Gets the collection of previous selected data point index. 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 contains the following information.

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