Pre loader

Align Custom Tooltip Text Based On Tooltip Position

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

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",
            }
        };
Version
6.5.1
Attachments
  • You must to post comments
0
0

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

  • You must to post comments
0
0

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?

  • Yuriy Zadereckiy
    Unfortunately, there is no way to do this at the moment. I logged your request in our backlog, we will consider adding this possibility to the API.
  • You must to post comments
0
0

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?

ponderosa near me

  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies