Selection in WinUI Chart (SfFunnelChart)
1 Jul 20227 minutes to read
The funnel 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 funnel the chart. Also, set the SelectionBrush property to highlight the segment in the funnel chart.
<chart:SfFunnelChart x:Name="chart"
Height="388"
Width="500"
ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value">
<chart:SfFunnelChart.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionBrush="Red"/>
</chart:SfFunnelChart.SelectionBehavior>
</chart:SfFunnelChart>
SfFunnelChart chart = new SfFunnelChart();
chart.SetBinding(SfFunnelChart.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;
Multi-selection
The funnel 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
The
Series
andMultiSeries
selection types are not supported for the funnel chart
<chart:SfFunnelChart x:Name="chart"
ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value">
<chart:SfFunnelChart.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionBrush="Red" Type="Multiple"/>
</chart:SfFunnelChart.SelectionBehavior>
. . .
</chart:SfFunnelChart>
SfFunnelChart chart = new SfFunnelChart();
chart.SetBinding(SfFunnelChart.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;
Selection on initial rendering
SelectedIndex
The funnel chart provides support to select a point programmatically on a chart using the the SelectedIndex property of the DataPointSelectionBehavior.
<chart:SfFunnelChart x:Name="chart"
Height="388" Width="500"
ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value">
<chart:SfFunnelChart.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionBrush="Red" SelectedIndex="2"/>
</chart:SfFunnelChart.SelectionBehavior>
</chart:SfFunnelChart>
SfFunnelChart chart = new SfFunnelChart();
chart.SetBinding(SfFunnelChart.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
chart.XBindingPath = "Category";
chart.YBindingPath = "Value";
DataPointSelectionBehavior selection = new DataPointSelectionBehavior()
{
SelectionBrush = new SolidColorBrush(Colors.Red),
SelectedIndex= 2
};
chart.SelectionBehavior = selection;
. . .
this.Content = chart;
SelectedIndexes
Funnel chart provides support to select multiple points programmatically on a chart using the SelectedIndexes property of DataPointSelectionBehavior.
<chart:SfFunnelChart x:Name="chart"
ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value">
<chart:SfFunnelChart.SelectionBehavior>
<chart:DataPointSelectionBehavior SelectionBrush="Red" Type="Multiple"
SelectedIndexes="{Binding SelectedIndexes}"/>
</chart:SfFunnelChart.SelectionBehavior>
. . .
</chart:SfFunnelChart>
SfFunnelChart chart = new SfFunnelChart();
chart.SetBinding(SfFunnelChart.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, 3, 4 }
};
chart.SelectionBehavior = selection;
. . .
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. 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.
- CurrentIndex - Gets the selected data point index.
- PreviousIndex - Gets the previous selected data point index.