Pre loader

SciChartOverView does not respect XVisibleRange


Hi! I have an overview control, which uses 2-way binding for the x-axis visible range. I actually followed the WPF Realtime Ticking Stock Charts example, the only difference is that I have a line chart with DateRange x-axis. Everything works, except that the overview’s x-axis maximum visible range is not the same as the actual chart’s visible range. Normally the chart is rolling and the maximum x visible range is always ahead of the latest data, just as it’s in the stock chart example. However, the overview’s x visible range always matches the latest x-axis value of the data. So when the overview’s grip is used to scale the x-axis to go back in time, the chart’s x-axis maximum visible range always jumps to match the latest x-axis value of the data and the chart stops rolling. I just don’t get what am I doing wrong or am I missing something? Please see the attached screenshot and the source code. I’m evaluating SciChart to see if it fits our needs before we’d make a purchase and this is something that should work.

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 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=Chart, 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}"/>

View model:

private DateRange _xVisibleRange;
public DateRange XVisibleRange
        get => _xVisibleRange;
        set => SetProperty(ref _xVisibleRange, value);

// after appending new data
var LatestXValue = DataSeries.XValues.Last();
var MaxXVisRange = XVisibleRange.Max;

if (MaxXVisRange > LatestXValue)
        var existingRange = _xVisibleRange;
        var newRange = new DateRange(existingRange.Min.AddSeconds(rollBySeconds), existingRange.Max.AddSeconds(rollBySeconds));
        XVisibleRange = newRange; 
        // the overview doesn't have this range, despite of two-way binding
        // it has the latest x-axis value as max visible range
  • You must to post comments

Hi Istvan

The VisibleRange and DataRange of an axis is defined as this here:

enter image description here

So from your screenshot, the VisibleRange of the overview seems to be the same as the VisibleRange of the main chart, however the overview is a bit wider than the main chart due to the main chart axis. Is that correct?

There’s a workaround for this, we describe it here:

Please let me know if this helps,

Best regards,

  • You must to post comments

Hi, Andrew.

I think you misunderstood Istvan (or may be did I 🙂 ). It’s not about controls width. I’m facing the same problem. My XAxis (DateTimeAxis) visible range limit is set by user. User can select visible range limit which exceeds data range. As you can see on screenshot all data presents in small peace in right part of chart surface. But overview range limit is strictly binded to the data range, not to the parent surface visible range limit. Is there any solution make overview control range be binded to parent surface XAxis visible range limit?

P.S. sorry for posting as answer, I didn’t find way to add image to comment.

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies