Chart Axes Pan & Zoom

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will learn how to enable the pan and zoom feature that allows users to zoom in and out of the chart through pinch gesture and pan through swipe.

Getting Started
Zoom Factor
Events
References

Getting Started

There are two boolean properties that enable this feature:

allowZoom - Used to enable zooming by the axis.
allowPan - Used to enable panning by the axis.

Zoom Factor

You can programmatically define a zoom factor by which the chart will zoom. This is done via two properties exposed by RadCartesianChart:

horizontalZoom - Defines the zoom factor applied to the horizontal axis if zoom is enabled on it.
verticalZoom - Defines the zoom factor applied to the vertical axis if zoom is enabled on it.

For example, if you set one of these properties to 1.5 this will apply a 50% zoom relative to the original zoom factor of 1.

Events

To notify you when the selection state of an item is changed, the chart exposes the following events:

chartZoomed - Fired multiple times when the chart is zooming. The event data argument provides information about the event name and the chart that is zoomed.
chartPanned - Fired multiple times when the chart is panning. The event data argument provides information about the event name and the chart that is panned.

With the following example you can see that pan & zoom properties could be used for any axis assigned to a series or to the chart along with events handling.

Example 1: Pan and Zoom Enabled

import { LinearAxis, ChartAxisHorizontalLocation, LogarithmicAxis } from 'nativescript-ui-chart';
import { getCountriesData } from '../../data';

const description = 'Pan & Zoom';

export default {
  name: 'PanZoom',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart>

      <BarSeries v-tkCartesianSeries :items="items" categoryProperty="Country" valueProperty="SecondVal" :verticalAxis="linearAxisZoomPan">
      </BarSeries>

      <CategoricalAxis v-tkCartesianHorizontalAxis allowPan="false" allowZoom="true"></CategoricalAxis>

      <LineSeries v-tkCartesianSeries :items="items" categoryProperty="Country" valueProperty="Amount" :verticalAxis="linearAxisZoom">
      </LineSeries>

    </RadCartesianChart>
  </Page>
  `,
  data () {
    let linearAxisZoom = new LinearAxis();
    linearAxisZoom.horizontalLocation = ChartAxisHorizontalLocation.Left;
    linearAxisZoom.allowZoom = true;

    let linearAxisZoomPan = new LinearAxis();
    linearAxisZoomPan.horizontalLocation = ChartAxisHorizontalLocation.Right;
    linearAxisZoomPan.allowZoom = true;
    linearAxisZoomPan.allowPan = true;
    return {
      title: description,
      items: getCountriesData(),
      linearAxisZoom: linearAxisZoom,
      linearAxisZoomPan: linearAxisZoomPan,
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

References

Want to see this scenario in action? Check our SDK Examples repository on GitHub. You will find this and many other practical examples with NativeScript UI.

Examples used in this article:

Pan and Zoom Example

NativeScript & Vue.JS