A frequently asked question is How do I add more than one series behind a SciChartOverview Control?

We present a way you can do this below, using the SciChart ScrollBar API, introduced in SciChart v3.2.

The Custom SciChart Overview Example

The Custom SciChartOverview example can be found in the SciChart Examples Suite -> Custom Overview:

How do we do this?

We actually declare a WPF Grid, and have a SciChartSurface, then a SciChartScrollbar directly over it. So we haven't customized the overview at all, just displayed a SciChartSurface with many series behind a styled SciChartScrollbar. 

<!-- Style in your resource dictionary -->
<UserControl.Resources>
	<Style TargetType="s:SciChartScrollbar">
		<Setter Property="GripsThickness" Value="9" />
		<Setter Property="GripsLength" Value="30"/>
		<Setter Property="ViewportStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Background" Value="#33000000"/>
					<Setter Property="BorderBrush" Value="#99000000"/>
				</Style>
			</Setter.Value>
		</Setter>
		<Setter Property="GripsStyle">
			<Setter.Value>
				<Style TargetType="Control">
					<Setter Property="Background" Value="#535353"/>
					<Setter Property="BorderThickness" Value="2"/>
				</Style>
			</Setter.Value>
		</Setter>
	</Style>

	<common:DoubleToGridLengthConverter x:Key="DoubleToGridLengthConverter" />
</UserControl.Resources>

<!--  This grid is used to space Overview Control so its width matches parent chart XAxis  -->
<Grid Grid.Row="1">
	<!--  The grid is used to set paddings around the Overview, so that the size of the Overview matches the size of the XAxis on the parent chart  -->
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
		<!--  Hosts overview control  -->
		<ColumnDefinition Width="{Binding ActualWidthValue, ElementName=proxy, Mode=OneWay, Converter={StaticResource DoubleToGridLengthConverter}}" />
		<!--  Used to bind to parent surface YAxis  -->
	</Grid.ColumnDefinitions>

	<!-- This class is in the Examples Source Code, under your install directory -->
	<helpers:ActualSizePropertyProxy x:Name="proxy" Element="{Binding ElementName=MainChartSurface, Path=YAxis}" />

	<!--  Define the SciChartSurface behind the scrollbar -->
	<s:SciChartSurface x:Name="OverviewSurface"
					   Grid.Column="0"
					   Loaded="OnOverviewSurfaceLoaded"
					   SeriesSource="{Binding ChartSeries}">

		<s:SciChartSurface.XAxis>
			<s:NumericAxis DrawMajorGridLines="False"
						   DrawMinorGridLines="False"
						   Visibility="Collapsed" />
		</s:SciChartSurface.XAxis>

		<s:SciChartSurface.YAxis>

			<s:NumericAxis DrawMajorGridLines="False"
						   DrawMinorGridLines="False"
						   Visibility="Collapsed" />
		</s:SciChartSurface.YAxis>

	</s:SciChartSurface>

	<!-- Define a SciChartScrollbar -->
	<s:SciChartScrollbar Grid.Column="0" Margin="{Binding ElementName=MainChartSurface,
										 Path=Padding,
										 Mode=OneWay}" 
										 Axis="{Binding ElementName=XAxis}" />

</Grid>

It's as simple as that! Using this technique you could display literally anything behind a scrollbar. You could display an image, or bind to series provided by an external source etc... 

Further Reading

For more details about the SciChartOverview control, ScrollBars API and how to customize it please refer to the following documentation articles:

• SciChartOverview - full documentation article about SciChartOverview, including styling and customization
• ScrollBars API
• Programmatically Zoom, Scroll and Pan an Axis

Related examples from the SciChart Examples Suite can be found at the links below:

• Custom Overview Control
• Scroll Chart using Overview Control
• Chart Per-Axis Scrollbars