Selection

This help topic will demonstrate how you can make your charts more interactive by adding a selection behavior.

Here are the main properties that ChartSelectionBehavior exposes:

• DataPointSelectionMode - to control single / multiple data point selection.

• HitTestMargin - to increase the hit-testable area around the data point (especially useful when visualizing small scatter points that can be selected).

• SelectionPoints - to detect the selection. You may also use the SelectionChanged event of the RadChartView for the same purpose.

• SelectionPalette - to control the selected element appearance.

For the purpose of this section we'll create a Scatter Series and demonstrate selecting points and styling them.

You may read how to create a databound Series in Create Data-Bound Chart topic.

<telerik:RadCartesianChart x:Name="RadChart1" Palette="Metro"> 
 
    <telerik:RadCartesianChart.Behaviors> 
        <telerik:ChartSelectionBehavior DataPointSelectionMode="Single" /> 
    </telerik:RadCartesianChart.Behaviors> 
 
    <telerik:ScatterPointSeries /> 
 
    <telerik:RadCartesianChart.HorizontalAxis> 
        <telerik:LinearAxis /> 
    </telerik:RadCartesianChart.HorizontalAxis> 
    <telerik:RadCartesianChart.VerticalAxis> 
        <telerik:LinearAxis /> 
    </telerik:RadCartesianChart.VerticalAxis> 
 
</telerik:RadCartesianChart> 

    public MainWindow() 
    { 
        InitializeComponent(); 
        var series = RadChart1.Series[0] as ScatterPointSeries; 
        series.XValueBinding = new PropertyNameDataPointBinding("XValue"); 
        series.YValueBinding = new PropertyNameDataPointBinding("YValue"); 
        series.ItemsSource = this.GetData(); 
    } 
 
    private List<ChartData> GetData() 
    { 
        Random rand = new Random(); 
        List<ChartData> data = new List<ChartData>(); 
 
        for (int i = 1; i < 30; i++) 
        { 
            data.Add(new ChartData() { XValue = i, YValue = rand.Next(10, 100) }); 
        } 
 
        return data; 
    } 
} 
 
public class ChartData 
{ 
    public double XValue 
    { 
        get; 
        set; 
    } 
 
    public double YValue 
    { 
        get; 
        set; 
    } 
} 

public MainWindow() 
   Public Sub New() 
        InitializeComponent() 
        Dim series = TryCast(RadChart1.Series(0), ScatterPointSeries) 
        series.XValueBinding = New PropertyNameDataPointBinding("XValue") 
        series.YValueBinding = New PropertyNameDataPointBinding("YValue") 
        series.ItemsSource = Me.GetData() 
   End Sub 
 
    Private Function GetData() As List(Of ChartData) 
        Dim rand As New Random() 
        Dim data As New List(Of ChartData)() 
 
        For i As Integer = 1 To 29 
            data.Add(New ChartData() With {.XValue = i, .YValue = rand.Next(10, 100)}) 
        Next i 
 
        Return data 
    End Function 
} 
 
Public Class ChartData 
    Public Property XValue() As Double 
 
    Public Property YValue() As Double 
End Class 

To be able to change the selected element(s) appearance we'll use Selection Palette:

<telerik:RadCartesianChart.SelectionPalette> 
    <telerik:ChartPalette> 
        <telerik:ChartPalette.GlobalEntries> 
            <telerik:PaletteEntry Fill="Red" /> 
        </telerik:ChartPalette.GlobalEntries> 
    </telerik:ChartPalette> 
</telerik:RadCartesianChart.SelectionPalette> 

A sample result can be seen below:

Let's wire to SelectionChanged event of the ChartSelectionBehavior where we can easily determine the data point clicked, the series it belongs to and was it selected or de-selected:

private void RadChart1_SelectionChanged(object sender, ChartSelectionChangedEventArgs e) 
{ 
    //Handle selection of the current point 
    if (e.AddedPoints.Count > 0) 
    { 
        // Get the data point. 
        var addedPoint = e.AddedPoints[0]; 
        // Get the series. 
        var series = addedPoint.Presenter as ScatterPointSeries; 
 
        //Your code here... 
    } 
 
    //Handle de-selection of the current point 
    if (e.RemovedPoints.Count > 0) 
    { 
        // Get the data point. 
        var removedPoint = e.RemovedPoints[0]; 
        // Get the series. 
        var series = removedPoint.Presenter as LineSeries; 
 
        //Your code here... 
    } 
} 

Private Sub RadChart1_SelectionChanged(sender As Object, e As ChartSelectionChangedEventArgs) 
    'Handle selection of the current point ' 
    If e.AddedPoints.Count > 0 Then 
        ' Get the data point. ' 
        Dim addedPoint = e.AddedPoints(0) 
        ' Get the series. ' 
        Dim series = TryCast(addedPoint.Presenter, ScatterPointSeries) 
 
        'Your code here... ' 
 
    End If 
 
    'Handle de-selection of the current point ' 
    If e.RemovedPoints.Count > 0 Then 
        ' Get the data point. ' 
        Dim removedPoint = e.RemovedPoints(0) 
        ' Get the series. ' 
 
        'Your code here... ' 
 
        Dim series = TryCast(removedPoint.Presenter, LineSeries) 
    End If 
End Sub 

For Line/Area/Spline/SplineArea series selection refers to selecting the pointmarks and is therefore triggered when clicking any of the corresponding pointmarks. You will need to define a PointMarkTemplate so the item can be selected. For example:

<telerik:LineSeries> 
    <telerik:LineSeries.PointTemplate> 
        <DataTemplate> 
            <Ellipse Height="8" Width="8" Fill="Yellow" Stroke="Black" /> 
        </DataTemplate> 
    </telerik:LineSeries.PointTemplate> 
</telerik:LineSeries> 

In order distinguish the selected point from the not-selected one (for example to change the Ellipse color) in the SelectionChanged event you will have to get the series' ContentPresenter:

private void RadChart1_SelectionChanged(object sender, ChartSelectionChangedEventArgs e) 
{ 
    //Handle selection of the current point 
    if (e.AddedPoints.Count > 0) 
    { 
        var addedPoint = e.AddedPoints[0]; 
        var series = addedPoint.Presenter as LineSeries; 
 
        //Get the Content Presenter of the series 
        var pointPresenter = series. 
            ChildrenOfType<ContentPresenter>(). 
            Where(cp => cp.Tag == addedPoint).FirstOrDefault(); 
        var ellipseElement = pointPresenter. 
            ChildrenOfType<Ellipse>().FirstOrDefault(); 
 
        //Do whatever you want with it :) 
        ellipseElement.Fill = new SolidColorBrush(Colors.Red); 
    } 
 
    //Handle de-selection of the current point 
    if (e.RemovedPoints.Count > 0) 
    { 
        var removedPoint = e.RemovedPoints[0]; 
        var series = removedPoint.Presenter as LineSeries; 
        var pointPresenter = series. 
            ChildrenOfType<ContentPresenter>(). 
            Where(cp => cp.Tag == removedPoint).FirstOrDefault(); 
        var ellipseElement = pointPresenter. 
            ChildrenOfType<Ellipse>().FirstOrDefault(); 
 
        //Do whatever you want with it :) 
        ellipseElement.Fill = new SolidColorBrush(Colors.Yellow); 
    }     
} 

Private Sub RadChart1_SelectionChanged(sender As Object, e As ChartSelectionChangedEventArgs)    
    'Handle selection of the current point ' 
    If e.AddedPoints.Count > 0 Then 
        Dim addedPoint = e.AddedPoints(0) 
        Dim series = TryCast(addedPoint.Presenter, LineSeries) 
        Dim pointPresenter = series.ChildrenOfType(Of ContentPresenter)().Where(Function(cp) cp.Tag = addedPoint).FirstOrDefault() 
        Dim ellipseElement = pointPresenter.ChildrenOfType(Of Ellipse)().FirstOrDefault() 
 
        'Do whatever you want with it :) ' 
        ellipseElement.Fill = New SolidColorBrush(Colors.Red) 
    End If 
 
    'Handle de-selection of the current point ' 
    If e.RemovedPoints.Count > 0 Then 
        Dim removedPoint = e.RemovedPoints(0) 
        Dim series = TryCast(removedPoint.Presenter, LineSeries) 
        Dim pointPresenter = series.ChildrenOfType(Of ContentPresenter)().Where(Function(cp) cp.Tag = removedPoint).FirstOrDefault() 
        Dim ellipseElement = pointPresenter.ChildrenOfType(Of Ellipse)().FirstOrDefault() 
 
        'Do whatever you want with it :) ' 
        ellipseElement.Fill = New SolidColorBrush(Colors.Yellow) 
    End If 
End Sub