Zoom and Pan Behaviour

Hi again Arun

For the following behaviour:

1. On mousewheel, pan the chart in X-direction
2. On mouse-down / drag / up, zoom the chart into a rectangle in X-direction only

Try this code –

import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D"; 

const mouseWheelModifier = new MouseWheelZoomModifier();
// Override default behaviour to call XAxis.Scroll on mouse-wheel delta 
mouseWheelModifier.modifierMouseWheel = (args) => {
    const delta = args.mouseWheelDelta * 0.1;
    mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
        x.scroll(delta, EClipMode.None);
    });
};
sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier( { xyDirection: EXyDirection.XDirection }));
sciChartSurface.chartModifiers.add(mouseWheelModifier);

Is that what you need?

Best regards,
Andrew

Hi Arun

Thanks to our flexible ChartModifier architecture, almost any combination of zoom and pan operations is possible with SciChart.js. However, to give you a solution I need to clarify exact requirements.

You want to do this:

1. When mouse-dragging the chart horizontally you want to pan the chart horizontally only
2. Do you also want to autorange (auto fit) on the y-axis as you do this?
3. When mouse-dragging the chart you also want to draw a RubberBand zoom rectangle but only zoom in the X-direction?

Note that (1) and (3) actually conflict – both require the mousedown event, so how would we know which to choose?

Please specify the requirements – draw a diagram if necessary – and we will show you a solution

Best regards,
Andrew

Hi Arun

Turns out for the mousewheel this is pretty easy. Just set the XyDirection property when you create the modifier

    const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection}));

For the RubberBandXyZoomModifier the same property exists but I checked and it is ignored. This property should restrict the Rubber band zoom to X or Y direction.

    sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection}));

However, it was an easy fix so I’ve pushed it to our repository and it should get released as version v1.4.1583 or later in the next few days.

Thanks for reporting!

Best regards,
Andrew

Andrew Burnett-Thompson,
what we require is 2 functionalities:
1. zoom
– zoom should be activated on mousedown+drag+mouseup
2.Pan
– pan should be activated on mousewheel (like regular web pages scroll behaviour)

could you please advice on how to implement these.