# Zoom and Pan

## Content

FlexChart supports interactive zooming and panning of the plot area. The `ZoomBehavior` and `TranslateBehavior` classes, available in the **C1.Blazor.Chart.Interaction** namespace, provide zooming and panning functionality respectively. Add these behaviors to the `Behaviors` section of the FlexChart control to enable the corresponding interactions.
FlexChart supports **mouse and touch input** for zooming and panning, allowing the chart to be interacted with across desktop and touch-enabled devices.

## Zooming

Zooming enlarges a specific portion of the FlexChart plot area. To implement zooming, add the `ZoomBehavior` component to the `Behaviors` section of FlexChart.
The `ZoomMode` property specifies the direction in which zooming is allowed. Its default value is `GestureMode.XY`. The `GestureMode` enumeration provides the following options:

* **None** \- Disables zooming\.
* **X** \- Enables zooming along the X\-axis\.
* **Y** \- Enables zooming along the Y\-axis\.
* **XY** \- Enables zooming along both the X and Y axes\.

The following example demonstrates how to enable zooming in FlexChart:

```auto
@using C1.Blazor.Chart.Interaction
<FlexChart>
    <Behaviors>
        <ZoomBehavior />
    </Behaviors>
</FlexChart>
```

To restrict the zoom direction, set the `ZoomMode` property as shown in the following example:

```auto
@using C1.Blazor.Chart.Interaction

<FlexChart>
    <Behaviors>
        <ZoomBehavior ZoomMode="GestureMode.X" />
    </Behaviors>
</FlexChart>
```

In this example, zooming is enabled only along the X-axis.

## Panning

Panning moves the visible plot area after the chart has been zoomed. To enable panning, add the `TranslateBehavior` component to the `Behaviors` section of FlexChart.
The `TranslateMode` property specifies the direction in which the plot area can be moved. Its default value is `GestureMode.XY`. The property uses the same `GestureMode` enumeration as `ZoomMode`.
The following example demonstrates how to enable panning in FlexChart:

```auto
@using C1.Blazor.Chart.Interaction
<FlexChart>
    <Behaviors>
        <TranslateBehavior />
    </Behaviors>
</FlexChart>
```

To restrict the panning direction, set the `TranslateMode` property as shown in the following example:

```auto
@using C1.Blazor.Chart.Interaction

<FlexChart>
    <Behaviors>
        <TranslateBehavior TranslateMode="GestureMode.Y" />
    </Behaviors>
</FlexChart>
```

In this example, panning is enabled only along the Y-axis.

## Combine Zooming and Panning

Zooming and panning can be enabled together by adding both `ZoomBehavior` and `TranslateBehavior` to the `Behaviors` section of FlexChart.
The following example enables both zooming and panning along the X-axis:

```auto
@using C1.Blazor.Chart.Interaction

<FlexChart>
    <Behaviors>
        <ZoomBehavior ZoomMode="GestureMode.X" />
        <TranslateBehavior TranslateMode="GestureMode.X" />
    </Behaviors>
</FlexChart>
```


<br>
<br>
<br>
<br>