Tooltip position in Oxyplot

Question

I am recently using OxyPlot to draw charts for my WPF project. I have an issue with the tooltip in a line series. The rectangle box of the tooltip is too close to the point my mouse locates. I am wondering if there is any way to modify the position of the tooltip box and make it further from the cursor. Thank a lot. For example, I would like to move the tooltip box (in the red box) to right a bit.

[Edit]

Following Anu's idea, I added the following code but seems like it not works as expected.

In the xaml.cs file, I added

<UserControl.Resources>
    <popups:ScreenPointToOffSetScreenPointConverter x:Key="ScreenPointToOffSetScreenPointConverter"/>
</UserControl.Resources>

And then change my OxyPlot to

<ItemsControl ItemsSource="{Binding AmplitudeDtos}" Margin="0" Name="Amplitude" >
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid popups:GridUtilities.ItemsPerRow="1" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type dtoModels:SignalDto}">
            <oxy:PlotView Height="Auto" Width="Auto" MinHeight="40" MinWidth="100" HorizontalContentAlignment="Stretch" 
                          FontStyle="Normal" FontFamily="Roboto, Microsoft YaHei" FontSize="8" Model="{Binding PlotModel}" Controller="{Binding PlotController}" Padding="8" Margin="0">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Loaded">
                        <i:InvokeCommandAction Command="{Binding SignalLoadedCommand}" CommandParameter="{Binding}" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <oxy:PlotView.DefaultTrackerTemplate>
                    <ControlTemplate>
                        <oxy:TrackerControl Position="{Binding Position, Converter={StaticResource ScreenPointToOffSetScreenPointConverter}}" LineExtents="{Binding PlotModel.PlotArea}">
                            <oxy:TrackerControl.Content>
                                <TextBlock Text="{Binding}" />
                            </oxy:TrackerControl.Content>
                        </oxy:TrackerControl>
                    </ControlTemplate>
                </oxy:PlotView.DefaultTrackerTemplate>
            </oxy:PlotView>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Please note that my OxyPlot is in a DataTemplate.

ScreenPointToOffSetScreenPointConverter class is the exactly the same as in Anu's example.

score 0 · Accepted Answer · answered Jun 08 '19 at 11:24

A relatively simple fix for the requirement would be to modify DefaultTrackerTemplate and use a Custom Converter to change the Position.For example, You could define a ScreenPoint converter as following

public class ScreenPointToOffSetScreenPointConverter : IValueConverter
{
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if(value is ScreenPoint screenPoint)
            {
                return new ScreenPoint(screenPoint.X + 50, screenPoint.Y);
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            // TODO: Implement
            throw new NotImplementedException();
        }
    }

And then in your XAML

<oxy:PlotView  Model="{Binding MyModel}">
            <oxy:PlotView.DefaultTrackerTemplate>
                <ControlTemplate>
                    <oxy:TrackerControl Position="{Binding Position,Converter={StaticResource ScreenPointToOffSetScreenPointConverter}}" LineExtents="{Binding PlotModel.PlotArea}">
                        <TextBlock Text="{Binding}" />
                    </oxy:TrackerControl>
                </ControlTemplate>
            </oxy:PlotView.DefaultTrackerTemplate>
        </oxy:PlotView>

The Converter would add an Offset to the ScreenPoint position for the Tracker. You could modify the Offset Value to the Converter if it makes sense for your application requirement.

Hi Anu, thank you for your suggestion. I followed your idea and added the code. There is no obvious error but seems like it is not working as expected. Can you please help to see what could be wrong? — Ben, Jun 11 '19 at 12:47
@Ben I checked your code, couldn't see or replicate why it is not working. May be you could start debugging by isolating the graph first from the items control. Check if it is working and then add the items control. — Anu Viswan, Jun 15 '19 at 01:50

Tooltip position in Oxyplot

1 Answers1