Pre loader

Tag: zoompanmodifier

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes

I am trying to add a custom modifier (derived from ChartModifierBase2D) to allow our users to navigate through datapoints using keyboard — left and right arrows.
But, the ZoomPanModifier prevents the keyboard events to reach this custom modifier.

Steps to reproduce the issue:
1. For example, use the following modifier that just listens to keyboard event and logs the event to console.
2. Add ZoomPanModifier along with the custom modifier.
3. Click on the chart to focus it and then press arrow keys. Nothing will be logged in the console.
4. Disable the ZoomPanModifier (either by setting its this.isEnabled = false or removing it entirely).
5. Click on the chart to focus it and then press arrow keys. You will see the keys logged in the console.

export class DataPointNavigatorModifier extends ChartModifierBase2D {
  public readonly type: string;

  constructor(options?: IChartModifierBaseOptions) {
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.type = 'DataPointNavigatorModifier';

  private handleKeyDown(ev: KeyboardEvent) {
    console.log('DataPointNavigatorModifier::handleKeyDown', ev);

  override onAttach() {
    this.parentSurface.domChartRoot.tabIndex = this.parentSurface.domChartRoot.tabIndex || 0;
    this.parentSurface.domChartRoot.addEventListener('keydown', this.handleKeyDown);

  override onDetach() {
    this.parentSurface.domChartRoot.removeEventListener('keydown', this.handleKeyDown);

I am open to other solutions that would allow users to navigate through datapoints using keyboard.

Best Regards,
Sachin Patel.

1 vote

Hi everyone,

I have a chart with a ZoomPanModifier that allows to pan over the X axis only, what I’d like to accomplish is to append more data when the user reaches the max value of the axis while panning.

Is there an event to bind to a command or some other way to do something like this in MVVM?
I’d like to avoid using visible range events and only have this behaviour while panning if possible.

Thanks a lot,


1 vote

I have a real time updated chart and users can add annotation to the chart. The position of the annotation will be updated with the chart data. I would like to stop updating the annotation position while user dragging the annotation. So I added a flag (e.g. isDragging) to the annotation dragStarted and dragEnded events. The isDragging flag will be set to true in dragStarted and then set to false in dragEnded. I will check this flag before updating the annotation position.

Here’s the problem, the annotation dragStarted event will be triggered when users do panning in the chart. But the dragEnded will not be triggered in this case. It breaks my plan to stop updating the annotation position as the isDragging will be incorrect. Is it a bug that the annotation dragStarted event (but not the dragEnded event) triggered when panning?

  • Quyen Sy asked 1 year ago
  • last active 1 year ago
1 vote

I am trying to implement the following functionality requested by our users:

– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave

– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave

Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.

My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).

I have uploaded the code at

Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.

I would appreciate any help I can get and thanks a bunch in advance.

Best Regards,
Sachin Patel.

0 votes

ZoomPanModifier date format charts zoom out continuously then showing NaN on the scale. It happened because the zoom level goes under the invalid date. Can you add the Minimum Zoom/Pan and Maximum Zoom/Pan area to be configured on options?

0 votes

i wanna use vertical line annotation in box annotation that only one edge moves to drag like using ‘chart drag area to zoom’

I checked about custom annotation and there’s features said ‘common features of annotations’ but they don’t have any features l’m looking for

i put pictures for understanding.

there are box annotation on a graph and I want to move line to drag and box is going to smaller or larger

and i also want the other edge is fixed, it can not be dragged

do you guys have any tips for me?

  • cy bang asked 4 years ago
  • last active 4 years ago
0 votes


I’m wondering is there a way to temporarily disable zoompan modifier while I re-rendering the chart. My re-rendering on the heatmap might take a second, I hope the interaction can be disabled during that process.

  • Gang Xu asked 4 years ago
  • last active 4 years ago
0 votes


I have medical data displaying every 1s with Date as XAxis and ml/hr as YAxis. I want to control the display to let say, 6hr window in the current display by default whereas zoom-in can go to precisely 1hr and not below that and zoom-out reset to 6hr. How can I achieve this?

FYI, my data retention is for 72hrs.

Praween K.

0 votes

Hello, I have added YAxisDragModifier and ZoomPanModifier to my surface and when I try to drag on Y axis I can move the X axis too and that is not the behavior that I was trying to get. I want when I drag/move YAxis not to move on the YAxis also.

Here is my code:

Surface.ChartModifiers.Add(new PinchZoomModifier());
Surface.ChartModifiers.Add(new ZoomExtentsModifier());
Surface.ChartModifiers.Add(new YAxisDragModifier { DragMode = AxisDragModifierBase.AxisDragMode.Pan });
Surface.ChartModifiers.Add(new XAxisDragModifier { DragMode = AxisDragModifierBase.AxisDragMode.Pan, ClipModeX = ClipMode.None });
Surface.ChartModifiers.Add(new ZoomPanModifier
Direction = Direction2D.XDirection,
ZoomExtentsY = false

Here is the video with the behavior:

Help please!

1 vote

Hi I am implementing a chart on Android with 24 Hours of data viewable in 1, 2, 4, 8, 12 and 24 hours windows. The chart is drag-able upon the xAxis only. The full extent of the yAxis is always visible.

I am struggling to control the rate of scroll compared to the drag speed. What is desired is always a perceived one to one ratio of movement. This means that a data point’s movement distance when scrolled is the same is the point of touch’s movement distance regardless of zoom level.

I am currently using:

    ChartModifierCollection surfaceChartModifiers =  surface.getChartModifiers();
    XAxisDragModifier dragModifier = new XAxisDragModifier();

    ZoomPanModifier zoomPanModifier = new ZoomPanModifier();

Currently however the ratio does not appear to be one to one the scrolling move further than the touch drag distance.

How can I achieve this?

0 votes


I want the chart to scroll from right to left and stop at left side. Don’t automatically scale, don’t move right.

I have a modifier:

ZoomPanModifier zoomModifier = new ZoomPanModifier() { ... };
// zoomModifier.setClipModeX(ClipMode.ClipAtMin);

When I scroll a chart left to the beginning, it scales the chart to one screen. So, all points are visible, proportions are broken.
When I replace “ClipMode.ClipAtExtents” to “ClipMode.ClipAtMin”, it sometimes stops at left side (as desired), but if I swipe too fast, it shows a right part of the chart and continues to scroll left.
Currently a first version of the SciChart library is installed.
As written in both “ClipAtExtents” and “ClipAtMin” have another behaviour.
My question is similar to, but for Android.

Answer, please, is it a bug? Has it been already fixed or expected to be fixed?

  • Alex N asked 7 years ago
  • last active 7 years ago
0 votes

Hi, guys

My x axis is SCICategoryDateTimeAxis class type. And it’s limited by VisiableRangeLimit like:

[xAxis setVisibleRangeLimit:[[SCIDoubleRange alloc] initWithMin:SCIGeneric(firstItem – (lastItem – priorItem))
Max:SCIGeneric(lastItem + (lastItem – priorItem))]];

Also for scrolling my content inside chart:

SCIZoomPanModifier * zpm = [[SCIZoomPanModifier alloc] init];
[zpm setModifierName:@"PanZoom Modifier"];
[zpm setClipModeX:SCIZoomPanClipMode_ClipAtExtents];

Like a description SCIZoomPanClipMode_ClipAtExtents says:
“forces the panning operation to stop suddenly at the extents of the data” – but it’s not working constantly.
Sometimes it’s allow to scroll outside the range. Like on the attached image.

So my question is how to limit scrolling by min and max value?

Best regards,
Sushynski Andrei

1 vote

Hello again,

I use ZoomPanModifier in my application. I’ve rotated my chart: I’ve set XAxis.AxisAlignment to “Left” and YAxis.AxisAlignment to “Bottom”. I’ve also set YAxis.AutoRange property to “Never”. When I try to pan my chart, the yaxis extends to all data ranges of renderable series.

Is this a bug? Or need I set a flag to make the y-axis not to extend

Thank’s in advance

I’ve attached GIF (if it doesn’t render) and project below.

  • Egor asked 8 years ago
  • last active 8 years ago
0 votes

I am using SciChart to draw some graph on my application.
I use ZoomPanModifier to be able to zoom and drag the graph (with range limit).

<s:ZoomPanModifier ClipModeX="ClipAtExtents" XyDirection="XYDirection" ZoomExtentsY="True" ExecuteOn="MouseLeftButton" IsEnabled="True"/>

But the problem is when I drag to the edge of the graph, it will scale up automatically when I keep dragging.

Is there any way so that I can zoom in/out, drag graph (after zooming in), and no dragging and scaling up when I get to the edge of graph?

-1 votes

Hi All,

I’ve read the following forum entry on using a context menu with and ALT-Right click to get around problems with event interference:

I have the same problem with zoom and implemented the solution mentioned above. Then I noticed on one of my test apps that the two would live side by side quite nicely without doing anything BUT it made selecting a scatter series trickier. i found that using ReceiveHandledEvents had an effect on the behaviour in that while this was false zoom and context were fine but selecting a series was a bit hit and miss, but while it was true the behaviour in the link was displayed i.e. context menu appearing after zoom operation.

Here’s the XAML;

        <s:SciChartSurface x:Name="ChartSurface" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" s:ThemeManager.Theme="Chrome">

                <MenuItem Header="Item1" />
                <MenuItem Header="Item2" />
                <MenuItem Header="Item3" />
                <MenuItem Header="Etc.." />

            <s:DateTimeAxis AutoRange="Once"/>

            <s:NumericAxis x:Name="LinearAxis" Id="LinearAxis" AutoRange="Always" AxisAlignment="Left" AxisTitle="Linear" Style="{StaticResource LinearScaleStyle}"/>

                <s:RubberBandXyZoomModifier x:Name="rubberBandZoomModifier" IsEnabled="True" IsXAxisOnly="False" IsAnimated="True" ExecuteOn="MouseRightButton" ZoomExtentsY="False" ReceiveHandledEvents="True"/>
                <s:ZoomPanModifier x:Name="zoomPanModifier" ExecuteOn="MouseLeftButton" ZoomExtentsY="False" ReceiveHandledEvents="True" IsEnabled="True" XyDirection="XDirection"/>

                ReceiveHandledEvents * True = context menu appears on completion of a right mouse button zoom operation
                ReceiveHandledEvents * False = Zoom and Context menu are fine but selecting a series needs a slow double click type thing
                <s:SeriesSelectionModifier ReceiveHandledEvents="True">
                <s:LegendModifier x:Name="SelectedSeriesLegend" ShowLegend="True" GetLegendDataFor="SelectedSeries" Margin="5" SourceMode="AllVisibleSeries" />


Can anyone explain this? Is there an accepted workaround? are there any other easy methods of selecting a series that don’t involve clicking on it (e.g. select from legend)?

Thanks in advance


1 vote


I have ClipModeX=”ClipAtExtents” on my ZoomPanModifier. I need the same behavior on the y-axis, but there is no “ClipModeY”.

How do I prevent y-axis data from panning off the chart?


Showing 16 results