Selection in WinUI Chart

14 Apr 20218 minutes to read

SfChart supports selection that allows you to select a segment in a series or series itself by using ChartSelectionBehavior.

Adding Selection Behavior to SfChart

You can create an instance ChartSelectionBehavior and add it to the Behaviors collection.

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartSelectionBehavior >

</syncfusion:ChartSelectionBehavior>

</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior();

chart.Behaviors.Add(selection);

SegmentSelection

Segment Selection allows you to highlight a segment in a chart series. To enable a segment selection in a chart series, you have to set the EnableSegmentSelection property to True. For highlighting a segment the brush color can be set using SegmentSelectionBrush property.

Segment Selection in ColumnSeries

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartSelectionBehavior   EnableSegmentSelection="True" >

</syncfusion:ChartSelectionBehavior>

</syncfusion:SfChart.Behaviors>

<syncfusion:ColumnSeries Label="2011" SegmentSelectionBrush="Green" 

ItemsSource="{Binding Demands}" XBindingPath="Demand" YBindingPath="Year2011"/>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{

    EnableSegmentSelection = true

};

chart.Behaviors.Add(selection);

ColumnSeries series = new ColumnSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2010",

    Label ="2011",

    SegmentSelectionBrush = new SolidColorBrush(Colors.Green),

};

chart.Series.Add(series);

Segment selection support in WinUI Chart

Segment Selection in SplineSeries

In Linear type series the segment selection can be viewed by changing the data marker MarkerType interior.

The following code example demonstrates the spline series segment selection by changing the data marker interior.

<syncfusion:SplineSeries SegmentSelectionBrush="Red"

ItemsSource="{Binding Demands}"

XBindingPath="Demand"

YBindingPath="Year2010">

<syncfusion:SplineSeries.DataMarker>

<syncfusion:ChartDataMarker ShowMarker="True" MarkerType="Ellipse" HighlightOnSelection="True"></syncfusion:ChartDataMarker>

</syncfusion:SplineSeries.DataMarker>

</syncfusion:SplineSeries>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{

    EnableSegmentSelection = true

};

chart.Behaviors.Add(selection);

SplineSeries series = new SplineSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2010",

    SegmentSelectionBrush = new SolidColorBrush(Colors.Red),

};

ChartDataMarker datamarker = new ChartDataMarker()
{

    ShowMarker = true,

    HighlightOnSelection = true,

    MarkerType = ChartSymbol.Ellipse

};

series.DataMarker = datamarker;

chart.Series.Add(series);

Segment selection support in WinUI Chart

Series Selection

Series selection is used in case of multiple series when you want to highlight a particular series. Series selection can be enabled by setting EnableSeriesSelection property to True. The SeriesSelectionBrush property is used to set the brush color to highlight the series.

The following code example demonstrates highlighting a series.

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartSelectionBehavior EnableSegmentSelection="False" EnableSeriesSelection="True"/>

</syncfusion:SfChart.Behaviors>   

<syncfusion:ScatterSeries Label="2010"  SeriesSelectionBrush="Green"

ItemsSource="{Binding Demands}"

XBindingPath="Demand"

YBindingPath="Year2010">

</syncfusion:ScatterSeries>

<syncfusion:ScatterSeries Label="2011" SeriesSelectionBrush="Green"

ItemsSource="{Binding Demands}" XBindingPath="Demand" 

YBindingPath="Year2011"/>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{

    EnableSegmentSelection = false,

    EnableSeriesSelection = true

};

chart.Behaviors.Add(selection);

ScatterSeries series1 = new ScatterSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2010",

    Label = "2010",

    SegmentSelectionBrush = new SolidColorBrush(Colors.Green),

};

ScatterSeries series2 = new ScatterSeries()
{

    ItemsSource = new ViewModel().Demands,

    XBindingPath = "Demand",

    YBindingPath = "Year2011",

    Label = "2011",

    SegmentSelectionBrush = new SolidColorBrush(Colors.Green),

};

chart.Series.Add(series1);

chart.Series.Add(series2);

Series selection support in WinUI Chart

NOTE

By default the segment selection is true, so for selecting series you have to set the EnableSegmentSelection property to false.

Selection Mode

SfChart provides support to select using mouse move or mouse click. By default the selection will take place in mouse click. The selection mode can be defined using SelectionMode property for segment and series selection.

The following code snippet demonstrates the selection mode using MouseMove.

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartSelectionBehavior SelectionMode="MouseMove" EnableSeriesSelection="True">

</syncfusion:ChartSelectionBehavior>

</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{

    SelectionMode = Syncfusion.UI.Xaml.Charts.SelectionMode.MouseMove,

    EnableSeriesSelection = true

};

chart.Behaviors.Add(selection);

Customizing the Selection

SfChart allows you to select single or multiple segment\series using SelectionType property. By default the SelectionType is Single.

The following code snippet demonstrates multiple segment selection.

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartSelectionBehavior SelectionType="Multiple" EnableSegmentSelection="True">

</syncfusion:ChartSelectionBehavior>

</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{

    SelectionType = SelectionType.Multiple,

    EnableSegmentSelection = true

};

chart.Behaviors.Add(selection);

Selection style support in WinUI Chart

Changing Cursor while Selection

SelectionCursor property allows you to define the cursor when mouse is hovered over the segment with segment or series selection enabled.

The following code snippet demonstrates hand cursor in segment selection.

<syncfusion:SfChart.Behaviors>

<syncfusion:ChartSelectionBehavior SelectionCursor="Hand"  EnableSegmentSelection="True">

</syncfusion:ChartSelectionBehavior>

</syncfusion:SfChart.Behaviors>
ChartSelectionBehavior selection = new ChartSelectionBehavior()
{

    SelectionCursor = Cursors.Hand,

    EnableSegmentSelection = true

};

chart.Behaviors.Add(selection);

Changing cursor while selection support in WinUI Chart

Events

The following events are available in SfChart for ChartSelectionBehavior.

SelectionChanging

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

  • SelectedSeries - Gets the series of the selected data point.
  • SelectedSegments - Gets or sets the segments collection of the selected series.
  • SelectedSegment - Gets the segment of the selected data point.
  • SelectedIndex - Gets the selected data point index.
  • PreviousSelectedIndex - Gets the previous selected data point index.
  • IsSelected - Gets a value that indicates whether the segment or series is selected.
  • IsDataPointSelection - Gets a value that indicates whether the selection is segment selection or series selection.
  • 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.