Selection in WinUI Chart

24 May 20229 minutes to read

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

Enable selection

To enable selection, create an instance of 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);

Segment Selection

Segment selection allows you to highlight a segment in a chart series. For highlighting a segment, the brush color can be set using the SelectionBrush property.

Segment Selection in ColumnSeries

<chart:SChart>
. . .
    <chart:SfChart.Behaviors>
        <chart:ChartSelectionBehavior />
    </chart:SfChart.Behaviors>

    <chart:ColumnSeries ItemsSource="{Binding Data}" 
                        XBindingPath="Demand"
                        YBindingPath="Year2010"
                        SelectionBrush="Green"/>
</chart:SfChart>
SChart chart = new SChart();
. . .
ChartSelectionBehavior selection = new ChartSelectionBehavior();
chart.Behaviors.Add(selection);

ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
    SelectionBrush = new SolidColorBrush(Colors.Green)
};

chart.Series.Add(series);
this.Content = chart;

Segment selection support in WinUI Chart

Segment Selection in Linear Series

In linear type series, the segment selection can be viewed by changing the data label interior.

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

<chart:SfChart>
. . .
    <chart:SfChart.Behaviors>
        <chart:ChartSelectionBehavior />
    </chart:SfChart.Behaviors>

    <chart:SplineSeries ItemsSource="{Binding Data}" 
                        XBindingPath="Demand"
                        YBindingPath="Year2010"
                        SelectionBrush="Green"
                        ShowDataLabels="True"/>
</chart:SfChart>
SfChart chart = new SfChart();
. . .
ChartSelectionBehavior selection = new ChartSelectionBehavior();
chart.Behaviors.Add(selection);

SplineSeries series = new SplineSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
    SelectionBrush = new SolidColorBrush(Colors.Green),
    ShowDataLabels="True" 
};

chart.Series.Add(series);
this.Content = chart;

Segment selection support in WinUI Chart

Series Selection

Series selection is used when there are multiple series and you want to highlight one of them. Series selection can be enabled by setting the Type property value to Series in ChartSelectionBehavior. The SeriesSelectionBrush property is used to set the brush color to highlight the series.

The following code example demonstrates highlighting a series.

<chart:SfChart>
. . .
    <chart:SfChart.Behaviors>
        <chart:ChartSelectionBehavior SeriesSelectionBrush="Green" Type="Series"/>
    </chart:SfChart.Behaviors>
. . .
</chart:SfChart>
SfChart chart = new SfChart();
. . .
ChartSelectionBehavior selection = new ChartSelectionBehavior();
selection.SeriesSelectionBrush = new SolidColorBrush(Colors.Green);
selection.Type = SelectionType.Series;
chart.Behaviors.Add(selection);
. . .
this.Content = chart;

Series selection support in WinUI Chart

Customizing the Selection

SfChart allows you to select single or multiple segment\series using the Type property. By default, the Type value is Point. The MultiPoint and MultiSeries values of Type property is used to select multiple segments and series respectively.

The following code sample demonstrates how to select multiple segments.

<chart:SfChart>
. . .
    <chart:SfChart.Behaviors>
        <chart:ChartSelectionBehavior Type="MultiPoint"/>
    </chart:SfChart.Behaviors>

    <chart:SfChart.Series>
        <chart:ColumnSeries ItemsSource="{Binding Data}"  
                            XBindingPath="Demand"
                            YBindingPath="Year2010" 
                            SelectionBrush="Green"/>
    </chart:SfChart.Series>

</chart:SfChart>
SfChart chart = new SfChart();
. . .
ChartSelectionBehavior selection = new ChartSelectionBehavior();
selection.Type = SelectionType.MultiPoint;
chart.Behaviors.Add(selection);

ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
    SelectionBrush = new SolidColorBrush(Colors.Green)
};
chart.Series.Add(series);
this.Content = chart;

Multiple Selection support in WinUI Chart

Changing cursor while selection

The Cursor property allows you to define the cursor when mouse is hovered over the segment with segment selection enabled.

<chart:SfChart>
. . . 
    <chart:SfChart.Behaviors>
        <chart:ChartSelectionBehavior Cursor="Hand"/>
    </chart:SfChart.Behaviors>

    <chart:SfChart.Series>
        <chart:ColumnSeries ItemsSource="{Binding Data}"  
                            XBindingPath="Demand" 
                            YBindingPath="Year2010" 
                            SelectionBrush="Green"/>
     </chart:SfChart.Series>

</chart:SfChart>
SfChart chart = new SfChart();
. . .
ChartSelectionBehavior selection = new ChartSelectionBehavior();
selection.Cursor = Windows.UI.Core.CoreCursorType.Hand;
chart.Behaviors.Add(selection);

ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
    SelectionBrush = new SolidColorBrush(Colors.Green)
};

chart.Series.Add(series);
this.Content = chart;

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 or not.

SelectionChanged

The SelectionChanged event occurs after a data point has been selected. This argument contains the following information: