Highlight PointMark On Click
It is common scenario that you would like to select a single PointMark of Line Series for example. Since InteractivityScope.Item (for more information see Interactivity Effects topic) is not supported for series that do not render separate items (Line, Spline, Area, Range, and all their stacked versions) this help topic will demonstrate how to select single Line's PointMark and customise it.
1. Create Line Chart Series. The following code snippet demonstrates LineSeries created using Manual Series Mappings.
public MainPage() //MainWindow() for WPF
{
InitializeComponent();
Random r = new Random();
List<ItemData> chartData = new List<ItemData>();
for (int i = 0; i < 20; i++)
{
chartData.Add(new ItemData(i, r.Next(0, 100)));
}
this.radChart.ItemsSource = chartData;
this.SetUpMappings();
}
private void SetUpMappings()
{
SeriesMapping mapping = new SeriesMapping();
mapping.SeriesDefinition = new LineSeriesDefinition()
{
ShowItemToolTips = true,
ShowItemLabels = false
};
mapping.ItemMappings.Add(new ItemMapping("YValue", DataPointMember.YValue));
mapping.ItemMappings.Add(new ItemMapping("XValue", DataPointMember.XValue));
this.radChart.SeriesMappings.Add(mapping);
}
public class ItemData
{
public double XValue { get; set; }
public double YValue { get; set; }
public ItemData(double xValue, double yValue)
{
this.XValue = xValue;
this.YValue = yValue;
}
}
Public Sub New() 'MainWindow() for WPF
InitializeComponent()
Dim r As New Random()
Dim chartData As New List(Of ItemData)()
For i As Integer = 0 To 19
chartData.Add(New ItemData(i, r.Next(0, 100)))
Next i
Me.radChart.ItemsSource = chartData
Me.SetUpMappings()
End Sub
Private Sub SetUpMappings()
Dim mapping As New SeriesMapping()
mapping.SeriesDefinition = New LineSeriesDefinition() With {.ShowItemToolTips = True, .ShowItemLabels = False}
mapping.ItemMappings.Add(New ItemMapping("YValue", DataPointMember.YValue))
mapping.ItemMappings.Add(New ItemMapping("XValue", DataPointMember.XValue))
Me.radChart.SeriesMappings.Add(mapping)
End Sub
Public Class ItemData
Public Property XValue() As Double
Public Property YValue() As Double
Public Sub New(ByVal xValue As Double, ByVal yValue As Double)
Me.XValue = xValue
Me.YValue = yValue
End Sub
End Class
2. Subscribe to the ItemClick event of the ChartArea and get a list of all PointMarks in the ChartArea using the ChildrenOfType extension method. The next step is to figure out which PointMark is selected. Find the SingleOrDefault PointMark from the eventargs (e.DataPoint) which matches the datacontext of a pointmark in the collection of pointmarks:
void ChartArea_ItemClick(object sender, ChartItemClickEventArgs e)
{
this.ClearPointMarkSelectedState();
var pointMarks =
radChart.DefaultView.ChartArea.ChildrenOfType<PointMark>().ToList<PointMark>();
this.selectedPointMark =
pointMarks.Where(x => x.DataContext == e.DataPoint).SingleOrDefault();
this.SetPointMarkSelectedState();
}
Private Sub ChartArea_ItemClick(ByVal sender As Object, ByVal e As ChartItemClickEventArgs)
Me.ClearPointMarkSelectedState()
Dim pointMarks = radChart.DefaultView.ChartArea.ChildrenOfType(Of PointMark)().ToList(Of PointMark)()
Me.selectedPointMark = pointMarks.Where(Function(x) x.DataContext = e.DataPoint).SingleOrDefault()
Me.SetPointMarkSelectedState()
End Sub
3. The methods SetPointMarkSelectedState() and ClearPointMarkSelectedState() define what should be done with the selected PointMark (in this case the selected one's MarkerShape is set to Triangle and the Fill to Red) and how to return to it's default state when another one is selected (Circle MarkerShape and White Fill):
private void SetPointMarkSelectedState()
{
if (this.selectedPointMark == null)
return;
this.selectedPointMark.Fill = new SolidColorBrush(Colors.Red);
this.selectedPointMark.Shape = MarkerShape.Triangle;
this.selectedPointMark.Size = 12;
}
private void ClearPointMarkSelectedState()
{
if (this.selectedPointMark == null)
return;
this.selectedPointMark.Fill = new SolidColorBrush(Colors.White);
this.selectedPointMark.Shape = MarkerShape.Circle;
}
Private Sub SetPointMarkSelectedState()
If Me.selectedPointMark Is Nothing Then
Return
End If
Me.selectedPointMark.Fill = New SolidColorBrush(Colors.Red)
Me.selectedPointMark.Shape = MarkerShape.Triangle
Me.selectedPointMark.Size = 12
End Sub
Private Sub ClearPointMarkSelectedState()
If Me.selectedPointMark Is Nothing Then
Return
End If
Me.selectedPointMark.Fill = New SolidColorBrush(Colors.White)
Me.selectedPointMark.Shape = MarkerShape.Circle
End Sub
The snapshot below shows the result:
