FLUT-962617 - [Feature] UG content for Directional Zooming

Flutter/cartesian-charts/zoom-pan.md

@@ -48,6 +48,50 @@ Pinch zooming can be enabled by [`enablePinching`](https://pub.dev/documentation
 {% endhighlight %}
 {% endtabs %}
 
+## Directional zooming
+
+The directional zooming feature improves the zoom experience by allowing you to zoom in and out in a specific direction. To enable this feature, set the [`enableDirectionalZooming`]() property to `true`, the default value is `false`. 
+
+Additionally, ensure that `pinch zooming` is enabled and the `zoomMode` is set to `ZoomMode.xy` for directional zooming to work. The following code sample demonstrates how to enable directional zooming.
+
+{% tabs %}
+{% highlight dart hl_lines="7" %}
+
+    late ZoomPanBehavior _zoomPanBehavior;
+
+    @override
+    void initState(){
+      _zoomPanBehavior = ZoomPanBehavior(
+                  // Enables directional zooming
+                  enableDirectionalZooming: true,
+                  enablePinching: true,
+                  zoomMode: ZoomMode.xy,
+                );
+      super.initState();
+    }
+
+    @override
+    Widget build(BuildContext context) {
+      return Scaffold(
+        body: SafeArea(
+          child: Center(
+            child: Container(
+              height: 300, 
+              width: 350, 
+              child: SfCartesianChart(
+                zoomPanBehavior: _zoomPanBehavior
+              )
+            )
+          )
+        )
+      );
+    }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Directional Zooming](images/zooming-panning/directional-zooming.gif)
+
 ## Double tap zooming
 
 Double tap zooming can be enabled using [`enableDoubleTapZooming`](https://pub.dev/documentation/syncfusion_flutter_charts/latest/charts/ZoomPanBehavior/enableDoubleTapZooming.html) property. Defaults to `false`.