Tooltips may be added to the SciChartSurface using the VerticalSliceModifier. This is a ChartModifier attached to the SciChartSurface.ChartModifier property. You can see a list of available ChartModifiers in the article What is the ChartModifier API.
For a documentation article about VerticalSliceModifier, please click here. To see it in action, please download the SciChart Examples Suite and find the Using Vertical Slice Tooltips example there. Its source code is available online at this link.
What does the VerticalSliceModifier Do?
The VerticalSliceModifier allows showing one or more vertical lines on the chart and a tooltip on data points of all series under the line. The VerticalSliceModifier is very similar in behavior to the RolloverModifier, but allows one or more lines to be positioned and optionally dragged by the user.
Adding the VerticalSliceModifier to the Chart
Please see the code sample below for how to add a VerticalSliceModifier to a SciChartSurface.
- You must declare a VerticalSliceModifier in the SciChartSurface.ChartModifier (or, inside a ModifierGroup)
- If you wish to add a vertical line, please add a VerticalLineAnnotation to the VerticalSliceModifier.VerticalLines property
- If you wish to remove a vertical line, please remove it from the VerticalSliceModifier.VerticalLines property
- For further guidance, please see our Using Vertical Slice Tooltips example
C#
public partial class SeriesVerticalSlicesExample : UserControl
{
private readonly Random _random = new Random();
public SeriesVerticalSlicesExample()
{
InitializeComponent();
Loaded += OnLoaded;
}
private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
{
var dataSeries0 = new XyDataSeries<double, double> { SeriesName = "Curve A" };
var dataSeries1 = new XyDataSeries<double, double> { SeriesName = "Curve B" };
var dataSeries2 = new XyDataSeries<double, double> { SeriesName = "Curve C" };
var data1 = DataManager.Instance.GetSinewave(0.8, 0.0, 1000, 3);
var data2 = DataManager.Instance.GetSinewave(0.5, -1.0, 1000, 5);
var data3 = DataManager.Instance.GetSinewave(0.7, 0.75, 1000, 7);
dataSeries0.Append(data1.XData, data1.YData);
dataSeries1.Append(data2.XData, data2.YData);
dataSeries2.Append(data3.XData, data3.YData);
using (this.sciChart.SuspendUpdates())
{
sciChart.RenderableSeries[0].DataSeries = dataSeries0;
sciChart.RenderableSeries[1].DataSeries = dataSeries1;
sciChart.RenderableSeries[2].DataSeries = dataSeries2;
}
sciChart.ZoomExtents();
}
private void OnCreateSliceClick(object sender, RoutedEventArgs e)
{
MouseButtonEventHandler mouseClick = null;
mouseClick = (s, arg) =>
{
this.MouseLeftButtonUp -= mouseClick;
hintText.Visibility = Visibility.Collapsed;
var mousePoint = arg.GetPosition((UIElement) this.sciChart.GridLinesPanel).X;
var slice = new VerticalLineAnnotation()
{
X1 = this.sciChart.XAxis.GetDataValue(mousePoint),
Style = (Style)Resources["sliceStyle"]
};
sliceModifier.VerticalLines.Add(slice);
};
hintText.Visibility = Visibility.Visible;
this.MouseLeftButtonUp += mouseClick;
}
private void OnDeleteSelectedSliceClick(object sender, RoutedEventArgs e)
{
var selectedSlices = sliceModifier.VerticalLines.Where(annotation => annotation.IsSelected).ToList();
foreach (var slice in selectedSlices)
{
sciChart.Annotations.Remove(slice);
}
}
}XAML
<Grid s:ThemeManager.Theme="ExpressionDark">
<Grid.Resources>
<Style x:Key="sliceStyle" TargetType="s:VerticalLineAnnotation">
<Setter Property="ShowLabel" Value="True" />
<Setter Property="Stroke" Value="#427EF6" />
<Setter Property="IsEditable" Value="True" />
<Setter Property="LabelPlacement" Value="Axis" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<s:SciChartSurface Name="sciChart"
Grid.Row="1">
<s:SciChartSurface.RenderableSeries>
<s:FastLineRenderableSeries SeriesColor="#E6F867"
StrokeDashArray="7 4"
StrokeThickness="3" />
<s:FastLineRenderableSeries SeriesColor="#4EDE4B"
StrokeDashArray="5 8"
StrokeThickness="3" />
<s:FastLineRenderableSeries SeriesColor="#E91FE9"
StrokeDashArray="7 9"
StrokeThickness="3" />
</s:SciChartSurface.RenderableSeries>
<s:SciChartSurface.XAxis>
<s:NumericAxis DrawMajorBands="True" GrowBy="0.1, 0.1" />
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis GrowBy="0.1, 0.1" />
</s:SciChartSurface.YAxis>
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:VerticalSliceModifier Name="sliceModifier">
<s:VerticalSliceModifier.VerticalLines>
<s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="1" />
<s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="3" />
<s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="5" />
<s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="7" />
<s:VerticalLineAnnotation Style="{StaticResource sliceStyle}" X1="9" />
</s:VerticalSliceModifier.VerticalLines>
</s:VerticalSliceModifier>
<s:CursorModifier ReceiveHandledEvents="True" />
<s:LegendModifier ShowLegend="True" Orientation="Horizontal" LegendPlacement="Top" Margin="0,0,0,5" />
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
</s:SciChartSurface>
<!-- Toolbar panel -->
<StackPanel Grid.Row="0"
Margin="2,4"
HorizontalAlignment="Left"
Orientation="Horizontal">
<Button Margin="2" Click="OnCreateSliceClick">
<StackPanel Orientation="Horizontal">
<Image />
<TextBlock Margin="3" Text="Add Slice" />
</StackPanel>
</Button>
<Button Margin="2" Click="OnDeleteSelectedSliceClick">
<StackPanel Orientation="Horizontal">
<Image />
<TextBlock Margin="3" Text="Delete Selected Slice" />
</StackPanel>
</Button>
<TextBlock x:Name="hintText" Visibility="Collapsed" Margin="5" Foreground="White" Text="Now Click on the Chart..."/>
</StackPanel>
</Grid>Properties of the VerticalSliceModifier
- HoverDelay - The delay for showing tooltips in Milliseconds
- ShowAxisLabels - True/False whether to show the XAxis Label
- ShowTooltipOn - Options for when to show the tooltip, e.g. MouseOver, Always, MouseHover, MouseLeftButtonDown
- UseInterpolation - Interpolates data points for smoother operation of the markers between data points that are widely spaced
Attached Properties of the VerticalSliceModifier
- TooltipTemplate - Can be attached to a RenderableSeries. VerticalSliceModifier uses this template to show a tooltip on the associated RenderableSeries
- TooltipContainerStyle - Can be attached to a RenderableSeries. This style will be applied to a tooltip of the associated RenderableSeries
- IncludeSeries - Can be attached to a RenderableSeries to specify whether a tooltip should appear for it or not. By default, VerticalSliceModifier shows tooltips for all series
- AxisLabelTemplate - Can be attached to an Axis. VerticalSliceModifier uses this template to show a tooltip on the associated Axis
- AxisLabelContainerStyle - Can be attached to an Axis. This style will be applied to a tooltip of the associated Axis
Changing when Tooltips are Shown
You may change when the VerticalSliceModifeir Tooltips are shown using the VerticalSliceModifeir.ShowTooltipsOn property. Please see the ShowTooltipOptions enum for available options.
Showing or Hiding the XAxis Label
You may show or hide the XAxis Label via the VerticalSliceModifier.ShowAxisLabels property.
Styling the VerticalSliceModifier
<ControlTemplate x:Key="RolloverMarkerTemplate">
<Rectangle Width="12" Height="12" Fill="Green" Stroke="LimeGreen" StrokeThickness="2"/>
</ControlTemplate>
<s:FastLineRenderableSeries RolloverMarkerTemplate="{StaticResource RolloverMarkerTemplate}">Which results in this:
Changing the VerticalSliceModifier Tooltip ControlTemplate
Each series displays a single tooltip with Y-value. You can change the ControlTemplate for the tooltips shown as follows:
<!-- The Tooltip Control Template, Binds to SeriesInfo -->
<Style x:Key="TooltipStyle" TargetType="s:TooltipControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="s:TooltipControl">
<Grid>
<Ellipse Fill="#77FFFFFF"
Stroke="{Binding Stroke, Converter={StaticResource ColorToBrushConverter}}"
StrokeThickness="2" />
<StackPanel Margin="20">
<TextBlock FontSize="12"
FontWeight="Bold"
Foreground="{Binding Stroke, Converter={StaticResource ColorToBrushConverter}}"
Text="{Binding SeriesName}" />
<TextBlock FontSize="11"
Foreground="{Binding Stroke, Converter={StaticResource ColorToBrushConverter}}"
Text="{Binding Value}" />
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style><!-- Attach new tooltip to every series -->
<s:SciChartSurface.RenderableSeries>
<s:FastLineRenderableSeries Stroke="#E6F867"
StrokeDashArray="7 4"
StrokeThickness="3"
s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle}"/>
<s:FastLineRenderableSeries Stroke="#4EDE4B"
StrokeDashArray="5 8"
StrokeThickness="3"
s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle}"/>
<s:FastLineRenderableSeries Stroke="#E91FE9"
StrokeDashArray="7 9"
StrokeThickness="3"
s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle}"/>
</s:SciChartSurface.RenderableSeries>Which results in the following:
Styling the Vertical Lines
The vertical lines themselves are provided by the VerticalLineAnnotation, which works in unison with the VerticalSliceModifier to place tooltips over the Vertical Lines.
For instance, the following style applied to VerticalLineAnnotation sets the Stroke, StrokeThickness, ShowLabel on the XAxis, LabelPlacement.
<Style x:Key="sliceStyle" TargetType="s:VerticalLineAnnotation"> <Setter Property="ShowLabel" Value="True" /> <Setter Property="Stroke" Value="#427EF6" /> <Setter Property="StrokeThickness" Value="1" /> <Setter Property="IsEditable" Value="True" /> <Setter Property="LabelPlacement" Value="Axis" /> </Style>
Further Reading
For more information, see the documentation article on VerticalSliceModifier. The example is available at this link.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article