SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy

We also have a tag=SciChart on where you can earn rep for your questions!


I would like to apply a custom style to all tooltips, but I can’t seem to figure out how to do so. I’ve followed the custom tooltip example, but find that applying the same style to all series becomes very verbose when we have many series on the same chart. From the example:

        s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate1}"
        s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate1}"
        s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate1}"
        s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate1}" />
        s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate2}"
        s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate2}"
        s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate2}"
        s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate2}" />

My target style is the same for all types of series, so I don’t need to customize them beyond overriding the default style. I’ve tried removing the “x:key” attribute from my custom tooltip style (to make it apply to all unstyled tooltips), but it doesn’t work as I had hoped. So I’m guessing that they’re being styled in some way at lower levels that prevent this from working. Is there a way to style the tooltips globally or is the method shown in this example the best approach?

  • You must to post comments
Great Answer

Hi there,

Thanks for your question. You could do this using implicit styles. Set the tooltip properties in a style for BaseRenderableSeries, then base on it implicit styles for all the RenderableSeries types you use:

<Style x:Key="DefaultRenderableSeriesStyle" TargetType="s:BaseRenderableSeries">
    <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipLabelTemplate}" />

<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastLineRenderableSeries" />
<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastColumnRenderableSeries" />

Does the above make sense for you?

Best regards,

  • w b
    This approach doesn’t quite work for our application, since we’re customizing the style of each RenderableSeries slightly differently (so the implicit styles are overridden by the custom styles). But this does solve the actual question that I asked. And it did help me to realize that I can set the TooltipTemplate styles inside of the style definition for each RenderableSeries (not sure why I didn’t think of this before).For anyone interested, here’s exactly what we did: (edit: it looks like code blocks aren’t supported in comments, so see my answer below for the actual code).Also, I noticed that the code sample you provided uses two different namespace definitions: r:BaseRenderableSeries and c:TooltipModifier. Was this done for a reason, or is it just a copy/paste issue?
  • Yuriy
    Concerning the different namespaces, it is kind of copy/paste issue. The markup snippet was intended to be more like pseudocode just to demonstrate the idea. Let me correct it, actually. Thanks for pointing it out to me.
  • You must to post comments

For anyone interested, here’s exactly what we did to solve this issue:

<DataTemplate x:Key="TooltipTemplate" DataType="s:SeriesInfo">
    <StackPanel Orientation="Horizontal">
        <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesName, StringFormat='{}{0}: '}" />
        <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding FormattedYValue}" />

 <Style x:Key="LineSeriesStyle" TargetType="s:FastLineRenderableSeries">
    <Setter Property="Stroke" Value="#FF4083B7"/>
    <Setter Property="StrokeThickness" Value="2"/>

    <!-- other property setters -->

    <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}" />
    <Setter Property="s:VerticalSliceModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}" />
  • Yuriy
    Thanks for sharing your solution! I’m sure it will benefit others.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.