MAUI-998979 - Added user guide for annotation interaction samples in how to section

MAUI/Cartesian-Charts/Annotation-reposition-by-interaction.md

@@ -0,0 +1,31 @@
+---
+layout: post
+title: Annotation Drag and Reposition | Syncfusion
+description: Learn how to enable drag-and-drop interaction for annotations in Syncfusion® .NET MAUI Chart (SfCartesianChart) to reposition them dynamically.
+platform: maui
+control: SfCartesianChart
+documentation: ug
+Keywords: .net maui chart annotation interaction, .net maui chart annotation drag and drop, .net maui chart annotation reposition, .net maui chart dynamic annotation movement.
+---
+
+# Annotation Drag and Reposition
+
+The .NET MAUI Cartesian Chart enables **dynamic annotation repositioning** through touch interaction. By implementing custom annotation classes that inherit from Syncfusion annotation types and override touch interaction methods, annotations such as [TextAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.TextAnnotation.html), [ShapeAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html), and [ViewAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ViewAnnotation.html) can be dragged and repositioned within the chart area, enhancing interactivity and data analysis capabilities.
+
+## Touch Interaction Methods
+
+The annotation interaction is managed through the following protected override methods:
+
+* **[OnTouchDown](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAnnotation.html#Syncfusion_Maui_Charts_ChartAnnotation_OnTouchDown_System_Single_System_Single_)** – Triggered when touch starts on the annotation.
+
+* **[OnTouchMove](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAnnotation.html#Syncfusion_Maui_Charts_ChartAnnotation_OnTouchMove_System_Single_System_Single_)** – Triggered when moving (dragging) the finger or mouse across the annotation. Calculates the difference between current and previous touch positions and applies these changes to the annotation's position properties (`X1`, `Y1`, `X2`, `Y2`).
+
+* **[OnTouchUp](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAnnotation.html#Syncfusion_Maui_Charts_ChartAnnotation_OnTouchUp_System_Single_System_Single_)** – Triggered when touch ends by lifting the finger or releasing the mouse from the annotation. Completes the drag operation and finalizes the annotation's new position.
+
+These methods together provide smooth drag-and-drop repositioning for annotations.
+
+![Annotation Drag and Reposition by interaction in .NET MAUI Cartesian Chart](How-to_images/MAUI_Annotation_Drag_And_Drop.gif)
+
+## See also
+
+[How to drag and drop the annotation in .NET MAUI Cartesian Chart?](https://support.syncfusion.com/agent/kb/22185)

MAUI/Cartesian-Charts/Interactive-annotation-color-customization.md

@@ -0,0 +1,45 @@
+---
+layout: post
+title: Annotation Color Customization | Syncfusion
+description: Learn how to customize annotation colors in Syncfusion® .NET MAUI Chart (SfCartesianChart) using the AnnotationTapped event for real-time color changes.
+platform: maui
+control: SfCartesianChart
+documentation: ug
+Keywords: .net maui chart annotation interaction, .net maui chart annotation color customization, .net maui chart annotation color selection, .net maui chart dynamic annotation styling.
+---
+
+# Interactive Annotation Color Customization
+
+The .NET MAUI Cartesian Chart enables **dynamic annotation color customization** through interactive color selection dialogs. By leveraging the [AnnotationTapped](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_AnnotationTapped) event, annotations can be captured on tap interactions and color changes applied to various annotation types including [TextAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.TextAnnotation.html), [ShapeAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ShapeAnnotation.html), and [ViewAnnotation](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ViewAnnotation.html) in real-time, enhancing chart interactivity.
+
+## AnnotationTapped Event
+
+The [AnnotationTapped](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_AnnotationTapped) event is fired when an annotation receives a tap interaction. The event handler receives [AnnotationTappedEventArgs](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.AnnotationTappedEventArgs.html) which contains a reference to the tapped annotation object, allowing you to identify and modify the annotation's properties.
+
+**[XAML]**
+
+```xml
+<ContentPage>
+    <chart:SfCartesianChart x:Name="Chart" AnnotationTapped="Chart_AnnotationTapped">
+        .....
+        <chart:SfCartesianChart.Annotations>
+            .........
+        </chart:SfCartesianChart.Annotations>    
+    </chart:SfCartesianChart>
+</ContentPage>
+```
+
+**[C#]**
+
+```csharp
+private void Chart_AnnotationTapped(object sender, AnnotationTappedEventArgs e)
+{
+    // Apply selected color to annotation.
+}
+```
+
+![Customize Annotation Colors Interactively in .NET MAUI Cartesian Chart](How-to_images/MAUI_Annotation_Color_Customization.gif)
+
+## See also
+
+[How to customize annotation colors interactively in .NET MAUI Cartesian Chart?](https://support.syncfusion.com/agent/kb/22184)

maui-toc.html

@@ -431,6 +431,8 @@
             <li><a href="/maui/cartesian-charts/Customize-each-chart-axis-label">Customize each chart axis label using the callback event</a></li>
             <li><a href="/maui/cartesian-charts/Get-the-data-point-collection-based-on-region">Get the data point collection based on region</a></li>
             <li><a href="/maui/cartesian-charts/display-tooltip-and-data-labels-in-release-mode">Display tooltip and data labels in release mode</a></li>
+            <li><a href="/maui/cartesian-charts/Interactive-annotation-color-customization">Interactive Annotation Color Customization</a></li>
+            <li><a href="/maui/cartesian-charts/Annotation-reposition-by-interaction">Annotation Drag and Drop (Reposition) by interaction</a></li>
 		</ul>
 	   </li>
         </ul>