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

[Michael]

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]

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]

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

[Michael]

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

[Durgadevi Selvaraj]

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]

Thank you very much!

[Durgadevi Selvaraj]

Hi Michael,

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

Regards,
Durgadevi S

[Blackwater]

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

[Durgadevi Selvaraj]

Hi Blackwater, 

 

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, 

Sample: Tooltip_Customization 

Please let us know if you have any concern. 

Regards, 

Durgadevi S 

  

  

[Blackwater]

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]

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