Question

I created a ScatterSeries chart using the following:

    public ScatterPlot()
    {
        InitializeComponent();


        ScatterSeries a = new ScatterSeries();
        a.Title = "Series A";

        a.IndependentValuePath = "Key";
        a.DependentValuePath = "Value";

        scatterplot.Series.Add(a);

        ((ScatterSeries)scatterplot.Series[0]).ItemsSource = new KeyValuePair<DateTime, int>[]
         {
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(1), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(2), 150),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(3), 150),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(4), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(5), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(8), 130),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(9), 130),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(10), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(11), 0),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(15), 225),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(16), 225),
           new KeyValuePair<DateTime, int>(DateTime.Now.AddMonths(17), 0)
         };

    }

I have a dictionary where every data point is mapped to a separate text label. I was wondering if it is possible to establish a binding such that when I move my mouse over a point, I get the text label instead of the actual number? Any suggestions on how to do this?

Answer 1

Set the DataPoint style …

    <charting:ScatterSeries DependentValuePath="Value"
                            IndependentValuePath="Key">
       <charting:DataPointSeries.DataPointStyle>
         <Style TargetType="{x:Type charting:DataPoint}">
              <EventSetter Event="MouseEnter" Handler="DataPoint_MouseEnter" />
              <!--Style.Triggers>
                 <Trigger Property="IsMouseDirectlyOver" Value="True">
                     <Setter Property="ToolTip" Value="Hi There!"/>
                 </Trigger>
             </Style.Triggers--> <!-- This doesnt work!-->
         </Style>
       </charting:DataPointSeries.DataPointStyle>
       <charting:DataPointSeries.ItemsSource>
            <Binding BindsDirectlyToSource="True"/>
       </charting:DataPointSeries.ItemsSource>
    </charting:ScatterSeries>

but the trigger based tooltip setter didnt work when I tested. The event setter worked though. So quickest fix could be to use that event setter and set the TooltipService.ToolTip from code behind in the handler.

But if you are using MVVM then you could use some attached behavior to handle this event and set the tooltip explicitly.

OR

You could override the ScatterDataPoint template using the above Style and just set template to this NewTemplate …

Notice that in the ControlTemplate below I have set the ToolTipService.ToolTip to the Tooltip of the DataPoint. So you will have to use the above style to set the Template and the ToolTip …

 <!--  charting:ScatterDataPoint  -->

 <Style x:Key="NewTemplate" TargetType="charting:ScatterDataPoint">
    <Setter Property="Background" Value="Orange" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="BorderBrush" Value="#FF686868" />
    <Setter Property="Width" Value="8" />
    <Setter Property="Height" Value="8" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:ScatterDataPoint">
                <Grid x:Name="Root" Opacity="0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.1" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Unselected" />
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.185" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                        <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF8A8A8A" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="RevealStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.5" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Shown">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ToolTipService.ToolTip>
                        <ContentControl Content="{TemplateBinding ToolTip}" />
                    </ToolTipService.ToolTip>
                        <Path Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Data="F1 M 0,50L 50,0 100,50 50,100L 0,50 Z " />
                        <Path x:Name="MouseOverHighlight" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="{x:Null}" Data="F1 M 0,50L 50,0 100,50 50,100L 0,50 Z  " Opacity="0" Fill="#FFFFFFFF" />
                        <Path x:Name="SelectionHighlight" Stretch="Fill" StrokeThickness="1" StrokeLineJoin="Round" Stroke="{x:Null}" Data="F1 M 0,50L 50,0 100,50 50,100L 0,50 Z " Fill="#FF959595" Opacity="0" />
                    </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
   </Style>