SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
Hello SciChart Team,
I have multiple charts in my application where all the charts are in the same MdofierGroup to show the RolloverModifier tooltip at the same time. As I want to show custom tooltip text, I have created a custom TooltipTemplate and TooltipContainerStyle. But now when the tooltip is shown on the left side the tooltip text is a long way from the marker. I want to align the tooltip text based on the tooltip position. When the tooltip is on the right side the text will be aligned left and when the tooltip is on left side the text will be aligned right.
I have attached some code snippets of my implementations, can you suggest me any way to achieve this?
<Style x:Key="_tooltipContainer" TargetType="scichart:TooltipControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="scichart:TooltipControl">
<ContentPresenter Content="{TemplateBinding DataContext}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="_tooltipTemplate" DataType="scichart:XySeriesInfo">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="12" FontFamily="Rubik" Foreground="White">
<TextBlock.Text>
.
.
.
</TextBlock.Text>
</TextBlock>
</StackPanel>
</DataTemplate>
<!-- Style applied via x:Key name in ViewModel -->
<Style TargetType="scichart:BaseRenderableSeries" x:Key="_lineSeriesStyle">
<Setter Property="RolloverMarkerTemplate">
<Setter.Value>
<ControlTemplate>
<Ellipse Width="7" Height="7" Stroke="White" StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="scichart:RolloverModifier.TooltipContainerStyle" Value="{StaticResource _tooltipContainer}"/>
<Setter Property="scichart:RolloverModifier.TooltipTemplate" Value="{StaticResource _tooltipTemplate}"/>
<Setter Property="scichart:RolloverModifier.IncludeSeries" Value="True"/>
<Setter Property="StrokeThickness" Value="2"/>
</Style>
<scichart:SciChartSurface RenderableSeries="{scichart:SeriesBinding ItsRenderableTimeGraphSeries}">
<scichart:SciChartSurface.ChartModifier>
<scichart:ModifierGroup DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"
scichart:MouseManager.MouseEventGroup="MouseEventGroup" >
<scichart:RolloverModifier ShowTooltipOn="MouseHover" DrawVerticalLine="False" />
</scichart:ModifierGroup>
</scichart:SciChartSurface.ChartModifier>
.
.
.
</scichart:SciChartSurface>
In ViewModel:
ItsRenderableTimeGraphSeries = new ObservableCollection<IRenderableSeriesViewModel>
{
new MountainRenderableSeriesViewModel()
{
IsDigitalLine = false,
StyleKey = "_lineSeriesStyle",
}
};
Hi Habibur,
I would suggest setting TooltipUsageMode property to “Popup” on your ChartModifier. This will make your tooltips appearing over chart borders. Please take a look at this documentation article for more info.
Please let me know if this is a suitable solution for you,
Best regards,
Yuriy
Hello Yuriy,
Thank you for the suggestion. Making the TooltipUsageMode to “Popup” is a good workaround to our problem. But I would like to know if there is any way to set the alignment to our custom tooltip text based on the side (left/right) the tooltip is showing?
Thank you for the suggestion. Making the TooltipUsageMode to “Popup” is a good workaround to our problem. But I would like to know if there is any way to set the alignment to our custom tooltip text based on the side (left/right) the tooltip is showing?
Please login first to submit.