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

Welcome to the SciChart Community Forums!

Please note, for the month of May we are trialling a switch to for ad-hoc support of our chart controls. Please create an account and ask questions with the Tag=SciChart on Stackoverflow.

We welcome your feedback on this move as well, contact us to voice your opinion!

0 votes


I’m working on the iOS and android version. I’m trying to implemented an animated visible range change on Y axis when zooming/panning X axis.

On iOS, I just have to do:
yAxis.autoRange = .always
yAxis.animateVisibleRangeChanges = true
yAxis.animatedChangeDuration = 0.5

But I can’t find a way to do that on Android, is it hidden somewhere else?

Kind Regards,

0 votes

Hi there,
I’m trying to catch a VisibleRangeChanged Event of a DateTimeAxisViewModel, but it is never called.
Strangely, it work’s with a numeric axis viewModel?!
I’m refering to the AxisBinding and Annotation Binding Example in the Examples Suite.
I added a MouseWheelZoomModifier to be able to change the VisibleRange


In the InitializeAxes method in SciChartMvvmBindingsViewModel two lines were added to catch the VisibleRangeChanged Event:

            var xNumAxis = new NumericAxisViewModel
                AxisAlignment = AxisAlignment.Bottom,
                AxisTitle = "XAxis",
                DrawMajorBands = false,
                TextFormatting = "0.00#",
                VisibleRange = new DoubleRange(0, 10),
                BorderThickness = new Thickness(3),
                BorderBrush = new SolidColorBrush(Colors.CadetBlue)
            xNumAxis.VisibleRangeChanged += xNumAxis_VisibleRangeChanged; //catch num axis event

            var xDateTimeAxis = new DateTimeAxisViewModel
                AxisAlignment = AxisAlignment.Top,
                Id = "DateTimeAxis",
                VisibleRange = new DateRange(new DateTime(2017, 1, 1), new DateTime(2017, 1, 31)),
                StyleKey = "DateTimeAxisStyle"
            xDateTimeAxis.VisibleRangeChanged += xDateTime_VisibleRangeChanged; //catch date time axis event


Now, when I change the zoom level I jump into the xNumAxis_VisibleRangeChanged-method, but never in the xDateTime_VisibleRangeChanged-method.

  • Tim asked 2 months ago
  • last active 2 months ago
0 votes

I’m looking to either extend the RubberBandXyZoomModifier to provide this size growing behavior when the mouse has left the chart area (shown in the attached image) or build one from scratch (having to rebuild the normal box-zoom components (the box etc).

I assume from reading around the the latter option will be the only option.


0 votes

Hi, guys

Is it possible to set min and max zoom constraints for renderable serie with one element ?
Default value (default_zoom.PNG) is too big.

Can you look at this?

Best regards,
Sushynski Andrei

0 votes

I was wondering about the possibilities to show markers. I dug a while in the examples and played with default interactions, which use dragging to update the position of the marker.

On mobile devices this conflicts a little with the pan interaction to move the chart. I saw there’s also the possibility to pan using the axes area. There’s also the possibility to just tap on the chart, which doesn’t conflict with other interactions, to show a marker, but I couldn’t find how to do this. At least there doesn’t seem to be built in support for it? How should this be done?

Additionally I would like once a marker appears to either be able to update only by tapping again at other place on the chart (simple solution) or temporarily disabling the panning such that this gesture only moves the marker and not the chart (preferred, but probably less simple solution). So tapping on the chart would enter “marker mode” which disables zooming and panning and some other gesture – e.g. using an external button on the chart, would leave “marker mode” and enter zoom/pan mode again.

Any ideas how to achieve this? Thanks in advance!

P.S. I’m also using a real time chart, though this probably doesn’t make a difference concerning this.

1 vote

I am trying to implement pan and zoom functionalities for real time charts present in Sci chart demo application
Can any one please suggest me on how to implement the same

Thanks in advance

0 votes

I am trying to call the ZoomBy() method of SciChart control from ViewModel. The ZoomBy() is easily available in the xaml.cs file like below:

// TODO: Need to implement zoom using MVVM
    private void BtnZoomIn_Click(object sender, RoutedEventArgs e)
        TemperatureGraph.ChartModifier.XAxis.ZoomBy(-0.1, -0.1);

The same functionality I need to implement using the ViewModel pattern.

However the ZoomExtents method is easily being called using ViewportManager of SciChart control. E.g. below: XAML file

<RocheButton Name="BtnZoomOut" DockPanel.Dock="Top" Icon="{IconResource Icon=ZoomOut}" HorizontalAlignment="Right" Command="{Binding ZoomOutCommand}" />    
<s:SciChartSurface x:Name="TemperatureGraph" Grid.Column="0" s:ThemeManager.Theme="BrightSpark"  
                           RenderableSeries="{s:SeriesBinding TemperatureGraphViewModel}" DockPanel.Dock="Bottom"
                           ViewportManager="{Binding ViewportManager}">

And the ViewModel Code:

public class TemperatureSummaryGraphViewModel : ViewModelBase
        #region Private Members

        private IXyDataSeries<TimeSpan, double> TemperatureDataSeries = new XyDataSeries<TimeSpan, double>();
        private IXyDataSeries<TimeSpan, double> AcquisitionPointDataSeries = new XyDataSeries<TimeSpan, double>();
        private DefaultViewportManager _viewportManager = new DefaultViewportManager();
        private ICommand _zoomOutCommand;


        #region Constructor

        public TemperatureSummaryGraphViewModel()
            ZoomOutCommand = new DelegateCommand(() => ZoomOutTemperatureGrpah());

            TemperatureGraphViewModel.Add(new LineRenderableSeriesViewModel()
                DataSeries = TemperatureDataSeries,
                StyleKey = "LineSeriesStyle0"

            TemperatureGraphViewModel.Add(new XyScatterRenderableSeriesViewModel()
                DataSeries = AcquisitionPointDataSeries,
                StyleKey = "ScatterSeriesStyle0"


        #region Public Properties

        public ObservableCollection<IRenderableSeriesViewModel> TemperatureGraphViewModel { get; } = new ObservableCollection<IRenderableSeriesViewModel>();

        public IViewportManager ViewportManager
                return _viewportManager;

                if (ReferenceEquals(value, _viewportManager))

                _viewportManager = (DefaultViewportManager)value;

        public ICommand ZoomOutCommand
                return _zoomOutCommand;

                if (ReferenceEquals(value, _zoomOutCommand))

                _zoomOutCommand = value;


        #region Public Methods

        /// <summary>
        /// To generate dummy data
        /// // TODO: Need to integrate it with RunEditor with the actual data
        /// </summary>
        public void GenerateDummySeries()
            double y = 80.5, yVar = 30.0;

            TemperatureDataSeries.Append(TimeSpan.FromMinutes(1), 40.0);
            TemperatureDataSeries.Append(TimeSpan.FromMinutes(2), 80.5);
            for (int x = 2; x < 50; x++)
                TemperatureDataSeries.Append(TimeSpan.FromMinutes(x), y);

                yVar *= -1;
                y += yVar;

            for (var i = 5.4; i < 50; i += 2)
                AcquisitionPointDataSeries.Append(TimeSpan.FromMinutes(i), 60.0);

        public void ZoomOutTemperatureGrpah()


This code is working fine and zooming out the scichart control to 100%.

I want to implement the same using the ZoomBy().

Please help!

0 votes


There are some methods exposed in the API, ZoomBy and ZoomExtent which can programmatically be called from the code behind.
I am binding the series using IRenderableSeriesViewModel in MVVM pattern. Can we zoom the sciChart surface on a button click in ModelView?

Appreciating your help on this.


0 votes

How to scale axes with different scale factor using pinch zoom?
For example, scale x axis only or scale x axis greater then y axis.

0 votes

I have DateAxis as X Axis, so I want to trigger a button to zoom In/Out to a specific time at the latest plotted point (Price).
Example: I have zoom button 30 minutes, 15 minutes, 5 minutes and 2 minutes….

0 votes

I’m trying to properly display a circle series as a circle. I’ve made sure the graph is not resizable, and set the GridLinesPanelStyle to ensure that it’s square. However, when do ZoomExtents on the ViewPortManager, it always adds a little buffer space on the Y axis but not the X so you end up with an ellipse. Is there any way to set and/or remove this buffer? You can see this in the image, the graph itself is square and the range on the X axis is 300, but on Y it’s a little bit bigger so what you see isn’t really a circle. Thank you.

  • AE Admin asked 1 year ago
  • last active 1 year ago
0 votes

I followed this post—custom-legend-with-color-picker-and-custom-point-markers for creating a custom Chart Legend and it worked great. One feature of it that I really liked was the checkbox behavior: CheckedChangeZoomExtentsBehaviour.EnableZoomExtentsOnChecked=”True” which zooms the chart to extents everytime you show or hide a series.

This checkbox behavior breaks when I move the Legend outside of the chart, which I accomplished by following this post:

How can I keep this checkbox behavior when moving the Legend outside of the Chart area?

Note: if I set ShowLegend=”True” in my s:LegendModifie> tag, the behavior properly works with the legend outside the Chart area, but now I have duplicate legends both inside and outside my chart area with this setting set.

<DataTemplate x:Key="LegendItemTemplate" DataType="s:SeriesInfo">
            <!-- DataContext is of type SeriesInfo -->
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />

                <!-- Visibility checkbox, bound to SeriesInfo.RenderableSeries.IsVisible -->
                <CheckBox Margin="5,0,0,0"
                    Foreground="{StaticResource LegendTextBrush}"
                    IsChecked="{Binding RenderableSeries.IsVisible, Mode=TwoWay}"
                    Visibility="{Binding LegendData.ShowVisibilityCheckboxes, RelativeSource={RelativeSource AncestorType=s:SciChartLegend}, Converter={StaticResource BooleanToVisibilityConverter}}" />

                <s:PointMarker Grid.Column="1" Margin="5,0,0,0" Width="40" Height="10" VerticalAlignment="Center" HorizontalAlignment="Center"
                    DataContext="{Binding RenderableSeries}"
                    DeferredContent="{Binding LegendMarkerTemplate}"
                    Visibility="{Binding ShowSeriesMarkers, RelativeSource={RelativeSource AncestorType=s:SciChartLegend}, Converter={StaticResource BooleanToVisibilityConverter}}" />

                <!-- Series Name, bound to SeriesInfo.SeriesName -->
                <TextBlock Margin="5,0,5,0"
            Foreground="{StaticResource LegendTextBrush}"
            Text="{Binding SeriesName}" />

    <s:LegendModifier x:Name="ChartLegend" ShowLegend="True" GetLegendDataFor="AllSeries" LegendItemTemplate="{StaticResource LegendItemTemplate}" ShowVisibilityCheckboxes="True"   />

<s:SciChartLegend x:Name="legendControl" DockPanel.Dock="Top"
                                       Orientation="Horizontal" Margin="10"

                                       LegendData="{Binding LegendData, ElementName=ChartLegend, Mode=OneWay}"
                                       ShowVisibilityCheckboxes="True" />           
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 2 years ago
  • last active 2 years ago
1 vote


Am trying to limit the depth in which the user can zoom into and out of the graph. I came across the property minimalZoomConstrain in the header file and also the documentation and had attempted to use it.

The axis in question is a DateTimeAxis and I would want to limit the zoom in depth to 30 seconds and the zoom out the about 3 months. I understand that the type it takes is the GenericType, where I will have to use the SCIGeneric(x) to assign the value, but what value x am I required to use in this case?

I’ve tried the values ’30′(assuming it takes NSTimeInterval) and even attempted to pass in a NSDate value but nothing seems to work.

Thank you.

  • Elle Yeoh asked 2 years ago
  • last active 2 years ago
1 vote

How do I implement mouse wheel zooming so that the point under the mouse pointer (before zoom), will also be under the mouse pointer after the zoom?
The chart is a 2D chart with DateTime X axis and multiple value Y axes.

0 votes

I manually re-calculate my displayed axis ranges when new data points are appended or when a specific portion of the data is selected to view from a ListBox, but I would like to leave the axis ranges as-is if the user has zoomed-in (using the built-in ZoomModifiers). Is there a way for my ViewModel to know this has happened so I can avoid recalculating in that case?


0 votes

I have the following xaml code for HorizontalLineAnnotations. I have a viewmodel with simple properties for WasteMaxValue etc.
I don’t get any binding errors. Sometimes everything works as expected when I start up. Sometimes the lines show up but they wont follow when I resize the view (and the graph). Sometimes the lines don’t show up at all.
If I do a very fast “pan” with the mouse so that the graph data moves outside the graph, the lines show up and they follow when I resize the view and the graph. Have you experienced this before? Is it an obvious error?

                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WasteMaxValue}" Stroke="Red" StrokeThickness="2">
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WasteMinValue}" Stroke="Red" StrokeThickness="2">
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WarningMaxValue}" Stroke="Yellow" StrokeThickness="2">
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding WarningMinValue}" Stroke="Yellow" StrokeThickness="2">
                <s:HorizontalLineAnnotation HorizontalAlignment="Stretch" 
                    Y1="{Binding SetValue}" Stroke="Green" StrokeThickness="2">
0 votes

I want to display auto format date on xAxis (DateAxis) while zooming but I cannot find SubDayTextFormatting function.Is there any way to display minutes and seconds after init months ?there is no DateTime Axis on Android like on iOS ..Should I change to CategoryDate Axis?

Thanks in advance

0 votes


I have a problem with the zoom on stock chart.
If i have 2,3,4… windows opened with stock chart on each, and if I zoom on one an window, the zoom works on all window.
But I want to zoom only on selected chart.

How can I fix it please?

  • Neimad asked 2 years ago
  • last active 2 years ago
0 votes


Thank you for creating great chart library.
I’m now using a trial version for test that is enable to use at project that I’m concerned.

I have one problem that when I set zoom function to chart, and zoomed too much, axis label disappears.
(I used mouse scroll zoom, I attached zoom before image and after image)

How can I control this problem?
Is there any properties or setting for this?

0 votes

Have a good day!

I’m using SciChart v3.5.0.7128 (1st Oct 2015). When I’m trying to zoom in scichart surface with fastbandrenderableseries, glitches appear. In the version (v3.4.1.6431) there are no such bugs. How soon will it be fixed?

I’ve attached gif and project with the bug.

gif (if attached is not rendered)

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

I have an unfinished project using the trial version on Visblox. I did not buy the licence since the performance was not good enough. Now Visiblox stopped support and so I am migrating to SciCharts. I have some questions though hope you can help.

  1. The chart is DateTime,Double type, and there are multiply datapoints on some dates. When editing I need to delete particular points but the Remove method seems to remove all Y values for specific X value. So is it possible to remove a particular X,Y datapoint only from the chart?

  2. I need to give each datapoint a name and I was using TextAnnotations on Visiblox (which had a datapoint property). However on SCIcharts the TextAnnotations does not have Datapoint property. How can I do this please?

  3. I have 2 charts showing audio waveforms. One showing the full time and one showing a zoomed section. When I hit Play I need the zoomed chart to follow the music waveform. With Visiblox I was using a dispatcher timer and on every tick(20ms) I update the Xaxis range, however the performance was not very good.
    What best method to use for SCI charts please?

0 votes


I am currently using a rollover modifier to display tooltip values on the trend. Whenever a data point is clicked however, the trend stretches so this point is along the right hand axis, and it pans so this point is along the x-axis. Is there a way to disable this feature?

Here are my modifier declarations:

                <SciChart:RubberBandXyZoomModifier  IsXAxisOnly="False"/>
                <SciChart:CursorModifier ShowAxisLabels="False"/>
                <SciChart:RolloverModifier ReceiveHandledEvents="False" ShowTooltipOn="Always" ShowAxisLabels="True" UseInterpolation="True" SnapsToDevicePixels="False" TooltipLabelTemplate="{StaticResource RolloverLabelTemplate}"/>


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 3 years ago
  • last active 3 years ago
0 votes

Good day, everybody!
I’ve got a problem. I’m working with inherited class from LineAnnotation- MarkerLineAnnotation. I’ve added some fields to the class. When I set X1=0 and X2=100000, displayed the element on SciChartSurface, I tried to zoom in. But after a few zooms my MarkerLineAnnotations had disappeared.
After that situation I set X1=0 and X2=10000 and tried to zoom in. I could zoom in my custom annotations for a long time, but they had disappeared too.

How can I solve this problem?
I’ve attached screenshots describing this problem. (Image 1-normal size for line with X1=0 and X2=10000 , Image 2-zoom, when disappearing took place for line with X1=0 and X2=10000; Image 3-normal size for line with X1=0 and X2=100000 , Image 4-zoom, when disappearing took place for line with X1=0 and X2=10000)
Thanks in advance.

  • Egor asked 4 years ago
  • last active 4 years ago
4 votes

How do I implement zooming in real time charts. The examples are all static data, and the zooming works, and a couple of links I found, do not explain it very well.

How can I accomplish zooming on a real time SciChart?

  • darlon asked 4 years ago
  • last active 6 months ago
Showing 26 results
This template supports the sidebar's widgets. Add one or use Full Width layout.