In this tutorials, followingTutorial 03 - Adding Series to a Chart where we created data series, we add the ability to zoom and pan to the chart.

Adding Zooming and Panning

So far in the tutorial series, we have created a new chart, added an XAxis and YAxis, added some data series, and simple zoom modifiers. Now are going to extend that and add more interaction behavior with other ChartModifiers.

ChartModifiers

In SciChart, chart interactions are defined by ChartModifiers. In addition to the SciChart modifiers you can write custom modifiers or extends existing ones.

The provided modifiers include PinchZoomModifierRubberBandXyZoomModifierZoomPanModifierZoomExtentsModifierCursorModifierRolloverModifier, SeriesSelectionModifier and others.

Adding Chart Modifiers

Now we are going to create and configure a couple of new modifiers using SciChartBuilder and add them to the ChartModifiers collection of the SciChartSurface:

ModifierGroup chartModifiers = sciChartBuilder.newModifierGroup()
.withPinchZoomModifier().build()
.withZoomPanModifier().withReceiveHandledEvents(true).build()
.withZoomExtentsModifier().withReceiveHandledEvents(true).build()
.withXAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Scale).withClipModeX(ClipMode.None).build()
.withYAxisDragModifier().withReceiveHandledEvents(true).withDragMode(AxisDragModifierBase.AxisDragMode.Pan).build()
.build();

Then we add it to the collection:

Collections.addAll(surface.getChartModifiers(), chartModifiers);

After re-building and running the application the chart should behave like this:

Further Reading

To learn more about the zooming and panning modifiers provided by SciChart out of the box please find links to the corresponding documentation articles below:

• PinchZoomModifier - allows zooming a chart with a pinch
• ZoomPanModifier - allows pan with finger drag
• RubberBandXyZoomModifier - allows zoom with finger drag
• ZoomExtentsModifier - allows zoom to fit on double tap
• YAxisDragModifier - allows scale or pan on Y axis drag
• XAxisDragModifier - allows scale or pan on X axis drag

Also you can find out about the ChartModifiers API and how to use it to create custom chart modifiers in the Custom Modifiers - ChartModifierBase API article.