Zoom and Pan

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:

@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:

@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:

@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:

@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:

@using C1.Blazor.Chart.Interaction

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