From b2638370dd5851bdff39e6d2d9f9c3547d70e34c Mon Sep 17 00:00:00 2001
From: subash_s <subash.s@syncfusion.com>
Date: Fri, 16 May 2025 22:54:37 +0530
Subject: [PATCH] content update

---
 README.md | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/README.md b/README.md
index 9aa32b1..f20d2f6 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,86 @@
 
 The [WPF Chart](https://www.syncfusion.com/wpf-controls/charts) 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
+
+**Step 2:** Initialize the canvas with mouse interaction events.
+
+**Step 3:** Implement the mouse interaction events to select the desired data points using the mouse drag.
+
+**C#**
+
+```csharp
+    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
+    } 
+```
+
 The following demo visualizes how to select multiple scatter data points using mouse drag, which shows the respective values in a list view.
 ![Demo](https://github.com/SyncfusionExamples/How-to-Select-Multiple-Scatter-Data-Points-with-Mouse-Drag/assets/103025761/971fd74f-f660-45e3-813f-aeaf41fda735)