MAUI | ComponentOne
Controls / FlexChart / End-user Interaction / Zoom
In This Topic
    Zoom
    In This Topic

    Zooming is the ability to enlarge an image. In charts, zooming allows users to select the area they want to enlarge by double clicking the left mouse button or scrolling the mouse, enabling them to analyze the data packed charts at granular level. In case of the mobile platforms, users can use pinch gestures to zoom in or out of the chart.

    Zooming can be performed in FlexChart using ZoomBehavior class. To implement zooming, you need to create an object of ZoomBehavior class available in the C1.Maui.Chart.Interaction namespace and add it to FlexChart's Behaviors collection as showcased in the following code. This sample uses the same datasource as used in Quick Start.

    XAML
    Copy Code
    <c1:FlexChart x:Name="chart" ChartType="Column" BindingX="year" Stacking="Stacked" Header="Country GDP (M$)"
              LegendPosition="Bottom" ItemsSource="{Binding ListItem}">
        <c1:Series Binding="Japan" SeriesName="Japan"/>
        <c1:Series Binding="India" SeriesName="India"/>
        <c1:Series Binding="US" SeriesName="US"/>
        <c1:Series Binding="UK" SeriesName="UK"/>
        <c1:FlexChart.Behaviors>
            <c1i:ZoomBehavior x:Name="zoomBehavior" />
            <c1i:TranslateBehavior />
        </c1:FlexChart.Behaviors>
        <c1:FlexChart.AxisX>
            <c1:Axis Position="Bottom" MajorGrid="True" />
        </c1:FlexChart.AxisX>
        <c1:FlexChart.AxisY>
            <c1:Axis Position="Left" MajorGrid="True" />
        </c1:FlexChart.AxisY>
    </c1:FlexChart>