Zooming

The ZoomMode property can be used to enable touch based zooming on FlexChart. Four zoom modes are available in FlexChart:

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 greater than 1 produces a zoomed out effect and a value less than 1 produces a zoomed in effect. For example, a value of 2 doubles the original range of the axis visible in the view, whereas a value of 0.5 makes half of the axis visible in the view. 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.

Scrolling can be done by using the drag gestures.

The image below shows how the FlexChart appears, after these properties have been set.

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

C#	Copy Code
chart.ZoomMode = ZoomMode.XY; chart.AxisX.Scale = 0.5; chart.AxisY.Scale = 2;

In XAML

XAML	Copy Code
<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="Sales2014" Name="2014 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="2" ></xuni:ChartAxis> </xuni:FlexChart.AxisY> </xuni:FlexChart> </StackLayout>

XAML

Copy Code

<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="Sales2014" Name="2014 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="2" ></xuni:ChartAxis>
    </xuni:FlexChart.AxisY>
  </xuni:FlexChart>
</StackLayout>