SciChart: Custom RolloverModifierLabel for multiple DataSeries bound from code

Question

Before I updated to the latest version of SciChart, I had this custom rollover modifier that displayed multiple values for any given point I "rolled over". It was implemented like this:

<sci:RolloverModifier
     DrawVerticalLine="True"
     ShowTooltipOn="Always"
     SourceMode="AllVisibleSeries"
     TooltipLabelTemplate="{StaticResource RolloverLabelTemplate}" />

RolloverLabelTemplate was a ControlTemplate:

 <ControlTemplate
     x:Key="RolloverLabelTemplate"
     TargetType="sci:TemplatableControl">
     <Grid>
     ...

Now the RolloverModifier.TooltipLabelTemplate is gone from the API and seems to be replaced by TooltipTemplate, which takes a DataTemplate, not a ControlTemplate. I tried making an analogous DataTemplate:

<DataTemplate
 x:Key="SomeTemplate"
 DataType="s:XySeriesInfo">
<Grid>

But when I try to assign it to the RolloverModifier,

 <s:RolloverModifier
    ...
    TooltipTemplate="{StaticResource SomeTemplate}" />

I get the following exception:

Unable to cast object of type 'SciChart.Charting.ChartModifiers.RolloverModifier' to type 'SciChart.Charting.Visuals.RenderableSeries.BaseRenderableSeries'.

I've tried to follow this documentation: https://www.scichart.com/documentation/v4.x/webframe.html#RolloverModifier.html

and on the topic of styling the tooltip template, it suggests to have a RolloverModifier, but to add the TooltipTemplate to the RenderableSeries:

<s:SciChartSurface.RenderableSeries>
      <s:FastLineRenderableSeries s:RolloverModifier.TooltipTemplate="{StaticResource XyTooltipTemplate}"/>                              
   </s:SciChartSurface.RenderableSeries>           

   <s:SciChartSurface.ChartModifier>
      <s:ModifierGroup>
         <s:RolloverModifier ShowTooltipOn="Always" />                   
      </s:ModifierGroup>
   </s:SciChartSurface.ChartModifier>
</s:SciChartSurface>

This is a problem for me, because I don't have the RenderableSeries defined in xaml. They are bound to the view model:

 <sciVisuals:SciChartSurface
   ...
   SeriesSource="{Binding SciSeries}">

there will be more than one, and in fact I don't even know how many. How can I customize the rollover tooltip label in this case?

Answer 1

In SciChart WPF v4.x or later, it is necessary to apply the TooltipTemplate to the series, because many users requested the ability to individually style series. For example a Candlestick series should have a different tooltip than a Line series.

Please see the SciChart WPF Documentation for applying a RolloverModifier TooltipTemplate in v4+:

Styling the Tooltip Item Template

SciChart by default has a number of Tooltip templates which are unique to the series type.
To change the Tooltip template, use the RolloverModifier.TooltipTemplate attached property:

<s:SciChartSurface >
   <s:SciChartSurface.Resources>
      <!-- Tooltip Template for an XyDataSeries binds to XySeriesInfo -->
      <!-- Check out the properties on XySeriesInfo to see what you can bind to -->
      <DataTemplate x:Key="XyTooltipTemplate" DataType="s:XySeriesInfo">
         <StackPanel Orientation="Vertical">              
            <TextBlock Foreground="White">
               <Run Text="Series: "/>
               <Run Text="{Binding SeriesName, StringFormat='{}{0}:'}"/>
            </TextBlock>              
            <TextBlock Foreground="White">
               <Run Text="X-Value: "/>
               <Run Text="{Binding FormattedXValue}"/>
            </TextBlock>
            <TextBlock Foreground="White">
               <Run Text="Y-Value: "/>
               <Run Text="{Binding FormattedYValue}"/>
            </TextBlock>
         </StackPanel>
      </DataTemplate>
   </s:SciChartSurface.Resources>
   <s:SciChartSurface.RenderableSeries>
      <s:FastLineRenderableSeries s:RolloverModifier.TooltipTemplate="{StaticResource XyTooltipTemplate}"/>                              
   </s:SciChartSurface.RenderableSeries>           
   <s:SciChartSurface.ChartModifier>
      <s:ModifierGroup>
         <s:RolloverModifier ShowTooltipOn="Always" />                   
      </s:ModifierGroup>
   </s:SciChartSurface.ChartModifier>
</s:SciChartSurface>

What I suggest in order to style these despite using the MVVM API is to create your styles in XAML and apply them using the SeriesBinding MVVM API.

There is an FAQ in the SciChart WPF Documentation on how to style a tooltip when using the MVVM API here.

A lot of customers ask us how to style various attached properties used in SciChart in the MVVM API. For example, the given following attached properties, how do we convert this to the MVVM API?

The solution is simple, to use our method of Styling the RenderableSeries presented in Worked Example - Style a Series in MVVM.

Simply declare the attached properties and tooltip templates in a style in your View.

Now, apply the style using BaseRenderableSeriesViewModel.StyleKey property. SciChart will pick up the style and do the rest.

If you are still using the older, SeriesSource API (note this is now obsolete as of v4.x) then I suggest declare your style in XAML and apply it using this technique to access a style in code-behind.