Pre loader

Tag: RubberBandXyZoomModifier

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

1 vote

Is it possible, in version 2.2.2404, to have RubberBandXyZoomModifier function like what seems to be the default for v3? So when I’m dragging the box to zoom, if I leave the chart area, the box snaps to the edges of the chart, and upon mouse release, it zooms normally to the box.

I can provide an example: — broken (version 2.2.2404) — working (version 3.0.301)

Same exact code

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";

const dataX = [0, 10, 20, 30, 40, 50];
const dataY = [0, 10, 5, 20, 15, 35];

// eslint-disable-next-line

async function initSciChart() {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(

  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);

  const lineData = new XyDataSeries(wasmContext, {
    xValues: dataX,
    yValues: dataY

    new FastLineRenderableSeries(wasmContext, { dataSeries: lineData })

  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({}));
  sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({}));
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({}));

0 votes


Is it possible to trigger the rubber band zoom modifier on mouse double click?

                        IsEnabled="{Binding NotRecording}"
                        RubberBandStrokeDashArray="2 2"

The above does not trigger anything.

Ideally I’d like to double click to start the area selection and click again to confirm it, as opposed to mouse down and mouse up.

I want to do this because I’m using the mouse down event to place the Vertical Slice at the clicked position.


0 votes
0 answers

On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.

0 votes


I’m using RubberBandXyZoomModifier for zooming and i want to reverse the process.
If i double tap to screen, i want the process to be reversed and back to last zooming level.
Firstly how can I dedect the double tap, and secondly how can I reverse the process?


0 votes

Currently, I’m using a uniform heatmap to display images taken from a monochrome camera. I’m using a RubberBandXyZoomModifier to allow to user to zoom in on a region of interest in the image. The SciChartSurface is set to be 640×480 (the image size) and is hosted in a Viewbox, so it’s size scales uniformly with the grid that it’s in. The problem I’m facing is that when I zoom in, the zoomed part of the image stretches to fit the 640×480 size, changing the pixel aspect ratio, but I want the pixel aspect ratio to stay constant so they are all square. What I want to happen is that extra space is added either on the top/bottom or left/right of the zoomed part of the image so the pixel aspect ratio stays constant. See the attached image for a visual explanation. I think I either need to change the SciChartSurface size or the GridLinesPanel size to match the zoomed area size, but I’m not sure how to go about doing that. Is there a way to achieve this? Thanks!

0 votes

I have multiple chart panes and matching pane view models. I handle all synchronization in the view models rather than via share mouse group id or viewportmanager.

The chart modifiers are delared in xaml, but the Xaxis shared visual range of each pane is declared and shared via reference from the main main view model. When I use the mousewheel to zoom all panes are zoomed at the same time because of the shared visual range reference that all x-axes share. However when I use the RubberbandXyZoommodifier on one pane the other panes are not zoomed, however. I debugged and found that the shared reference of visual range is broken as soon as I use the RubberbandXyZoomModifier. Why is that? Is this a bug? Thanks

  • bbmat asked 6 years ago
  • last active 6 years ago
0 votes
0 answers

I have a TabControl that contains a dynamic number of chart panes via an ItemsControl. Inside the ItemsControl’s ItemsTemplate is a single ScichartSurface with bindings to the RenderableSeries, XAxis, YAxes, and VerticalChartGroup.

The xaml looks something like this:

<s:SciChartSurface name="Chart" RenderableSeries="{Binding rSeries}" XAxis={Binding xAxis} YAxes={Binding yAxes} s:SciChartGroup.VerticalChartGroup="{Binding vGroup}">

Within the surface, I have a ModifierGroup that contains (in order) a RubberbandXyZoomModifier (XAxisOnly), MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier, and a custom mod call TimeSegmentSelectionModifier. All of these modifiers have their ReceiveHandledEvents property set to True, they are all under the same MouseEventGroup, and they all seem to work fine under normal circumstances.

Note: The Rubberband and TimeSegment modifiers are inversely set to Enabled. Meaning, only one of them functions at a time.

My issue is primarily with the RubberBand Mod:

Let’s say I have 5 chart panes being displayed and I want to zoom in; If I click and drag within the 3rd chart, every chart zooms correctly.
If I click withing the 3rd chart, drag the mouse outside of that chart (anywhere else on my screen) and let go, then only charts 1, 2, and 3 are zoomed correctly. Charts 4 and 5 won’t budge and act as if I had merely zoomed to extents.

This happens with any number of chart panes and the issue occurs on whatever pane I happened to be zooming in on.

I’ve been troubleshooting this issue for a few days now and I don’t know where else to look.
Any help is greatly appreciated.

1 vote

Hello, SciChart Team!
i have an issue using mouse drag event ( RubberBandXyZoomModifier, ZoomPanMidifier). the message says “NullReferenceException in SciChart.Charting.dll ” or “Thread.cs not found” from time to time.
after some experiments i figured out that the app starts to crush after i change XAxis type .
i have a simple mvvm user control used to display both arrays of double and datebound data, XAxes of SciChart Surfase is bound to an observable collection of IAxis elements. if i need to change chart type i clear this collection and create an axis of desired type (DateTimeAxisViewModel or NumericAxisViewModel). after that the series can be added, but zooming causes crash with nearly to no info.

i attached a solution, which lacks only scichart dlls in order to run (hopefully), Window_Loaded method has a commented line which changes chart type and makes app crush on zooming, would be nice if you checked it out.
Thanks in advance!

0 votes

I’ve been trying a few ways to get this to work now and I’m still struggling to get a catch-all solution.

My requirements are:
– self-scrolling real-time data series with a fixed-time range (regardless of the number of points)
– y axis should support either fixed or automatic visual range
– support rubber band zoom (and ideally mousewheel too) on both axes

The key problem is that the stock ticker example doesn’t have a fixed time width. The points are added to the chart, and the axis expands until it reaches capacity. It’s also relatively easy to use FifoCapacity (adding a lot of NaN points), but FifoCapacity works on number of points, which isn’t great when you have irregular updates. I’m happy with the chart not scrolling until a new update is received, but the range of the chart must be fixed (say, five minutes), regardless of the number of visible points on the chart.

My current solution involves deriving from XyDataSeries to duplicate the FifoCapacity behaviour for a fixed time:

   public class RealTimeXyDataSeries<T> : XyDataSeries<DateTime, T>
            where T : IComparable
    public TimeSpan _limit;

    public TimeSpan Limit
        get { return _limit; }
            _limit = value;

    public RealTimeXyDataSeries(TimeSpan limit)
        Limit = limit;

    public override void Append(DateTime x, T y)
        base.Append(x, y);


    public void Update()
        if ((DateTime)XMax == DateTime.MinValue) return;

        var c = 0;

        while (XValues[c] < (DateTime) XMax - Limit) c++;

        if (c <= 0) return;

        RemoveRange(0, c);

That takes care of removing points, but doesn’t deal with the range issue. To deal with that, I have some code in my codebehind to set the XAxis VisibleRange on every update, which feels a bit nasty. I wanted to create a RealTimeDateTimeAxis, but none of the relevant functions are override/virtual.

I also took the implementation of RubberBandXyZoomModifierEx from the knowledge base, with some modifications to deal with Y-Axis zoom/reset based on it’s AutoRange setting. However, this involves setting the Y-Axis AutoRange state back to a saved value, and I keep seeing MouseModifierUp events after my DoubleClick events, which resets AutoRange back to Never.

It feels like I’m doing a lot of work in a lot of places to get this to work, and it’s resulting in complex code and buggy behaviours; I’m not comfortable handing this over to another engineer in the current state.

Is there a better way to do this?

  • Rick C asked 7 years ago
  • last active 7 years ago
0 votes

We are transitioning from using oxyplot to sci-chart for the increased performance it offers.

In oxyplot you are able to configure the plot to allow you to click and drag on an axis to zoom only that axis.

I have found RubberBandXyZoomModifier, and can see how it can be set up to only zoom the x or y axis, but cant see any way to allow zooming a specific x or y axis when the click and drag occurs on that axis.

Before I dive into the modifiers API and start to figure out how to do this from scratch, am I missing something, or do you have any pointers on how to achieve this functionality as I believe it is a pretty common use case.

  • Hugoagogo asked 8 years ago
  • last active 8 years ago
1 vote

Due to the user often needing to select pre-specified ranges of data to view, I handle the X- and Y-axis VisibleRange manually in code.
I also have both RubberBandXyZoomModifier and MouseWheelZoomModifier enabled.
Instead of using a generic ZoomExtentsModifier (which would show all data), I handle a MouseDoubleClick in code and set the VisibleRanges to the bounds of the user-selected data area’s range.

Now if the RubberBand zoom is used followed by a double-click, the VisibleRange.SetMinMax function gets called with the correct values in my code, but that range does not appear on the chart. However if a MouseWheelZoom is used after the RubberBand zoom, it works fine. Is there something about the RubberBand zoom that is stopping the VisibleRange.SetMinMax function values from being recognized by the chart?


0 votes

To whom this may concern:

I am having a small problem with text annotations. When they are dynamically created with the IsEditable property set to “true”, the annotations change in size after being moved.

This is shown in the “Interaction with Annotations” example in your Examples program. If you look at the box showing “sell”, at first when you zoom in on it closely enough (using the RubberBandXyZoomModifier around the extents of the TextAnnotation) it retains its size.

Now if you zoom back to the extents, and move the “sell” TextAnnotation anywhere around the graph, and then zoom in on it again, it changes size (screenshot from Examples program attached). This is an issue i’m having with one of my programs.

Is there a way to maintain the size of the text annotation without having to set a fixed height and width?

Thanks kindly!

— Ari

  • Ari Sagiv asked 8 years ago
  • last active 8 years ago
0 votes


I’m using the error bars series, and I get some strange behavior when zooming in/out using the RubberBandXyZoomModifier.
Sometimes the vertical line is not drawn, and sometimes the top & bottom horizontal lines are not drawn / drawn too wide.

This issue doesn’t occur when zoom with the MouseWheelZoomModifier.
However, with the MouseWheelZoomModifier in the current implementation the top & bottom horizontal line width depend on the zoom level (the zoom level affects the horizontal lines), where in my opinion it should not. For example, when zooming in, the horizontal lines may cover the whole view width, and when zooming out to a certain level you cannot see them since they are too short.

I attached a few screenshots of the same data in different zoom/pan, when using the RubberBandXyZoomModifier (the MouseWheelZoomModifier issue can be easily reproduced with simple data).
Screenshot ‘error_bars_display1’: horizontal lines are too wide.
Screenshot ‘error_bars_display2’: vertical & horizontal lines are not drawn at all (left line. Only the scatter series cross marker can be seen).
Screenshot ‘error_bars_display3’: vertical line is drawn, but horizontal lines are not (left line. This is one mouse wheel rotation-click away from screenshot #2).
It seems like an issue with the line size calculations (?).

Note: the ‘closing’ value of the HlcSeries is drawn using a Scatter series with a cross marker, so you can ignore it in the attached screenshots.


  • Yonatan D asked 9 years ago
  • last active 9 years ago
0 votes


Are there any events on the chart which fires on zoom starts and zoom ends which i can use to calculate the time taken for the zoom operation.


Pruthvi Sagar

-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


0 votes


Could your provide an example on how to change the color of the zoom box that is drawn when using the rubberbandzoomodifier? I have a gray background and it is difficult to see the white box that is drawn.


  • morseja asked 9 years ago
  • last active 9 years ago
Showing 16 results