Chart Area does not last point when hovering over area

6 posts, 0 answers
  1. Allen
    Allen avatar
    18 posts
    Member since:
    Apr 2013

    Posted 24 Jun 2014 Link to this post

    Hi,

    As shown in the attachment, when I hover the end of the chart I see details of some last point.
    However this is not the last point in the series.
    It is actually the second last point.

    As a hack I just added an extraneous point.

    Any ideas why this would be happening.

    Thanks
  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 25 Jun 2014 Link to this post

    Hi Allen,

    I was not able to reproduce the reported issue. Can you elaborate more on your scenario by telling me how you set up the tooltip and how you get the data context (the data point) behind it? Also it would be helpful if you can provide me with a sample project or code snippets that demonstrates your implementation. This will allow me to test the issue locally and investigate what is the cause behind it.

    Thank you in advance for your cooperation. 

    Regards,
    Martin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
  4. Allen
    Allen avatar
    18 posts
    Member since:
    Apr 2013

    Posted 25 Jun 2014 in reply to Martin Link to this post

    Hi Martin,

    Some settings I am using is using the SeriesMapping class to map between my object and the Telerik Charts properties.
    This chart maps the sets the Telerik charts properties 
    XValue = DataPointMember.XCategory

    It uses the SeriesDefinition class to set up the properties of each individual series and to set the tooltip it does the code
     definition.ItemToolTipFormat = "#DATAITEM.Tooltip";














  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 26 Jun 2014 Link to this post

    Hi Allen,

    I understand that you are using the RadChart control with area series. When you hover over a area (or line), the data point that is used as a context is the previous one. So if you mouse over the last line segment you will get information for the data point before the last one. In order to get tooltip for the last one you will need to mouse over its label or data point.

    Furthermore I want to note you that the RadChart is our old charting component which has many known issues and limitations. This is why I recommend you to take a look at our new charting solution, the RadChartView. The new components has better implementation and improved performance, and also are very flexible and easy to set up. You can read about the differences between the components in the RadChart vs RadChartView help article. Moreover, the old chart is in maintenance mode, which means we are not providing bug fixes and features for it.

    If you are just starting to use the RadChart in your application or if its integration with the rest of the application is not too complex I strongly encourage to you to use the RadChartView instead. This way you can benefit from its performance enhancements and the better support for it.

    Regards,
    Martin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  6. Allen
    Allen avatar
    18 posts
    Member since:
    Apr 2013

    Posted 29 Jun 2014 in reply to Martin Link to this post

    Thanks Martin,

    Due to time constraints we probably cannot upgrade from RadChart to RadChartView at this stage.

    So assuming I am sticking to RadChart, looking at the attached image even when I hover the last label
    (which is clipped) I still cannot get the right tooltip to show.

    I am still unsure what is the best workaround for this if there is one.

    Thanks
  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 03 Jul 2014 Link to this post

    Hi Allen,

    When you mouse over a label that is located over the area series, the tooltip will be activated for the area instead for the label. In order to add a tool tip for your labels you can define a custom style. 

    Keep in mind that the tooltips and the labels by default represents same piece of information for a data point and in most cases there is no need to use both. You can use only labels or only tooltips, or both in some particular scenarios. However, as you can see there is a limitation with the tooltips of the RadChart's series. They work very well when you use bar series, but with other types like line or area series it is not clear between which two points the tooltip should be displayed. The tooltip functionality was designed so that, when you mouse over the connecting line between two points, to display information about the previous one. If you don't need to show something different than the point's value or a very large element I will suggest you to use labels instead.

    If you insist using tooltips you can try the following approaches:
    • Set the ShowPointMarks property of the series definition to True. This will display a point (ellipse) for each connection between two data points. When you mouse over this point the tooltip should be correct. 
      <telerik:AreaSeriesDefinition ShowItemToolTips="True" ShowPointMarks="True">
    • Define a Style for series item's label and set it to the SeriesItemLabelStyle. Then in the style set the attached RadToolTipService.ToolTipContent and RadToolTipService.ToolTipContentTemplate properties. Then in the content template create the desired look for the tooltip. This will display a tooltip when you mouse over the label of a data point. 
      <telerik:AreaSeriesDefinition ShowPointMarks="True">
          <telerik:AreaSeriesDefinition.SeriesItemLabelStyle>
              <Style TargetType="telerik:SeriesItemLabel">
                  <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding DataItem}" />
                  <Setter Property="telerik:RadToolTipService.ToolTipContentTemplate">
                      <Setter.Value>
                          <DataTemplate>
                              <TextBlock Text="{Binding ToolTip}" Padding="5" Background="Bisque" />
                          </DataTemplate>
                      </Setter.Value>
                  </Setter>
                  <Setter Property="IsHitTestVisible" Value="True" />
              </Style>
          </telerik:AreaSeriesDefinition.SeriesItemLabelStyle>
      </telerik:AreaSeriesDefinition>

    I prepared a project that demonstrates the approach with the SeriesItemLabelStyle. Please take a look at it and let me know if it helps.

    As for the clip of the label, I wasn't able to reproduce this behavior. Can you provide me with a simple project that demonstrates your implementation. This will help me in better understanding your scenario and assist you further.

    Regards,
    Martin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
DevCraft banner