Question
SciChart.js Forums: Zoom and Pan Behaviour
Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. What I want is when we scroll the chart it should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SciChart.js?
Discussion
Read the discussion at SciChart.js Forum: Zoom and Pan Behaviour
Full Solution
We posted a solution on Github here.
To add the MouseWheel panning behaviour to the chart, we start off with a MouseWheelZoomModifier, but we override the function modifierMouseWheel.
In here we perform a scroll on the X-Axis using the mouseWheelDelta value:
This results in the panning (scrolling) on mousewheel in the chart.
Further Reading
This example makes use of JavaScript's ability to override a function. By assigning mouseWheelModifier.modifierMouseWheel = (args) => { } we are able to complete override the default mouse wheel handling.
The args are of type ModifierMouseArgs. This contains a property for the mouseWheelDelta.
Finally, we can access the parent SciChartSurface via the mouseWheelModifier.parentSurface property, then access the SciChartSurface.xaxes collection and finally call AxisBase2D.scroll().
The MouseWheelZoomModifier documentation page
To find out about the capabilities of the MouseWheelZoomModifier, see it's dedicated documentation page here.
MouseWheelZoomModifier functions and properties
For a list of available functions on MouseWheelZoomModifier that can be overridden see the TypeDoc page for this type.
- apply
Theme - delete
- get
All Series - get
Axis Size - get
IncludedXAxis - get
IncludedYAxis - grow
By - include
All Axes - includeXAxis
- includeYAxis
- modifier
Double Click - modifier
Mouse Down - modifier
Mouse Enter - modifier
Mouse Leave - modifier
Mouse Move - modifier
Mouse Up - modifier
Mouse Wheel - modifier
Pointer Cancel - notify
Property Changed - on
Attach - on
Attach Series - on
Detach - on
Detach Series - on
Parent Surface Rendered - perform
Pan - perform
Zoom - set
Parent Surface - test
Property Changed - toJSON
AxisBase2D functions and properties
For a list of further functions on the axis see AxisBase in the TypeDoc.
- animate
Visible Range - apply
Theme - clear
Coord Calc Cache - coerce
Zero Visible Range - delete
- draw
- draw
Axis Bands - draw
Axis Bands And Grid Lines - draw
Debug - draw
Grid Lines - get
Current Coordinate Calculator - get
Current Coordinate Calculator Internal - get
Default Non Zero Range - get
IsValid For Drawing - get
IsXCategory Axis - get
Labels - get
Max Auto Ticks - get
MaxXRange - get
Maximum Range - get
Ticks Max Size - get
WindowedYRange - getXData
Range - getXVisible
Range - has
Default Visible Range - has
Valid Visible Range - is
Valid Range - measure
- notify
Property Changed - on
Attach - prepare
Render Data - scale
- scroll
- set
IsXAxis - toJSON
- zoom
- zoom
By