WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > ChartModifier API > Selection > DataPoint Selection
DataPoint Selection

SciChart now features a native ChartModifier called the DataPointSelectionModifier which allows individual data-points to be selected via the mouse, or programmatically.

To enable Data-point selection, you must do two things:

  1. Add a DataPointSelectionModifier to the SciChartSurface.ChartModifier, or a ModifierGroup
  2. Create and add PointMetadata for each data-point you wish to programmatically select

Select Data-Points Example

As an example, you can see the WPF Examples Suite -> 2D Charts -> Series Selection and Hit-Test -> Click to Select Data Points example.

  Click to Select Data Points Example in the WPF Examples Suite

Using the DataPointSelectionModifier

To add a DataPointSelectionModifier to your application, you need to add the DataPointSelectionModifier to the SciChartSurface.ChartModofier property, or as part of a ModifierGroup.

You also need to create and declare a PointMetadata class for each data-point to hold the IsSelected state.

Note: For more information on PointMetadata API in SciChart, please see PointMetaData

Using the DataPointSelectionModifier
Copy Code 
<!--  Create and add a DataPointSelectionModifier to a Chart  -->
<s:SciChartSurface Name="sciChart" Grid.Column="1">

   <!--  Declare RenderableSeries with PointMarker and SelectedPointMarker  -->
   <s:SciChartSurface.RenderableSeries>
      <s:FastLineRenderableSeries x:Name="lineRenderSeries"
                           Stroke="#4AB748"
                           StrokeThickness="1">
         <s:FastLineRenderableSeries.PointMarker>
            <s:EllipsePointMarker Fill="#138A43" />
         </s:FastLineRenderableSeries.PointMarker>
         <s:FastLineRenderableSeries.SelectedPointMarker>
            <s:EllipsePointMarker Fill="#C4ECA0"
                             Width="12"
                             Height="12" />
         </s:FastLineRenderableSeries.SelectedPointMarker>
      </s:FastLineRenderableSeries>
   </s:SciChartSurface.RenderableSeries>

   <!-- Include the DataPointSelectionModifier -->
   <s:SciChartSurface.ChartModifier>
      <s:ModifierGroup>
         <s:DataPointSelectionModifier Name="PointMarkersSelectionModifier" IsEnabled="True" />        
      </s:ModifierGroup>
   </s:SciChartSurface.ChartModifier>
  
   <s:SciChartSurface.XAxis>
      <s:NumericAxis />
   </s:SciChartSurface.XAxis>
  
   <s:SciChartSurface.YAxis>
      <s:NumericAxis  />
   </s:SciChartSurface.YAxis>

</s:SciChartSurface>
Using the DataPointSelectionModifier
Copy Code 
// Taken from Select Data-Points Example
public class SelectedPointMetadata : IPointMetadata
{
    public event PropertyChangedEventHandler PropertyChanged;
    public bool IsSelected { get; set; }
}

// Taken from Select Data-Points Example
private void PointMarkersSelectionExampleView_OnLoaded(object sender, RoutedEventArgs e)
{
       // Create a DataSeries of type X=double, Y=double
       var dataSeries = new XyDataSeries<double, double>();
        
       lineRenderSeries.DataSeries = dataSeries;

       var data = DataManager.Instance.GetSinewave(100,55,150);

       // Append data to series. SciChart automatically redraws
       dataSeries.Append(new double[] { 0,1,2,3 }, new double[] { 10,20,30,40 },
          new [] { 
         new SelectedPointMetadata() { IsSelected = false },
              new SelectedPointMetadata() { IsSelected = false },
              new SelectedPointMetadata() { IsSelected = false },
              new SelectedPointMetadata() { IsSelected = false },
       } );

       sciChart.ZoomExtents();
}

Styling the Selected Data-Points with BaseRenderableSeries.SelectedPointMarker

Styling the selected data-points falls down to what you decide to do with the IPointMetadata.IsSelected property.

For instance, you could use the built-in BaseRenderableSeries.PointMarker and SelectedPointMarker properties to react to IPointMetadata.IsSelected as follows:

Styling the Selected Data-Points with BaseRenderableSeries.SelectedPointMarker
Copy Code 
<s:SciChartSurface Name="sciChart" Grid.Column="1">
   <s:SciChartSurface.RenderableSeries>
      <s:FastLineRenderableSeries x:Name="lineRenderSeries"
                           Stroke="#4AB748"
                           StrokeThickness="1">

         <!-- Display this marker when PointMetadata.IsSelected is false -->
         <s:FastLineRenderableSeries.PointMarker>
            <s:EllipsePointMarker Fill="#138A43" />
         </s:FastLineRenderableSeries.PointMarker>

         <!-- Display this marker when PointMetadata.IsSelected is true -->
         <s:FastLineRenderableSeries.SelectedPointMarker>
            <s:EllipsePointMarker Fill="#C4ECA0" Width="12" Height="12" />
         </s:FastLineRenderableSeries.SelectedPointMarker>

      </s:FastLineRenderableSeries>
   </s:SciChartSurface.RenderableSeries>

</s:SciChartSurface>

Styling the Selected Data-Points with PaletteProvider

The above method of using SelectedPlointMarker will work great with Line, Mountain and Scatter series, however if you want a bit more control, you may want to style points on many types of series using the PaletteProvider API:

Styling the Selected Data-Points with PaletteProvider
Copy Code 
// Create a PaletteProvider class which looks at Metadata.IsSelected
public class SelectedPointPaletteProvider : IPointMarkerPaletteProvider
{
   readonly PointPaletteInfo? _selectedPoint = new PointPaletteInfo()
   {
      Fill = Color.FromArgb(0xFF, 0xC4, 0xEC, 0xA0),
      Stroke = Color.FromArgb(0xFF, 0xC4, 0xEC, 0xA0)
   };

   public void OnBeginSeriesDraw(IRenderableSeries rSeries) { }

   public PointPaletteInfo? OverridePointMarker(IRenderableSeries rSeries, int index, IPointMetadata metadata)
   {
      return (metadata != null && metadata.IsSelected) ? _selectedPoint : null;       
   }
}
// Assign your PaletteProvider to a RenderableSeries
lineRenderSeries.PaletteProvider = new SelectedPointPaletteProvider();

The above will render an off-white point at selected data-points when applied to a FastLineRenderableSeries or XyScatterRenderableSeries with PointMarker.

The PaletteProvider technique can also be used to set the stroke and fill of Columns, OHLC bars, Candlesticks, Error Bars, Bubbles and Box Plot bars when using the IStrokePaletteProvider and IFillPaletteProvider interfaces.

Note: The PaletteProvider API described in detail in Paletted Series

 

See Also
Series Selection

DataSeries API

DataSeries PointMetadata API