Real-time User Feedback with the Rollover Modifier

Adding the RolloverModifier to the Chart

In order to create an interactive WPF Chart it is useful to see what the values of points are as you hover the mouse. One specific chart modifier can be used to provide User Feedback. This is the RolloverModifier. Add it to a Chart surface with two series using the following code:

The RolloverMarker must be styled with a control template and applied to the RenderableSeries. The Controltemplate is used to create the UI for a FrameworkElement which is overlaid on the series as the mouse moves. In the Xaml snippets below we create two circles to overlay on the series:

<!-- Define a control template for the first series rollover marker -->
<!-- Interally, this will be used to template a blank control which will be overlaid on -->
<!-- the ChartModifierSurface (canvas) which exists over the SciChartSurface -->
<ControlTemplate x:Key="FirstSeriesRolloverTemplate">
<Ellipse Fill="#77FFFFFF" Stroke="#FF708090" Width="11" Height="11" StrokeThickness="2"/>
</ControlTemplate>
<!-- Define a control template for the second series rollover marker -->
<ControlTemplate x:Key="SecondSeriesRolloverTemplate">
<Ellipse Fill="#77FFFFFF" Stroke="#FFBC8F8F" Width="11" Height="11" StrokeThickness="2"/>
</ControlTemplate>

This results in the following behaviour:

Each mouse move event is translated into a hit-test on the series. The hit-test data is stored on the modifier itself in the RolloverData property as an ObservableCollection<SeriesInfo>, which you can bind to.

RolloverModifier and ChartDataObject

The relationship between RolloverModifier and its ChartDataObject is as follows:

Databinding to the RolloverModifier to Provide Live Values

To output the chart values to the screen as the user moves the mouse, we need to databind an ItemsControl to the RolloverModifier.RolloverData property.

<!-- Define an area in the top left of the chart which binds to the
<!-- RolloverModifier.RolloverData.SeriesInfo collection -->
<!-- Each SeriesInfo contains information such as SeriesName, Color and Value at the mouse point -->
<!-- This collection updates dynamically as the mouse is moved. We bind to it using an -->
<!-- ItemsControl so if more series are added then the feedback also updates -->
<ItemsControl Grid.IsSharedSizeScope="True" Margin="23,23" Padding="5"
BorderBrush="#55000000"
BorderThickness="2"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Background="#77FFFFFF"
DataContext="{Binding ElementName=sciChartSurface, Path=ChartModifier}"
ItemsSource="{Binding RolloverData.SeriesInfo}">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="SciChart:SeriesInfo">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="ColumnA"/>
<ColumnDefinition SharedSizeGroup="ColumnB"/>
</Grid.ColumnDefinitions>
<!-- Bind to the SeriesName using the SeriesColor as text foreground -->
<TextBlock Grid.Column="0" Text="{Binding SeriesName}" Margin="3,3,20,3"
FontSize="13" FontWeight="Bold"
Foreground="{Binding SeriesColor, Converter={StaticResource
ColorToBrushConverter}}" />
<!-- Bind to the Series Value, using the SeriesColor as text foreground -->
<TextBlock Grid.Column="1" Text="{Binding Value, StringFormat={}{0:0.000}}"
Margin="3,3,3,3" FontSize="13" FontWeight="Bold"
Foreground="{Binding SeriesColor, Converter={StaticResource
ColorToBrushConverter}}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Breaking this down, this Xaml is setting the DataContext of an ItemsControl to the current SciChartSurface.ChartModifier, i.e. the RolloverModifier instance.

The ItemsSource is bound to the RolloverModifier.RolloverData.SeriesInfo collection.

The ItemTemplate is a DataTemplate which contains two TextBlocks. These are bound to the SeriesName and Value property of the SeriesInfo instance respectively. Finally the foreground of each TextBlock is bound to the SeriesColor, using a ValueConverter to convert a Color to SolidColorBrush.

Running the application, we now get the following output. Congratulations! You’ve just created a WPF Chart with live feedback on mouse move!

Using the RolloverModifier we can provide active legends which display chart series values under the mouse