Single tooltip for all series in a category

9 posts, 1 answers
  1. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 29 Oct 2013 Link to this post

    Hi

    Is it possible to show a tooltip for all series' values when hovering mouse anywhere in a category column as shown in attached illustration?
    Specifically we are using date axis.
    Thanks

    V.
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 30 Oct 2013 Link to this post

    Hello V,

    In order to achieve this you should use a shared tooltip:  

    $("#chart").kendoChart({
      //....
      tooltip: {
         visible: true,
         shared: true
      }
    });
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 30 Oct 2013 Link to this post

    Thank you, Iliana, the feature is great.

    There is an issue with datetime axis though:
    The category name (tooltip head) isn't copied from axis, but a standard-formatted (mm/dd/yyyy) date is displayed as instead.
    My date range and thus baseUnit is dynamic (set to "fit").
    I tried to use sharedTemplate - here the category field returns completely unformatted datetime value.
    Can I retrieve 
    The category formatted as on the axis?
    OR
    the format-string used on the axis for current baseUnit?
    OR
    at least the actual baseUnit in use?

    V
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 Nov 2013 Link to this post

    Hi V,

    I am afraid what you would like to achieve is not supported by Kendo UI Chart at this point. The only possible workaround I can suggest is setting manually the tooltip format in the tooltip.template:

    $("#chart").kendoChart({
      //....
      tooltip: {
         visible: true,
         shared: true,
         template: "#= kendo.format('{0:dd/MMMM/yyyy}',category) #"}
    });
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 01 Nov 2013 Link to this post

    Yes, that's what I'm trying to do with sharedTemplate. 
    Depending on the range I  need different format string. E.g. month or week or time only just as on the axis.

    The meaning of previous question was if I could somehow get that actual format string from kendoui internals or at least calculated base unit to decide whitch format string to use?
    Thanks.

     V.

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Nov 2013 Link to this post

    Hi V,

    I am afraid there is no a property which contains the discussed format, however we will do our best to provide an option for future releases. Please excuse us for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. JamesD
    JamesD avatar
    23 posts
    Member since:
    Nov 2005

    Posted 28 Jan 2014 Link to this post

    Just reminded that it is actually possible to retrieve the actual unit used:
    http://www.kendoui.com/forums/kendo-ui-dataviz/chart/determine-actual-calculated-baseunit-when-set-to-'fit'-.aspx

    (and then use script to do the formatting)

    V.
  8. Dan
    Dan avatar
    17 posts
    Member since:
    Mar 2006

    Posted 18 Oct Link to this post

    Has there been any change in this?  I still have the same scenario where my X-Axis is set to just have Month and Year (Oct 2017), but the header in the shared version of the tooltip shows 10/1/2017 despite the fact that the underlying data is actually something like 10/18/2017.  It seems to be taking the formatted value and then transforming it to a full date format.
  9. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 20 Oct Link to this post

    Hello, Dan,

    I can suggest using a template for the shared label:

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-tooltip.sharedTemplate

    I made an example demonstrating this. If the scenario defers, please modify the example and I will gladly assist:

    http://dojo.telerik.com/IsinO/2

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top