WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > ChartModifier API > Cursors, Tooltips and legends > TernaryChartModifiers > Ternary Tooltip Modifier
Ternary Tooltip Modifier

Tooltips may be added to the SciChartTernarySurface using the TernaryTooltipModifier. This is a TernaryChartModifierBase derived type which is attached to the SciChartTernarySurface.TernaryChartModifier property.           

NOTE: The Tooltip is specifically suited for scatter X-Y data, although it may be used for any type of data in SciChart where you want a tooltip to appear on mouse-over of a data-point on the chart.

 

The TernaryTooltipModifier is demonstrated in the example 2D Charts > Create a Ternary Chart > Scatter Series TernaryChart

Adding a TernaryTooltipModifier to the Chart – Xaml

To add a TernaryTooltipModifier to the chart, use the following code:

Adding a TernaryTooltipModifier to the Chart
Copy Code 
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartTernarySurface>
    <s:SciChartTernarySurface.ChartModifier>
        <s:TernaryModifierGroup>
            <s:TernaryTooltipModifier x:Name="ternaryTooltipModifier"
                IsEnabled="True"/>           
        </s:TernaryModifierGroup>
    </s:SciChartTernarySurface.ChartModifier>
</s:SciChartTernarySurface>

Adding a TernaryTooltipModifier to the Chart – Code

The equivalent code to add a TernaryTooltipModifier in C# is as follows:

Adding a TernaryTooltipModifier to the Chart
Copy Code 
var sciChartTernarySurface = new SciChartTernarySurface
{
    ChartModifier = new TernaryModifierGroup(new TernaryTooltipModifier
    {
        IsEnabled = true
    })
};

Styling the Tooltip Item Template

The tooltip item template can be styled via the TernaryTooltipModifier.TooltipItemTemplate attached property. This defines a DataTemplate for some UI which binds to an instance of SeriesInfo.

Styling the Tooltip Item Template
Copy Code 
<s:SciChartTernarySurface>
    <s:SciChartTernarySurface.Resources>
        <!--  Tooltip Template for an XyDataSeries binds to XySeriesInfo  -->
        <!--  Check out the properties on XySeriesInfo to see what you can bind to  -->
        <DataTemplate x:Key="XyzTooltipTemplate" DataType="s:XyzSeriesInfo">
            <StackPanel Orientation="Vertical">
                <TextBlock Foreground="White">
                    <Run Text="Series: " />
                    <Run Text="{Binding SeriesName, StringFormat='{}{0}:'}" />
                </TextBlock>
                <TextBlock Foreground="White">
                    <Run Text="X-Value: " />
                    <Run Text="{Binding XValue, StringFormat=\{0:0.0\}}" />
                </TextBlock>
                <TextBlock Foreground="White">
                    <Run Text="Y-Value: " />
                    <Run Text="{Binding YValue, StringFormat=\{0:0.0\}}" />
                </TextBlock>
                <TextBlock Foreground="White">
                    <Run Text="Z-Value: " />
                    <Run Text="{Binding ZValue, StringFormat=\{0:0.0\}}" />
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </s:SciChartTernarySurface.Resources>    
   
    <s:SciChartTernarySurface.RenderableSeries>
        <s:TernaryScatterRenderableSeries x:Name="scatterSeries" s:TernaryTooltipModifier.Tooltip Template="{StaticResource XyzTooltipTemplate}">
     <s:TernaryScatterRenderableSeries.PointMarker>
                <s:EllipsePointMarker Width="7"
                                      Height="7"
                                      Fill="Yellow" />
            </s:TernaryScatterRenderableSeries.PointMarker>
        </s:TernaryScatterRenderableSeries>
    </s:SciChartTernarySurface.RenderableSeries>
       
    <s:SciChartTernarySurface.ChartModifier>
        <s:TernaryModifierGroup>
            <s:TernaryTooltipModifier />
        </s:TernaryModifierGroup>
    </s:SciChartTernarySurface.ChartModifier>
</s:SciChartTernarySurface>

Styling the Tooltip Container Style

The tooltip container can be styled via the TernaryTooltipModifier.TooltipContainerStyle attached property.

Styling the Tooltip Container Style
Copy Code 
<s:SciChartTernarySurface>
    <s:SciChartTernarySurface.Resources>
        <!-- The TooltipControl template is defined below -->
        <!-- Change this if you want to have a non-default tooltip container -->
        <!-- The ContentPresenter is bound to the DataContext (a SeriesInfo type) -->
        <!-- and the ContentTemplate is the DataTemplate for the SeriesInfo -->
        <!-- Finally, the TooltipContainerStyle is set on the RenderableSeries -->
        <Style x:Key="TernaryTooltipStyle" TargetType="s:TooltipControl">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="s:TooltipControl">
                        <Border Background="#ff6495ed"
                                BorderBrush="#ff4d81dd"
                                BorderThickness="2"
                                Opacity="0.9"
                                Padding="5">
                            <ContentPresenter Content="{TemplateBinding DataContext}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </s:SciChartTernarySurface.Resources>    
   
    <s:SciChartTernarySurface.RenderableSeries>
        <s:TernaryScatterRenderableSeries x:Name="scatterSeries" s:TernaryTooltipModifier.TooltipContainerStyle="{StaticResource TernaryTooltipStyle}">
            <s:TernaryScatterRenderableSeries.PointMarker>
                <s:EllipsePointMarker Width="7"
                                      Height="7"
                                      Fill="Yellow" />
            </s:TernaryScatterRenderableSeries.PointMarker>
        </s:TernaryScatterRenderableSeries>
    </s:SciChartTernarySurface.RenderableSeries>
</s:SciChartTernarySurface>

Changing the Tooltip DataContext

The TernaryTooltipModifier features the ability to easily change the DataContext (or viewmodel) for Tooltips, via the TernaryTooltipModifier.TooltipLabelDataContextSelector property.