SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
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:SciChartSurface.RenderableSeries>
<s:FastLineRenderableSeries
Stroke="#ff6495ed"
StrokeThickness="2"
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:FastLineRenderableSeries
Stroke="#ffe2460c"
StrokeThickness="2"
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}" />
</s:SciChartSurface.RenderableSeries>
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?
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>
<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastLineRenderableSeries" />
<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastColumnRenderableSeries" />
…
Does the above make sense for you?
Best regards,
Yuriy
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}" />
</StackPanel>
</DataTemplate>
<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}" />
</Style>
Please login first to submit.