Styling the Oxyplot tooltip and showing on mouse hover ( WPF)

While using chart controls for one of my WPF projects, I had to use Oxyplot graph controls. I came across an issue as to how to style the tooltip and show the tooltip on mouse hover . Below is the solution.

How to style the tooltip and show it on mouse hover of the series ? 

I am styling a plot which shows line series with X and Y axis.The two line series are bound to ObservableCollection<DataPoint> . All the dynamicresource and staticresource bindings of styles are present in a common resourcedictionary. You’ll can add your own style . Below is the style shown for OxyPlot plot which styles the tracker element and tooltip .

  1. Define it either in resourcedictionary or in usercontrol.resources section.
  2. xmlns:oxy=”clr-namespace:OxyPlot.Wpf;assembly=OxyPlot.Wpf” Add this namespace.
  3. <Style
    x:Key=”PlotStyle”
    TargetType=”{x:Type oxy:Plot}”>
    <Setter Property=”DefaultTrackerTemplate”>
    <Setter.Value>
    <ControlTemplate>
    <oxy:TrackerControl
    Background=”Black”
    LineExtents=”{Binding PlotModel.PlotArea}”
    LineStroke=”Gray”
    Position=”{Binding Position}”><Border
    Margin=”2″
    Style=”Gray”>
    <Grid Margin=”6″>
    <Grid.RowDefinitions>
    <RowDefinition />
    <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition />
    <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TextBlock
    Grid.Column=”0″
    Grid.Row=”0″
    Margin=”2″
    Style=”{StaticResource NormalTextStyle}”
    Text=”X :” />
    <TextBlock
    Grid.Column=”1″
    Grid.Row=”0″
    Margin=”2″
    Style=”{StaticResource NormalTextStyle}”
    Text=”{Binding
    DataPoint.X,
    StringFormat={}{0:0.##}}” />
    <TextBlock
    Grid.Column=”0″
    Grid.Row=”1″
    Margin=”2″
    Style=”{StaticResource NormalTextStyle}”
    Text=”Y :” />
    <TextBlock
    Grid.Column=”1″
    Grid.Row=”1″
    Margin=”2″
    Style=”{StaticResource NormalTextStyle}”
    Text=”{Binding
    DataPoint.Y,
    StringFormat={}{0:0.##}}” />

    </Grid>
    </Border>

    </oxy:TrackerControl>
    </ControlTemplate>

    </Setter.Value>
    </Setter>
    </Style>

  4. XAML for oxplot graph which shows line series bound to collections and styled with resources declared in our common file.
  5. <oxy:Plot
    x:Name=”PlotPlane”
    Grid.Column=”0″
    Grid.Row=”1″
    Margin=”-25,15,25,-30″
    Background=”Transparent”
    PlotAreaBorderColor=”Transparent”
    Style=”{StaticResource PlotStyle}”
    TextColor=”{DynamicResource UI.ColoursDefault}”>
    <oxy:Plot.Series>
    <oxy:LineSeries
    Color=”{DynamicResource UI.ColoursOrange}”
    ItemsSource=”{Binding
    DataSeriesToDisplay1,
    UpdateSourceTrigger=PropertyChanged}”
    MarkerFill=”{DynamicResource UI.ColoursOrange}”
    MarkerSize=”3″
    MarkerType=”Circle” />
    <oxy:LineSeries
    Color=”{DynamicResource UI.ColoursBlue}”
    ItemsSource=”{Binding
    DataSeriesToDisplay2,
    UpdateSourceTrigger=PropertyChanged}”
    MarkerFill=”{DynamicResource UI.ColoursBlue}”
    MarkerSize=”3″
    MarkerType=”Circle” />
    </oxy:Plot.Series>
    <oxy:Plot.Axes>
    <oxy:LinearAxis
    Title=”{Binding
    AxisName1,
    UpdateSourceTrigger=PropertyChanged}”
    AxislineColor=”{DynamicResource UI.ColoursDefault}”
    AxislineStyle=”Solid”
    MajorStep=”150″
    PositionAtZeroCrossing=”True”
    TicklineColor=”{DynamicResource UI.ColoursDefault}” />
    <oxy:LinearAxis
    Title=”{Binding
    AxisName2,
    UpdateSourceTrigger=PropertyChanged}”
    AxislineColor=”{DynamicResource UI.ColoursDefault}”
    AxislineStyle=”Solid”
    MajorStep=”150″
    Position=”Bottom”
    PositionAtZeroCrossing=”True”
    TicklineColor=”{DynamicResource UI.ColoursDefault}” />
    </oxy:Plot.Axes>
    </oxy:Plot>
  6. To show the tooltip on mouse hover below is code written in code-behind.
  7. this.PlotPlane.ActualController.UnbindMouseDown(OxyMouseButton.Left);
    this.PlotPlane.ActualController.BindMouseEnter(PlotCommands.HoverSnapTrack);
  8. capture

    An oxyplot graph with styled series , styled tooltip shown on mouse hover. The tracker is also styled.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s