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)

    <Grid>
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
 
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="32" />
        </Grid.RowDefinitions>
 
        <!-- 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"
                                  Grid.Column="1">
 
            <s:SciChartSurface.RenderableSeries>
 
                <s:FastMountainRenderableSeries x:Name="mountainSeries"
                                                Fill="#771964FF"
                                                Stroke="#FF0944CF"/>
 
                <s:FastLineRenderableSeries x:Name="lineSeries"
                                            Stroke="#FF279B27"
                                            StrokeThickness="2"/>
 
            </s:SciChartSurface.RenderableSeries>
 
            <s:SciChartSurface.XAxis>
                <s:NumericAxis GrowBy="0.1, 0.1" />
            </s:SciChartSurface.XAxis>
 
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisAlignment="Right" GrowBy="0.1, 0.1" />
            </s:SciChartSurface.YAxis>
 
        </s:SciChartSurface>
 
        <!-- 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}"/>
 
    </Grid>

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  -->
<UserControl.Resources>
	<Style x:Key="OverviewScrollbarStyle" TargetType="visuals:SciChartScrollbar">
		<Setter Property="Orientation" Value="Horizontal" />
		<Setter Property="GripsLength" Value="25" />
		<Setter Property="ViewportStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Opacity" Value="0" />
				</Style>
			</Setter.Value>
		</Setter>
		<Setter Property="NonSelectedAreaStyle">
			<Setter.Value>
				<Style TargetType="Path">
					<Setter Property="Fill" Value="{z:ThemeBinding Path=OverviewFillBrush}" />
				</Style>
			</Setter.Value>
		</Setter>
	</Style>
</UserControl.Resources>

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

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

• Background, Foreground
• Fill  (for Mountain series), Stroke  (for bound renderable series)
• Padding

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}"
								 BorderThickness="0"
								 FontSize="{TemplateBinding FontSize}"
								 FontWeight="{TemplateBinding FontWeight}"
								 Foreground="{TemplateBinding Foreground}"
								 Padding="{TemplateBinding Padding}">

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

			<visuals:SciChartSurface.YAxis>
				<axes:NumericAxis AutoRange="Always"
								  DrawMajorGridLines="False"
								  DrawMinorGridLines="False"
								  TextFormatting="###E+0"
								  Visibility="Collapsed">
					<axes:NumericAxis.GrowBy>
						<s:DoubleRange Max="0.1" Min="0.0" />
					</axes:NumericAxis.GrowBy>
				</axes:NumericAxis>
			</visuals:SciChartSurface.YAxis>

		</visuals:SciChartSurface>

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

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