The ZoomMode property can be used to enable touch based zooming on FlexChart. To enable touch-based zooming the ChartZoomMode enumeration provides four zoom modes given below: 

• Disabled - Disables zooming for the FlexChart.
• X - Enables zooming horizontally.
• Y - Enables zooming vertically.
• XY - Enables zooming horizontally and vertically.

The Scale property of the axis specifies the relative range of values displayed in the view. A value of 1 produces a zoomed out effect and a value less than 1 produces a zoomed in effect. Alternatively, the DisplayedRange property specifies the absolute range of values displayed in the view. For example, if DisplayedRange is set to 4, then 4 units are visible in the view and the excess data points lie outside the view.

The image below shows how the FlexChart appears on zooming.

The following code examples demonstrate how to set this property in C# and XAML. These examples use the sample created in the Quick Start section.

In Code

chart.ZoomMode = ChartZoomMode.XY;
chart.AxisX.Scale = 0.5;
chart.AxisY.Scale = 1;

In XAML

<StackLayout>
  <xuni:FlexChart x:Name="chart"  ItemsSource="{Binding Data}" BindingX="Name" ChartType="Column"
   ZoomMode="XY" Grid.Row="1" Grid.ColumnSpan="2">
    <xuni:FlexChart.Series>
      <xuni:ChartSeries x:Name="Sales2015" Name="2015 Sales" Binding="Sales" ></xuni:ChartSeries>
    </xuni:FlexChart.Series>
    <xuni:FlexChart.AxisX>
      <xuni:ChartAxis Scale="0.5" MajorGridVisible="true" AxisLineVisible="true">
      </xuni:ChartAxis>
    </xuni:FlexChart.AxisX>
    <xuni:FlexChart.AxisY>
      <xuni:ChartAxis Scale="1" ></xuni:ChartAxis>
    </xuni:FlexChart.AxisY>
  </xuni:FlexChart>
</StackLayout>

Copyright © GrapeCity, inc. All rights reserved.