Scrolling a Chart with the SciChartOverview
Posted by Andrew BT on 13 February 2019 12:28 PM

For a documentation article about the SciChartOverview control please see this link. Also you may be interested in the documentation about ScrollBars API.

What is the SciChartOverview?

The SciChartOverview is a specialized form of SciChartScrollBar, which allows scrolling on the XAxis only, displaying a chart with all your data behind it. 

How to use the SciChartOverview

The SciChartOverview is demonstrated in our Scroll Chart using Overview example in the examples suite. 

In order to declare an overview, you need to declare a SciChartOverview control and bind to the ParentSurface, the ParentSurface.XAxis.VisibleRange and a DataSeries (denoting which data-series to display on the chart)

            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="32" />
        <!-- The SciChartInteractionToolbar adds zoom, pan, zoom extents and rotate functionality -->
        <!-- to the chart and is included for example purposes. -->
        <!-- If you wish to know how to zoom and pan a chart then do a search for Zoom Pan in the Examples suite! -->
        <ext:SciChartInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=sciChart}}" Grid.RowSpan="2"/>
        <!-- Declare the SciChartSurface -->
        <s:SciChartSurface x:Name="sciChart"
                <s:FastMountainRenderableSeries x:Name="mountainSeries"
                <s:FastLineRenderableSeries x:Name="lineSeries"
                <s:NumericAxis GrowBy="0.1, 0.1" />
                <s:NumericAxis AxisAlignment="Right" GrowBy="0.1, 0.1" />
        <!-- Declare the SciChartOverview and bind to the main chart -->
        <s:SciChartOverview Grid.Row="1" Grid.Column="1"
                                   DataSeries="{Binding Source={x:Reference Name=sciChart}, Path=RenderableSeries[1].DataSeries}"
                                   ParentSurface="{Binding Source={x:Reference Name=sciChart}}"
                                   SelectedRange="{Binding Source={x:Reference Name=sciChart}, Path=XAxis.VisibleRange, Mode=TwoWay}"/>

Selecting Which DataSeries to display

The SciChartOverview only supports one data-series. It displays all of the data in the data-series, giving you an 'overview' of the data in your chart. You can select the data-series it displays via the SciChartOverview.DataSeries property. 

Getting a Notification of Selected Range Changed

We advise subscribing to AxisBase.VisibleRangeChanged on the ParentSurface.XAxis itself, as this will be fired whenever the range changes.

Alternatively, you can create your own custom Overview using the SciChart ScrollBar API in v3.2, and subscribe to the SelectedRangeChanged event.

Styling the SciChartOverview

The SciChartOverview control uses the Scrollbar API at its core. You can style the scrollbar element directly by changing the SciChartOverview.ScrollbarStyle property:

<!--  SciChartOverviewControl Style hosted in resource dictionary  -->
	<Style x:Key="OverviewScrollbarStyle" TargetType="visuals:SciChartScrollbar">
		<Setter Property="Orientation" Value="Horizontal" />
		<Setter Property="GripsLength" Value="25" />
		<Setter Property="ViewportStyle">
				<Style TargetType="Control">
					<Setter Property="Opacity" Value="0" />
		<Setter Property="NonSelectedAreaStyle">
				<Style TargetType="Path">
					<Setter Property="Fill" Value="{z:ThemeBinding Path=OverviewFillBrush}" />

<s:SciChartOverview ScrollbarStyle="{StaticResource OverviewScrollbarStyle}"/>

You can also set the following properties, which allow changing the some basic brushes in the SciChartOverview:

Templating the SciChartOverview

For SciChart v3.2+, the Control Template for the SciChartOverview is defined as follows. 

<ControlTemplate TargetType="visuals:SciChartOverview">
	<Grid Name="PART_Container">
		<visuals:SciChartSurface x:Name="PART_BackgroundSurface"
								 Background="{TemplateBinding Background}"
								 FontSize="{TemplateBinding FontSize}"
								 FontWeight="{TemplateBinding FontWeight}"
								 Foreground="{TemplateBinding Foreground}"
								 Padding="{TemplateBinding Padding}">

				<r:FastMountainRenderableSeries Fill="{TemplateBinding AreaBrush}"
												DataSeries="{TemplateBinding DataSeries}"
												Stroke="{TemplateBinding SeriesColor}" />

				<axes:NumericAxis AutoRange="Always"
						<s:DoubleRange Max="0.1" Min="0.0" />


		<visuals:SciChartScrollbar x:Name="PART_Scrollbar"
								   Axis="{TemplateBinding Axis}"
								   Style="{TemplateBinding ScrollbarStyle}" />

For older versions of SciChart, we have this FAQ on styling the SciChartOverview by changing its control template.

Frequently Asked Questions

Please see our site-search for SciChartOverview Frequently Asked Questions. Some of the key FAQs are highlighted below.

A documentation article about SciChartOverview can be found at this link.

Q: Can I get a SciChartOverview on the YAxis?

Kind of! You can use our SciChartScrollBar API to host scrollbars on both X and Y Axes

Q: Can I customize the SciChartOverview Axis,
      .. or display more than one series,
      .. or display an image behind the SciChartOverview? 

Yes, by changing the ControlTemplate of the SciChartOverview (see above), or, alternatively by creating a custom control which uses our new ScrollBar API (part of SciChart v3.2)

Q: I want to add a SciChartOverview to an ItemsControl, or to the SciChartGroup control. How do I do this?

Please see this KB article How to add a SciChartOverview to an ItemsControl or SciChartGroup Control



(1 vote(s))
Not helpful

Comments (1)
31 March 2015 08:06 PM
I used two rectangles. The first one as you did; the whole grdnieat painted out. The second, a mask box as you had. But I showed more of the color grdnieat by applying a RenderTransform with the ScaleX property bound to whatever value controls it.I also had to set flow direction for the mask box from RightToLeft so it would shrink in the correct way to allow more grdnieat from the bottom verses from the top.


Not sure where to start? Contact us, we are happy to help!


SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725