Pan & Zoom

If you need a RadCartesianChart that allows you to zoom in/out to more granular values you should enable this feature setting the
corresponding property of the horizontal or vertical axis.

There are two boolean properties that enable this feature:

Setting Zoom Factor Programmatically

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.

Handling Pan&Zoom events

To notify you when the selection state of an item is changed, RadChartView 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.

Example

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.

<chart:RadCartesianChart id="PanZoomChart" >
    <chart:RadCartesianChart.series>

       <chart:BarSeries seriesName="Bar" items="{{ categoricalSource }}" stackMode="Stack" categoryProperty="Country" valueProperty="SecondVal">

            <chart:BarSeries.verticalAxis>
                <chart:LinearAxis horizontalLocation="Right" allowZoom="true" allowPan="true"/>
            </chart:BarSeries.verticalAxis>
        </chart:BarSeries>

        <chart:LineSeries seriesName="Line" items="{{ categoricalSource }}" stackMode="Stack" categoryProperty="Country" valueProperty="Amount">

            <chart:LineSeries.verticalAxis>
                <chart:LinearAxis horizontalLocation="Left" allowZoom="true"/>
            </chart:LineSeries.verticalAxis>
        </chart:LineSeries>

    </chart:RadCartesianChart.series>

    <chart:RadCartesianChart.horizontalAxis>
        <chart:CategoricalAxis allowPan="true" allowZoom="true"/>
    </chart:RadCartesianChart.horizontalAxis>

</chart:RadCartesianChart>

References

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

Related articles you might find useful: