Knowledgebase
Creating a Custom SciChartOverview with many series using the ScrollBar API
Posted by Andrew BT on 07 February 2019 04:33 PM

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:

Custom SciChartOverview with many series

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:

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

 

 

 

(0 vote(s))
Helpful
Not helpful

Comments (0)

CONTACT US

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


CONTACT US

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