Chart: Zoom and Pan


TKChart allows the end-user to zoom the plot area on the x and y axis independantly or on both axes together.
Zooming in and out on an axis can be enabled by setting the allowZoom property of the axis to YES.
To activate this behaviour for both axes ,you shoud put this settings to each axis.

financialChart.xAxis.allowZoom = YES;
financialChart.yAxis.allowZoom = YES;
chart.xAxis!.allowZoom = true
chart.yAxis!.allowZoom = true
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.


The pan functionallity 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.

financialChart.xAxis.allowPan = YES;
financialChart.yAxis.allowPan = YES;
chart.xAxis!.allowPan = true
chart.yAxis!.allowPan = true
xAxis.AllowPan = true;
yAxis.AllowPan = true;

TKChartAxis exposes two properties dedicated to control the pan level of the axis - pan and normalizedPan .
The 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 visualise the most right/down area depending on the zoom level.

The value of the normalizedPan property could 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 to true.