Chart for Xamarin.iOS: Zoom and Pan

Zoom and Pan feature handles touch events to enable panning and zooming of the associated chart plot area.

Zoom

TKChart allows the end-user to zoom the plot area on the X and Y axis independently or on both axes together. Zooming in and out on an axis can be enabled by setting the AllowZoom property of the axis to true.

To activate this behavior for both axes, you should apply this setting to each axis separately.

xAxis.AllowZoom = true;
yAxis.AllowZoom = true;

TKChartAxis exposes a property ZoomRange of type TKRange by the help of which you can define the allowed zoom range.

The zoom level could be also explicitly set to a number by using the Zoom property of TKChartAxis. This way you can control the zoom level at which TKChart appears when initialized.

Pan

The pan functionality allows moving the visible area of the chart when it is zoomed in. To enable panning, you can use the TKChartAxis property AllowPan. Enabling pan in both sides could be done by setting both directions pan property.

xAxis.AllowPan = true;
yAxis.AllowPan = true;

TKChartAxis exposes two properties dedicated to control the pan level of the axis - Pan and NormalizedPan .

Pan property can have any value that is compatible with the axis. If the property is set, the chart's visible area will start from the given value when TKChart is initialized. If the axis is not zoomed enough, then TKChart will visualize the most right/down area depending on the zoom level.

The value of the NormalizedPan property can be set between 0 and 1 and it represents a normalized value of the axis. The chart visible area will be moved based on the calculated value corresponding to the NormalizedPan value depending on the type of the axis.

Additionally you can apply inertia to your pan gesture by setting the AllowPanDeceleration property of the TKChart to true.

chart.AllowPanDeceleration = true;