Pre loader

Tag: Scroll

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
0 answers


The legend is in horizontal orientation, and Im displaying multiple series.

When the legend is inside the chart (default config), Im able to scroll left or right to see all available series.

But when it is moved outside the chart, it is no longer scrollable. Checkboxes are still clickable to show or hide series.

Thinking it might be something interfering with the scroll gesture, I started a new project following the Android tutorial. It still stops working as soon as I move it outside the chart.

Is this a bug, or am I missing something?

This does not happens on iOS.


XML Layout





Legend and LegendModifier config

    final SciChartLegend legend = findViewById(;

    final LegendModifier legendModifier = new LegendModifier(legend, false);

0 votes


I have a list of 12 items, but at the start I only want to see the last 6 items on the chart (stacked column chart). I want to be able to scroll / drag to reveal the first part of the list. I use the index of the list for the x-axis, so the list has indexes with range from [0, 11]

I’m having some weird behaviour implementing this.
When the data is loaded, i see the complete bars:

creenshot 2020-09-18 at 11.04.14.png

but when I start to scroll, i’m never able to reveal the complete bars anymore:
![Screenshot 2020-09-18 at 11.04.40.png][2]
![Screenshot 2020-09-18 at 11.04.59.png][3]

When i start scrolling to the end (although the chart is already at the end), the UI jumps and only shows half a bar. Also when i scroll to the beginning, it only shows half a bar.

How can I make sure I always see the complete bars?

This is the code, specific to the x axis & the scrolling:

val xAxis = sciChartBuilder.newNumericAxis()
            .withVisibleRange(5.5, 11.5)

using half values for the range seems to be the only way I can see the full bars. Once I start scrolling I only see half bars at the start & end

val surfaceChartModifiers: ChartModifierCollection = chart.chartModifiers
val dragModifier = XAxisDragModifier()
dragModifier.dragMode = AxisDragModifierBase.AxisDragMode.Pan

val zoomPanModifier = ZoomPanModifier()
zoomPanModifier.clipModeX = ClipMode.ClipAtExtents
zoomPanModifier.direction = Direction2D.XDirection
zoomPanModifier.zoomExtentsY = false
0 votes

I have a line chart that has already been drawn and synced with a sound.
when we play sound, chart begin to scroll horizontally.
but problem is lagging when scrolling chart.
Is there a way to fix this problem?

private Runnable mRunnable = new Runnable() {
    public void run() {
        forceRunInPauseMode = false;

        getActivity().runOnUiThread(() -> {
            currentTime = (int) exoPlayer.getCurrentPosition();

        int currentRange = currentTime * 2;

        if (!isDraw) {
            DoubleValues xValues = new DoubleValues(Arrays.copyOfRange(xDoubleArray, 0, xDoubleArray.length - 1));
            DoubleValues yValues = new DoubleValues(Arrays.copyOfRange(yDoubleArray, 0, yDoubleArray.length - 1));
            DoubleSeries doubleSeries = new DoubleSeries(xValues, yValues);
            lineData.append(doubleSeries.getxValues(), doubleSeries.getyValues());
            isDraw = true;
        xVisibleRange.setMinMax(currentRange - visibleInterval / 2, currentRange + visibleInterval / 2);

private void updateChart() {
    schedule = scheduledExecutorService.scheduleWithFixedDelay(() -> {
        if (!isPlaying && !forceRunInPauseMode)
        UpdateSuspender.using(binding.sciChart, mRunnable);

private void pause() {
    if (schedule != null)

private void initSciChart() {

    isChartConfigured = true;

    // Obtain the SciChartBuilder instance
    SciChartBuilder mSciChartBuilder = SciChartBuilder.instance();

    //set border style

    xVisibleRange = new DoubleRange();

    // Create a numeric X axis
    final IAxis xAxis = mSciChartBuilder.newNumericAxis()
            .withGrowBy(new DoubleRange(0.25d * visibleInterval / totalDuration, 0.25d * visibleInterval / totalDuration))

    final IAxis yAxis = mSciChartBuilder.newNumericAxis()
            .withVisibleRange(-1d, 1d)

    xAxis.setVisibleRangeChangeListener((iAxisCore, oldRange, newRange, isAnimating) -> {
        if (!isPlaying) {
            double c = ((newRange.getMinAsDouble() + newRange.getMaxAsDouble()) / 4);
            getActivity().runOnUiThread(() -> binding.tvCurrentDuration.setText(MiliToTimeConverter.milliToTime((long) c)));

    xAxis.setTickProvider(new CustomTickProvider());

    yAxis.setTickProvider(new CustomTickProvider());

    VerticalLineAnnotation verticalLine = mSciChartBuilder.newVerticalLineAnnotation()
            .withX1(0.5)   // black
            .withStroke(new SolidPenStyle(ColorUtil.argb(250, 120, 126, 136), true, 1f, null))

    ModifierGroup chartModifiers = mSciChartBuilder.newModifierGroup()
            .withModifier(new GestureModifierBase() {
                public void detach() {

                public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
                    return false;

                public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
                    // Scroll X
                    xAxis.scroll((-distanceX/2), ClipMode.ClipAtExtents);

                    return true;

    lineData = mSciChartBuilder.newXyDataSeries(Double.class, Double.class).build();
    XyDataSeries staticData = mSciChartBuilder.newXyDataSeries(Double.class, Double.class).build();

    final FastLineRenderableSeries lineSeries = mSciChartBuilder.newLineSeries()
            //.withPointMarker(mSciChartBuilder.newPointMarker(new EllipsePointMarker()).withSize(7, 7).withStroke(0xFF006400, 1).withFill(0xFFFFFFFF).build())
            .withPaletteProvider(new XYCustomPaletteProvider(ColorUtil.argb(255, 50, 153, 0))) // green
            .withStrokeStyle(ColorUtil.argb(250, 120, 126, 136), 1f, true) // black

    final IRenderableSeries staticLineSeries = mSciChartBuilder.newLineSeries()
            .withPaletteProvider(new XYCustomPaletteProvider(ColorUtil.argb(255, 50, 153, 0))) // green
            .withStrokeStyle(ColorUtil.argb(250, 120, 126, 136), 1f, true) // black

    DoubleValues xValues = new DoubleValues(Arrays.copyOfRange(xDoubleArray, 0, totalRange));
    DoubleValues yValues = new DoubleValues(Arrays.copyOfRange(yDoubleArray, 0, totalRange));
    DoubleSeries doubleSeries = new DoubleSeries(xValues, yValues);


    binding.sciChart.setRenderSurface(new RenderSurface(getContext()));

    Collections.addAll(binding.sciChart.getYAxes(), yAxis);
    Collections.addAll(binding.sciChart.getXAxes(), xAxis);
    Collections.addAll(binding.sciChart.getChartModifiers(), chartModifiers);
    Collections.addAll(binding.sciChart.getAnnotations(), verticalLine);

    staticData.append(doubleSeries.getxValues(), doubleSeries.getyValues());

0 votes

Hello! I have a real time line chart and a SciChartOverview control and the problem is, as soon as I want to extend the visible range with the overview’s slider, the chart’s x visible range is zoomed to extent. I’d like to have the same functionality as in the ScrollChartUsingOverviewControl example and the real time ticking stock chart. In those examples, if the visible range is extended by the overview scroll bar’s left-hand slider, the max visible range keeps rolling with new data, while the min visible range is extended. I followed those examples, by binding the XVisibleRange to the view model in 2 way mode, but for me the max visible range jumps to the latest data as soon as I move the overview’s slider to the left (stops rolling with new data).

Chart xaml:

<s:SciChartSurface Grid.Row="0" x:Name="Chart" RenderableSeries="{s:SeriesBinding SeriesViewModels}">
            <!--  Create an X Axis  -->
                <s:DateTimeAxis AxisTitle="Time" VisibleRange="{Binding XVisibleRange, Mode=TwoWay}" GrowBy="0, 0.1" DrawMinorGridLines="False" DrawMajorBands="True"/>
            <!--  Create a Y Axis  -->
                <s:NumericAxis AxisTitle="Count" AutoRange="Always" GrowBy="0.1"/>
            <!--  Specify interactivity modifiers  -->
            <!-- Add Zooming, Panning behaviours to the chart -->
                    <!-- Allow drag to zoom on Left mouse -->
                    <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton"
                                                         RubberBandFill="#33FFFFFF" RubberBandStroke="#AAFFFFFF"
                                                         RubberBandStrokeDashArray="2 2"/>
                    <!-- Allow pan on Right mouse drag -->
                    <s:ZoomPanModifier ExecuteOn="MouseRightButton" ClipModeX="None" />
                    <!-- Allow Dragging YAxis to Scale -->
                    <s:YAxisDragModifier DragMode="Scale"/>
                    <!-- Allow Dragging XAxis to Pan -->
                    <s:XAxisDragModifier DragMode="Pan"/>
                    <!-- Allow Mousewheel Zoom -->
                    <!-- Allow Zoom to Extents on double click -->
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"/>
                    <!-- Add a Legend to the chart -->
                    <s:LegendModifier ShowLegend="True" Orientation="Horizontal"
                                               LegendPlacement="Inside" />
                    <!-- Add a RolloverModifier to the chart (shows vertical line tooltips) -->
                    <s:RolloverModifier ExecuteOn="MouseMove" ShowTooltipOn="MouseHover"/>
        <!-- Add a Scrollbar, and bind to SciChartSurface.XAxis -->
        <Grid Grid.Row="1">
                <ColumnDefinition Width="*"/>
                <!--<ColumnDefinition Width="75"/>-->
            <!--<s:SciChartScrollbar Grid.Column="0" Axis="{Binding ElementName=PhotonChart, Path=XAxis}"/>-->
            <s:SciChartOverview Grid.Column="0"
                                DataSeries="{Binding SeriesViewModels[0].DataSeries, Mode=OneWay}"
                                ParentSurface="{Binding Source={x:Reference Name=Chart}, Mode=OneWay}"
                                SelectedRange="{Binding XVisibleRange, Mode=TwoWay}"/>

Am I missing something, or what am I doing wrong?

0 votes

I have a real-time chart that already drawn.
Is there a method that scrolls programmatically ?
If there is no such method, how i can do this ?

0 votes

Hello everyone.

I have 2 stacked horizontally charts with


so they drag and zoom in same way.

But when i put one finger on first chart, second finger on second chart – then total apocalypse happens.
Is it possible to zoom it, like two fingers on one chart or disable zoom in that situation, so charts will have no conflict?

(I think both chart just dragging in different directions in my case, but because they are linked – everything just shakes)


Collections.addAll(mSciChartMainSurface.getChartModifiers(), sciChartBuilder.newModifierGroup()

Collections.addAll(mSciChartBotIndicatorSurface.getChartModifiers(), sciChartBuilder.newModifierGroup()
1 vote

Hello everyone.

I have chart with adding data every second.

What i want to do:
– by dragging finger left, right – chart scrolls left and right (can go to past data, etc)
– by two fingers zoom gesture – it zooms (only horizontally with autorange by Y axis)
– i set a visible range limit to the right in this way: user can scroll to the right xMax to be in the middle (currently this part not working – and axis zooming, when i continue scrolling to the right)

I tried a lot of different modifiers, but none of them was ok.

My setup:

lineDataSeries.addObserver(new IDataSeriesObserver() {
            public void onDataSeriesChanged(IDataSeries<?, ?> iDataSeries, int i) {

                long addTime = 30_000 * currentTimeframe;

                runOnUiThread(() -> {
                    DateRange dateRange = new DateRange();

                    dateRange.setMinMax(new Date(0), new Date(lineDataSeries.getXRange().getMax().getTime() + addTime));


final DateAxis dateAxis = sciChartBuilder.newDateAxis()
    dateAxis.setMinimalZoomConstrain(25_000L * currentTimeframe); // 25 - 300 points
    dateAxis.setMaximumZoomConstrain(300_000L * currentTimeframe);

final NumericAxis yAxis = sciChartBuilder.newNumericAxis()
            .withGrowBy(new DoubleRange(0.1d, 0.1d))

ModifierGroup additionalModifiers = sciChartBuilder.newModifierGroup()
0 votes

Hi, guys

My X axis is SCICategoryDateTimeAxis type.

And i have a huge amount of data to display. So i need to display it by scrolling of the chart surface.
So what is the best practice to update data series on the fly and display it at the chart surface?

Best regards,
Sushynski Andrei

1 vote

I evaluating Scichart for our application and have been testing the Realtime FIFO example.

I have made the following modifications to the example
– Increased number of samples added per timer tick
– Replaced a sin wave with a recording of FPS
– Swapped to DX10 render surface
– Changed Plot Theme
– Added Plot Modifiers for manipulation

When FIFO is enabled and more than 5052 points are added unusual behavior occurs, the line seems to slide backwards and faster than the plot does and there are lines connecting the start and end of the plot.

I have recorded a video that compares running with FIFO enabled vs FIFO disabled.

I forgot to add that I can get a similar but slightly different glitch by taking the example straight from the example browser and increasing the FIFO length to 10000, see attached image.

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

I have uploaded little test project with data and small video (1.8 Mb) showing the problem here

1) Bug report.
In new versions (3.23) MouseWheelZoomModifier won’t zoom out if first bar of DataSeries is already visible (no more data on the left of the chart). But in old versions (2.11) it works. Please see my video. I can’t tell in exactly what version this behavior has been changed. I remember I reported this bug 1 or 1.5 years ago, and it was fixed. But now I notice this again.
Please fix or describe how can I fix it for my charts (3.23).

2) Question.
Please see second half of the video (after 0:17).
On top there is SciChartSurface, on bottom there is SciStockChart.
ZoomPanModifier (scrolling the chart with pressed left mouse button) works differently: SciStockChart scrolls good, but SciChartSurface does zooming in instead of simple scrolling.
My question is how to set up SciChartSurface to make her ZoomPanModifier act as on SciStockChart. I used to work with SciChartSurface and don’t want to move to SciStockChart because I like to have more settings.

  • RTrade A asked 9 years ago
  • last active 9 years ago
0 votes

How to move chart scroll by arrow key? For example, When I pressed the Right Arrow Key, the bars in the chart will move Right one Bar position, vice versa. Thanks.

  • fxchenlin asked 11 years ago
  • last active 10 years ago
Showing 11 results