How to select multiple scatter data points with mouse drag in WPF Chart?

The WPF Chart allows you to select multiple scatter data points using the canvas and mouse drag.

Here are the steps to follow:

Step 1: Create a scatter chart within a grid layout using this documentation

XAML

<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="8*"/>
  <ColumnDefinition Width="1.7*"/>
 </Grid.ColumnDefinitions>

 <chart:SfChart Grid.Column="0">

  <chart:SfChart.Header>
   <TextBlock TextAlignment="Center" Text="Global Stock Trend" FontSize="17" Margin="0,10,0,10"/>
  </chart:SfChart.Header>

  <chart:SfChart.PrimaryAxis>
   <chart:DateTimeAxis Interval="1" IntervalType="Months" LabelFormat="MMM" PlotOffset="30" HeaderTemplate="{StaticResource headerTemplate1}" ShowGridLines="False">
    <chart:DateTimeAxis.LabelStyle>
     <chart:LabelStyle FontSize="13"/>
    </chart:DateTimeAxis.LabelStyle>
   </chart:DateTimeAxis>
  </chart:SfChart.PrimaryAxis>

  <chart:SfChart.SecondaryAxis>
   <chart:NumericalAxis Interval="10" Minimum="10" LabelFormat="$0" Maximum="80"
               HeaderTemplate="{StaticResource headerTemplate2}">
    <chart:NumericalAxis.LabelStyle>
     <chart:LabelStyle FontSize="12.5"/>
    </chart:NumericalAxis.LabelStyle>
   </chart:NumericalAxis>
  </chart:SfChart.SecondaryAxis>

  <chart:ScatterSeries x:Name="series" ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="Count"
       ScatterHeight="50" ScatterWidth="50" CustomTemplate="{StaticResource seriesTemplate}">
   <chart:ScatterSeries.AdornmentsInfo>
    <chart:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="LabelContentPath" LabelTemplate="{StaticResource adornmentTemplate}"/>
   </chart:ScatterSeries.AdornmentsInfo>
  </chart:ScatterSeries>

 </chart:SfChart>

</Grid>

Step 2: Initialize the canvas with mouse interaction events.

XAML

<Grid>
. . .

<Canvas Name="drawingCanvas" Background="Transparent" Grid.Column="0"
     MouseDown="OnMouseDown" MouseUp="OnMouseUp" Mouse.MouseMove="OnMouseMove"/>

</Grid>

Step 3: Implement the mouse interaction events to select the desired data points using the mouse drag.

C#

public partial class MainWindow : Window
{
    #region Fields

    private Point startPoint;
    private Rectangle? currentRectangle;
    private Rect currentRect;

    #endregion

    #region Constructor

    public MainWindow()
    {
        InitializeComponent();
    }

    #endregion

    #region Methods

    private void OnMouseMove(object sender, MouseEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed && currentRectangle != null)
        {
            // Update the size of the rectangle as the mouse is dragged.
            double width = e.GetPosition(drawingCanvas).X - startPoint.X;
            double height = e.GetPosition(drawingCanvas).Y - startPoint.Y;
            if (width > 0 && height > 0)
            {
                currentRect = new Rect(startPoint.X, startPoint.Y, width, height);
                currentRectangle.Width = width;
                currentRectangle.Height = height;
            }
        }
    }

    private void OnMouseDown(object sender, MouseButtonEventArgs e)
    {
        startPoint = e.GetPosition(drawingCanvas);

        // Create a new rectangle.
        currentRectangle = new Rectangle
        {
            Stroke = Brushes.Black,
            StrokeThickness = 1,
            Fill = Brushes.Transparent
        };

        // Add the rectangle to the canvas.
        drawingCanvas.Children.Add(currentRectangle);

        // Set the initial position of the rectangle.
        Canvas.SetLeft(currentRectangle, startPoint.X);
        Canvas.SetTop(currentRectangle, startPoint.Y);
    }

    private void OnMouseUp(object sender, MouseButtonEventArgs e)
    {
        viewModel.SelectedDataPoints = series.GetDataPoints(currentRect);
        currentRectangle = null;
        currentRect = Rect.Empty;
        drawingCanvas.Children.Clear();
    } 

    #endregion
} 

Output:

For more details, please refer to the project on GitHub

Conclusion
I hope you enjoyed learning how to select multiple scatter data points with mouse drag in WPF Chart.

You can find more groundbreaking feature representations of our WPF Chart on our feature tour page. Additionally, you can explore our WPF Chart documentation to understand how to create and manipulate data.

If you are a current customer, you can check out our components from the License and Downloads page. For new customers, we offer a 30-day free trial to try out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!