SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

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

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 7 years ago
  • last active 6 years ago
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

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 4 years ago
  • last active 4 years ago
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

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

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 5 years ago
  • last active 5 years ago
Showing 9 results
This template supports the sidebar's widgets. Add one or use Full Width layout.