We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show ToolTip with amplitude value while the mouse pointer is on the graph line

Thread ID:

Created:

Updated:

Platform:

Replies:

130955 Jun 13,2017 10:31 AM UTC Sep 18,2017 12:57 PM UTC WPF 10
loading
Tags: SfChart
Michael
Asked On June 13, 2017 10:31 AM UTC

Hello,

I want to implement the possability to view the graph point value with the mouse coursor (hovering on the line should show the x and y axis values).
I tried to use the ChartTooltip, but it appears only on the specified time duration, but I need that it will appear while mouse coursor is on the point.
How can I do it? 
Thank you very much!

Michael

Durgadevi Selvaraj [Syncfusion]
Replied On June 14, 2017 08:29 AM UTC

Hi Michael,

Thanks for contacting Syncfusion Support.

Query 1:Hovering on the line should show the X and Y axis values.

We can achieve your requirement by binding of corresponding XValue and YValue to the TooltipTemplate property in chart series as like in the below code snippet,
<chart:LineSeries ItemsSource="{Binding Collection}" ShowTooltip="True" 
                                XBindingPath="XValue" YBindingPath="YValue" chart:ChartTooltip.ShowDuration="50000" 
                                > 
     <chart:LineSeries.TooltipTemplate> 
           <DataTemplate> 
                 <Border BorderThickness="1" BorderBrush="Black" Background="LightBlue" CornerRadius="3"> 
                     <StackPanel Margin="3"> 
                        <StackPanel Orientation="Horizontal"> 
                             <TextBlock Text="XValue : " FontSize="14" FontWeight="Bold"/> 
                             <TextBlock Text="{Binding XData}" FontSize="14" /> 
                         </StackPanel> 
                         <StackPanel Orientation="Horizontal"> 
                              <TextBlock Text="YValue : " FontSize="14" FontWeight="Bold"/> 
                              <TextBlock Text="{Binding YData}" FontSize="14" /> 
                         </StackPanel>                      
                      </StackPanel> 
                   </Border> 
             </DataTemplate> 
        </chart:LineSeries.TooltipTemplate> 
</chart:LineSeries> 
Please find the output screenshot, 

Query 2: The tooltip appears only on the specified time duration, but I need that it will appear while mouse cursor is on the point.
We are able to display of tooltip for long duration while hover over the segment by setting ShowDuration property(in MilliSeconds) as like in the below code snippet, 
<chart:LineSeries ItemsSource="{Binding Collection}" ShowTooltip="True" 
                                XBindingPath="XValue" YBindingPath="YValue"   chart:ChartTooltip.ShowDuration="50000" 
                                > 

We have prepared the sample based on your requirement and please downloaded from the below location,
Sample: Tooltip_Sample

Regards,
Durgadevi S 


Michael
Replied On June 14, 2017 09:35 AM UTC

Thank you very much!! It's exactly what I need!

Michael
Replied On June 14, 2017 09:43 AM UTC

Additional question: is it possible to show each point on the graph (like dots in place of points)?

Durgadevi Selvaraj [Syncfusion]
Replied On June 15, 2017 09:14 AM UTC

Hi Michael,

Thanks for your update.

We can achieve your requirement (showing dots on the place of point) by using of chart adornments as like in the below code snippet, 
<chart:LineSeries.AdornmentsInfo> 
    <chart:ChartAdornmentInfo ShowLabel="True" Symbol="Ellipse" SymbolHeight="15" SymbolWidth="15" ShowMarker="True" SymbolInterior="{Binding Interior}" > 
    </chart:ChartAdornmentInfo> 
</chart:LineSeries.AdornmentsInfo> 
 

Please refer our UG documentation to know more about chart adornments,
Link: https://help.syncfusion.com/wpf/sfchart/adornments

Please find the output screenshot, 

We have prepared the sample based on your requirement for your reference and please downloaded from the below location,
Sample: Adornment_Sample


Regards,
Durgadevi S 


Michael
Replied On June 15, 2017 02:58 PM UTC

Thank you very much!

Durgadevi Selvaraj [Syncfusion]
Replied On June 16, 2017 05:08 AM UTC

Hi Michael,

Thanks for your update.
Please let us know if you need any further assistance on this.

Regards,
Durgadevi S

Blackwater
Replied On July 26, 2017 02:19 AM UTC

I want to show tooltip only if the mouse is over the adornment.How can I implement this ? Thanks in advance.


Durgadevi Selvaraj [Syncfusion]
Replied On July 26, 2017 01:15 PM UTC

 
We can achieve your requirement(Displaying tooltip only on adornment ) by  allowing the tooltip only for adornment in OnMouseMove() using custom series as shown in the below code, 
MainWindow.xaml: 
<local:LineSeriesExt ItemsSource="{Binding Collection}" ShowTooltip="True"  
                                XBindingPath="XValue"  YBindingPath="YValue"                               > 
 
                <local:LineSeriesExt.AdornmentsInfo> 
                    <chart:ChartAdornmentInfo ShowLabel="True"  Symbol="Ellipse" SymbolHeight="20" SymbolWidth="20"  
                                              ShowMarker="True" SymbolInterior="{Binding Interior}" > 
                         
                    </chart:ChartAdornmentInfo> 
                </local:LineSeriesExt.AdornmentsInfo> 
            </local:LineSeriesExt> 
 
LineSeriesExt.cs: 
 
public class LineSeriesExt : LineSeries 
    { 
        protected override void OnMouseMove(MouseEventArgs e) 
        { 
            if (e.OriginalSource is Line) 
                return; 
            base.OnMouseMove(e); 
        } 
    } 
 
 
We have prepared a sample based on your requirement and it can be downloaded from the below link, 
Please let us know if you have any concern. 
Regards, 
Durgadevi S 



  
  


Blackwater
Replied On September 17, 2017 02:52 PM UTC

Thanks , It is working as expected. 

But I found out that another problem in data binding of line segment to tooltip as below codes. I am binding to "Item" property of tooltip datacontext.

<local:LineSeriesExtension.TooltipTemplate>

      <DataTemplate>

          <TextBlock Text="{Binding Path=Item.MyOtherProperty}" />

     </DataTemplate>

</local:LineSeriesExtension.TooltipTemplate>

The tooltip for the last adornment is always dispalying the second last adornment information. 


Durgadevi Selvaraj [Syncfusion]
Replied On September 18, 2017 12:57 PM UTC

Hi BlackWater, 
We have analyzed the reported problem and can be resolved by using converter to the tooltip template. We have prepared for your reference and it can be downloaded from the below link, 
Sample:Tooltip_Chart
 
Please let us know if you have any concerns. 
Regards, 
Durgadevi S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;